Merge pull request #22 from irihitech/combobox

Combobox

src/Semi.Avalonia.Demo/MainWindow.axaml

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

src/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml

@@ -0,0 +1,27 @@
+<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>
+        <ComboBox Width="150" PlaceholderText="Please Select">
+            <TextBlock>AAA</TextBlock>
+            <TextBlock>BBB</TextBlock>
+            <TextBlock>CCC</TextBlock>
+        </ComboBox>
+        <ComboBox Width="150" IsEnabled="False">
+            <TextBlock>AAA</TextBlock>
+            <TextBlock>BBB</TextBlock>
+            <TextBlock>CCC</TextBlock>
+        </ComboBox>
+    </StackPanel>
+</UserControl>

src/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml.cs

@@ -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);
+    }
+}

src/Semi.Avalonia/Controls/ComboBox.axaml

@@ -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>

src/Semi.Avalonia/Controls/Controls.axaml

@@ -4,6 +4,7 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/Border.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/Button.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/FlyoutPresenter.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/Label.axaml" />

src/Semi.Avalonia/Themes/Light/ComboBox.axaml

@@ -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>

src/Semi.Avalonia/Themes/Light/Light.axaml

@@ -5,6 +5,7 @@
         <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/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/Label.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/ListBox.axaml" />