zhaoyushun1999/Semi.Avalonia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add combobox

Browse Source
This commit is contained in:
rabbitism 2023-01-04 17:24:39 +08:00
parent 33eaa1edc7
commit 429048861c
7 changed files with 295 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/Semi.Avalonia.Demo/MainWindow.axaml
View File

@ -22,6 +22,9 @@
<TabItem Header="CheckBox"> <TabItem Header="CheckBox">
<pages:CheckBoxDemo /> <pages:CheckBoxDemo />
</TabItem> </TabItem>
<TabItem Header="ComboBox">
<pages:ComboBoxDemo />
</TabItem>
<TabItem Header="Expander"> <TabItem Header="Expander">
<pages:ExpanderDemo /> <pages:ExpanderDemo />
</TabItem> </TabItem>

17
src/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml Normal file
View File

@ -0,0 +1,17 @@
<UserControl
x:Class="Semi.Avalonia.Demo.Pages.ComboBoxDemo"
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<StackPanel Margin="20" Spacing="20">
<ComboBox Width="150">
<TextBlock>AAA</TextBlock>
<TextBlock>BBB</TextBlock>
<TextBlock>CCC</TextBlock>
</ComboBox>
</StackPanel>
</UserControl>

18
src/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml.cs Normal file
View File

@ -0,0 +1,18 @@
using Avalonia;
using Avalonia.Controls;
using Avalonia.Markup.Xaml;
namespace Semi.Avalonia.Demo.Pages;
public partial class ComboBoxDemo : UserControl
{
public ComboBoxDemo()
{
InitializeComponent();
}
private void InitializeComponent()
{
AvaloniaXamlLoader.Load(this);
}
}

215
src/Semi.Avalonia/Controls/ComboBox.axaml Normal file
View File

