From 429048861cb4c9ba0af9e0a12acb5b6cb1a1c518 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Wed, 4 Jan 2023 17:24:39 +0800
Subject: [PATCH] feat: add combobox

---
 src/Semi.Avalonia.Demo/MainWindow.axaml       |   3 +
 .../Pages/ComboBoxDemo.axaml                  |  17 ++
 .../Pages/ComboBoxDemo.axaml.cs               |  18 ++
 src/Semi.Avalonia/Controls/ComboBox.axaml     | 215 ++++++++++++++++++
 src/Semi.Avalonia/Controls/Controls.axaml     |   1 +
 src/Semi.Avalonia/Themes/Light/ComboBox.axaml |  40 ++++
 src/Semi.Avalonia/Themes/Light/Light.axaml    |   1 +
 7 files changed, 295 insertions(+)
 create mode 100644 src/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml
 create mode 100644 src/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml.cs
 create mode 100644 src/Semi.Avalonia/Controls/ComboBox.axaml
 create mode 100644 src/Semi.Avalonia/Themes/Light/ComboBox.axaml

diff --git a/src/Semi.Avalonia.Demo/MainWindow.axaml b/src/Semi.Avalonia.Demo/MainWindow.axaml
index e71f05f..a749050 100644
--- a/src/Semi.Avalonia.Demo/MainWindow.axaml
+++ b/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>
diff --git a/src/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml b/src/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml
new file mode 100644
index 0000000..9c3c32c
--- /dev/null
+++ b/src/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml
@@ -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>
diff --git a/src/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml.cs b/src/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml.cs
new file mode 100644
index 0000000..180a1ab
--- /dev/null
+++ b/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);
+    }
+}
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Controls/ComboBox.axaml b/src/Semi.Avalonia/Controls/ComboBox.axaml
new file mode 100644
index 0000000..d2d24d3
--- /dev/null
+++ b/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>
diff --git a/src/Semi.Avalonia/Controls/Controls.axaml b/src/Semi.Avalonia/Controls/Controls.axaml
index 491abfe..b3eb5de 100644
--- a/src/Semi.Avalonia/Controls/Controls.axaml
+++ b/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" />
diff --git a/src/Semi.Avalonia/Themes/Light/ComboBox.axaml b/src/Semi.Avalonia/Themes/Light/ComboBox.axaml
new file mode 100644
index 0000000..8f50dac
--- /dev/null
+++ b/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>
diff --git a/src/Semi.Avalonia/Themes/Light/Light.axaml b/src/Semi.Avalonia/Themes/Light/Light.axaml
index 7aa456e..8b41c0b 100644
--- a/src/Semi.Avalonia/Themes/Light/Light.axaml
+++ b/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" />