@ -0,0 +1,215 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Design.PreviewWith>
<StackPanel Margin="20">
<ComboBoxItem>Hello World</ComboBoxItem>
<ComboBoxItem>Hello World</ComboBoxItem>
<ComboBoxItem IsSelected="True">Hello World</ComboBoxItem>
<ComboBox Width="100" SelectedIndex="0">
<ComboBoxItem>AAA</ComboBoxItem>
<ComboBoxItem>BBB</ComboBoxItem>
<ComboBoxItem>CCC</ComboBoxItem>
</ComboBox>
<ComboBox Width="100" PlaceholderText="Select">
<ComboBoxItem>AAA</ComboBoxItem>
<ComboBoxItem>BBB</ComboBoxItem>
<ComboBoxItem>CCC</ComboBoxItem>
</ComboBox>
<ComboBox
Width="100"
IsEnabled="False"
PlaceholderText="Select">
<ComboBoxItem>AAA</ComboBoxItem>
<ComboBoxItem>BBB</ComboBoxItem>
<ComboBoxItem>CCC</ComboBoxItem>
</ComboBox>
</StackPanel>
</Design.PreviewWith>
<ControlTheme x:Key="{x:Type ComboBox}" TargetType="ComboBox">
<Setter Property="Padding" Value="{DynamicResource ComboBoxSelectorDefaultPadding}" />
<Setter Property="FocusAdorner" Value="{x:Null}" />
<Setter Property="MaxDropDownHeight" Value="504" />
<Setter Property="Foreground" Value="{DynamicResource ComboBoxForeground}" />
<Setter Property="Background" Value="{DynamicResource ComboBoxSelectorBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ComboBoxBorderBrush}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="{DynamicResource ComboBoxSelectorCornerRadius}" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="MinHeight" Value="30" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
<Setter Property="PlaceholderForeground" Value="{DynamicResource ComboBoxPlaceHolderForeground}" />
<Setter Property="Template">
<ControlTemplate TargetType="ComboBox">
<Grid ColumnDefinitions="*,32">
<Border
x:Name="Background"
Grid.Column="0"
Grid.ColumnSpan="2"
MinWidth="{DynamicResource ComboBoxThemeMinWidth}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}" />
<TextBlock
x:Name="PlaceholderTextBlock"
Grid.Column="0"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
IsVisible="{TemplateBinding SelectionBoxItem,
Converter={x:Static ObjectConverters.IsNull}}"
Opacity="0.3"
Text="{TemplateBinding PlaceholderText}" />
<ContentPresenter
x:Name="ContentPresenter"
Grid.Column="0"
Margin="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding ItemTemplate}" />
<Border
x:Name="DropDownOverlay"
Grid.Column="1"
Width="30"
Margin="0,1,1,1"
HorizontalAlignment="Right"
Background="Transparent"
IsVisible="False" />
<PathIcon
x:Name="DropDownGlyph"
Grid.Column="1"
Width="12"
Height="12"
Margin="0,0,10,0"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Data="{DynamicResource ComboBoxIcon}"
Foreground="{DynamicResource ComboBoxIconDefaultForeground}"
IsHitTestVisible="False"
UseLayoutRounding="False" />
<Popup
Name="PART_Popup"
Grid.Column="0"
MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
MaxHeight="{TemplateBinding MaxDropDownHeight}"
ClipToBounds="False"
InheritsTransform="True"
IsLightDismissEnabled="True"
IsOpen="{TemplateBinding IsDropDownOpen,
Mode=TwoWay}"
PlacementTarget="Background"
WindowManagerAddShadowHint="False">
<Border
x:Name="PopupBorder"
Margin="0,4"
HorizontalAlignment="Stretch"
Background="{DynamicResource ComboBoxPopupBackground}"
BorderBrush="{DynamicResource ComboBoxPopupBorderBrush}"
BorderThickness="{DynamicResource ComboBoxPopupBorderThickness}"
BoxShadow="{DynamicResource ComboBoxPopupBoxShadow}"
CornerRadius="6">
<ScrollViewer HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
<ItemsPresenter
Name="PART_ItemsPresenter"
Margin="{DynamicResource ComboBoxDropdownContentMargin}"
ItemTemplate="{TemplateBinding ItemTemplate}"
Items="{TemplateBinding Items}"
ItemsPanel="{TemplateBinding ItemsPanel}"
VirtualizationMode="{TemplateBinding VirtualizationMode}" />
</ScrollViewer>
</Border>
</Popup>
</Grid>
</ControlTemplate>
</Setter>
<!-- PointerOver State -->
<Style Selector="^:pointerover">
<Setter Property="Background" Value="{DynamicResource ComboBoxSelectorPointerOverBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ComboBoxSelectorPointerOverBorderBrush}" />
</Style>
<Style Selector="^:pointerover /template/ PathIcon#DropDownGlyph">
<Setter Property="Foreground" Value="{DynamicResource ComboBoxIconPointerOverForeground}" />
</Style>
<!-- Pressed State -->
<Style Selector="^:pressed">
<Setter Property="Background" Value="{DynamicResource ComboBoxSelectorPressedBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ComboBoxSelectorPressedBorderBrush}" />
<Style Selector="^ /template/ PathIcon#DropDownGlyph">
<Setter Property="Foreground" Value="{DynamicResource ComboBoxIconPressedForeground}" />
</Style>
</Style>
<Style Selector="^:dropdownopen">
<Setter Property="BorderBrush" Value="{DynamicResource ComboBoxSelectorPressedBorderBrush}" />
</Style>
<!-- Disabled State -->
<Style Selector="^:disabled">
<Setter Property="Background" Value="{DynamicResource ComboBoxSelectorDisabledBackground}" />
<Style Selector="^ /template/ ContentControl#ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource ComboBoxDisabledForeground}" />
</Style>
<Style Selector="^ /template/ TextBlock#PlaceholderTextBlock">
<Setter Property="Foreground" Value="{DynamicResource ComboBoxDisabledForeground}" />
</Style>
<Style Selector="^ /template/ PathIcon#DropDownGlyph">
<Setter Property="Foreground" Value="{DynamicResource ComboBoxIconDisabledForeground}" />
</Style>
</Style>
</ControlTheme>
<ControlTheme x:Key="{x:Type ComboBoxItem}" TargetType="ComboBoxItem">
<Setter Property="Foreground" Value="{DynamicResource ComboBoxItemForeground}" />
<Setter Property="Background" Value="{DynamicResource ComboBoxItemBackground}" />
<Setter Property="Padding" Value="{DynamicResource ComboBoxItemDefaultPadding}" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Template">
<ControlTemplate TargetType="ComboBoxItem">
<ContentPresenter
Name="PART_ContentPresenter"
Padding="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
CornerRadius="{TemplateBinding CornerRadius}"
Foreground="{TemplateBinding Foreground}" />
</ControlTemplate>
</Setter>
<Style Selector="^:pointerover">
<Setter Property="Background" Value="{DynamicResource ComboBoxItemPointerOverBackground}" />
</Style>
<Style Selector="^:disabled">
<Setter Property="Background" Value="{DynamicResource ComboBoxItemDisabledBackground}" />
</Style>
<Style Selector="^:pressed">
<Setter Property="Background" Value="{DynamicResource ComboBoxItemPressedBackground}" />
</Style>
<Style Selector="^:selected">
<Setter Property="Background" Value="{DynamicResource ComboBoxItemSelectedBackground}" />
<Style Selector="^:disabled">
<Setter Property="Background" Value="{DynamicResource ComboBoxItemSelectedDisabledBackground}" />
</Style>
<Style Selector="^:pointerover">
<Setter Property="Background" Value="{DynamicResource ComboBoxItemSelectedPointerOverBackground}" />
</Style>
</Style>
</ControlTheme>
</ResourceDictionary>

1
src/Semi.Avalonia/Controls/Controls.axaml
View File

@ -4,6 +4,7 @@
<ResourceInclude Source="avares://Semi.Avalonia/Controls/Border.axaml" /> <ResourceInclude Source="avares://Semi.Avalonia/Controls/Border.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/Button.axaml" /> <ResourceInclude Source="avares://Semi.Avalonia/Controls/Button.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/CheckBox.axaml" /> <ResourceInclude Source="avares://Semi.Avalonia/Controls/CheckBox.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/ComboBox.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/Expander.axaml" /> <ResourceInclude Source="avares://Semi.Avalonia/Controls/Expander.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/FlyoutPresenter.axaml" /> <ResourceInclude Source="avares://Semi.Avalonia/Controls/FlyoutPresenter.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/Label.axaml" /> <ResourceInclude Source="avares://Semi.Avalonia/Controls/Label.axaml" />

40
src/Semi.Avalonia/Themes/Light/ComboBox.axaml Normal file
View File

@ -0,0 +1,40 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<SolidColorBrush x:Key="ComboBoxSelectorBackground" Opacity="0.05" Color="#2E3238" />
<SolidColorBrush x:Key="ComboBoxSelectorPointerOverBackground" Opacity="0.09" Color="#2E3238" />
<SolidColorBrush x:Key="ComboBoxSelectorPressedBackground" Opacity="0.13" Color="#2E3238" />
<SolidColorBrush x:Key="ComboBoxSelectorDisabledBackground" Opacity="0.04" Color="#2E3238" />
<SolidColorBrush x:Key="ComboBoxSelectorBorderBrush" Color="Transparent" />
<SolidColorBrush x:Key="ComboBoxSelectorPointerOverBorderBrush" Color="Transparent" />
<SolidColorBrush x:Key="ComboBoxSelectorPressedBorderBrush" Color="#004FB3" />
<CornerRadius x:Key="ComboBoxSelectorCornerRadius">3</CornerRadius>
<SolidColorBrush x:Key="ComboBoxIconDefaultForeground" Opacity="0.62" Color="#1C1F23" />
<SolidColorBrush x:Key="ComboBoxIconPointerOverForeground" Color="#1C1F23" />
<SolidColorBrush x:Key="ComboBoxIconPressedForeground" Color="#1C1F23" />
<SolidColorBrush x:Key="ComboBoxIconDisabledForeground" Opacity="0.35" Color="#1C1F23" />
<SolidColorBrush x:Key="ComboBoxDisabledForeground" Opacity="0.35" Color="#1C1F23" />
<Thickness x:Key="ComboBoxItemDefaultPadding">8 4</Thickness>
<Thickness x:Key="ComboBoxSelectorDefaultPadding">8 0</Thickness>
<BoxShadows x:Key="ComboBoxPopupBoxShadow">0 0 8 0 #1A000000</BoxShadows>
<SolidColorBrush x:Key="ComboBoxPopupBackground" Color="White" />
<SolidColorBrush x:Key="ComboBoxPopupBorderBrush" Opacity="0.08" Color="#1C1F23" />
<Thickness x:Key="ComboBoxPopupBorderThickness">1</Thickness>
<SolidColorBrush x:Key="ComboBoxItemForeground" Color="#1C1F23" />
<SolidColorBrush x:Key="ComboBoxItemBackground" Color="Transparent" />
<SolidColorBrush x:Key="ComboBoxItemPointerOverBackground" Opacity="0.05" Color="#2E3238" />
<SolidColorBrush x:Key="ComboBoxItemPressedBackground" Opacity="0.09" Color="#2E3238" />
<SolidColorBrush x:Key="ComboBoxItemSelectedBackground" Color="#EAF5FF" />
<SolidColorBrush x:Key="ComboBoxItemSelectedPointerOverBackground" Color="#CBE7FE" />
<SolidColorBrush x:Key="ComboBoxItemDisabledBackground" Color="Transparent" />
<SolidColorBrush x:Key="ComboBoxItemSelectedDisabledBackground" Opacity="0.04" Color="#2E3238" />
<PathGeometry x:Key="ComboBoxIcon">
M4.08045 7.59809C4.66624 7.01231 5.61599 7.01231 6.20177 7.59809L11.8586 13.2549L17.5155 7.59809C18.1013 7.01231 19.051 7.01231 19.6368 7.59809C20.2226 8.18388 20.2226 9.13363 19.6368 9.71941L12.9193 16.4369C12.3335 17.0227 11.3838 17.0227 10.798 16.4369L4.08045 9.71941C3.49467 9.13363 3.49467 8.18388 4.08045 7.59809Z
</PathGeometry>
</ResourceDictionary>

1
src/Semi.Avalonia/Themes/Light/Light.axaml
View File

@ -5,6 +5,7 @@
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Border.axaml" /> <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Border.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Button.axaml" /> <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Button.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/CheckBox.axaml" /> <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/CheckBox.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/ComboBox.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Expander.axaml" /> <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Expander.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Label.axaml" /> <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Label.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/ListBox.axaml" /> <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/ListBox.axaml" />