From 1521b0778545f951aaa78abee37958d9c62ca93d Mon Sep 17 00:00:00 2001
From: rabbitism <dongbin@irihi.tech>
Date: Mon, 15 Apr 2024 03:35:27 +0800
Subject: [PATCH] feat: improve styling.

---
 .../Controls/TreeComboBox.axaml               | 148 +++++++++++++++++-
 src/Ursa/Controls/ComboBox/TreeComboBox.cs    |  24 ++-
 .../Controls/ComboBox/TreeComboBoxItem.cs     |  19 ++-
 .../SelectionBoxTemplateConverter.cs          |  16 ++
 src/Ursa/Ursa.csproj                          |   2 +-
 5 files changed, 188 insertions(+), 21 deletions(-)
 create mode 100644 src/Ursa/Converters/SelectionBoxTemplateConverter.cs

diff --git a/src/Ursa.Themes.Semi/Controls/TreeComboBox.axaml b/src/Ursa.Themes.Semi/Controls/TreeComboBox.axaml
index 01642e4..97f3fbc 100644
--- a/src/Ursa.Themes.Semi/Controls/TreeComboBox.axaml
+++ b/src/Ursa.Themes.Semi/Controls/TreeComboBox.axaml
@@ -8,13 +8,85 @@
     <converters:MarginMultiplierConverter x:Key="LeftMarginConverter" Indent="20" Left="True"/>
     
     <ControlTheme x:Key="{x:Type u:TreeComboBox}" TargetType="u:TreeComboBox">
+        <Setter Property="Padding" Value="{DynamicResource ComboBoxSelectorDefaultPadding}"/>
+        <Setter Property="FocusAdorner" Value="{x:Null}"/>
+        <Setter Property="Background" Value="{DynamicResource ComboBoxSelectorBackground}"/>
+        <Setter Property="CornerRadius" Value="{DynamicResource ComboBoxSelectorCornerRadius}"/>
+        <Setter Property="VerticalContentAlignment" Value="Center"></Setter>
+        <Setter Property="BorderThickness" Value="1"/>
+        <Setter Property="Cursor" Value="Hand"/>
         <Setter Property="Template">
             <ControlTemplate TargetType="u:TreeComboBox">
-                <Grid ColumnDefinitions="*, Auto, 32" Background="Transparent">
-                    <Border Grid.Column="0" Grid.ColumnSpan="3" Background="Transparent" BorderBrush="Blue" BorderThickness="1" CornerRadius="3"/>
-                    <ContentPresenter Grid.Column="0" MinHeight="32" Content="{TemplateBinding SelectionBoxItem}"/>
-                    <Popup Name="{x:Static iri:PartNames.PART_Popup}" Grid.Column="0" IsLightDismissEnabled="True" IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}">
-                        <Border Background="{DynamicResource ComboBoxPopupBackground}">
+                <Grid ColumnDefinitions="*, Auto, 32">
+                    <Border Grid.Column="0" 
+                            Name="Background"
+                            Grid.ColumnSpan="3" 
+                            Background="{TemplateBinding Background}" 
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="{TemplateBinding CornerRadius}"
+                            MinHeight="32"
+                            />
+                    <TextBlock 
+                        Name="PlaceholderTextBlock" 
+                        Grid.Column="0"
+                        Margin="{TemplateBinding Padding}"
+                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                        TextTrimming="CharacterEllipsis"
+                        Foreground="{TemplateBinding Foreground}"
+                        Opacity="0.3"
+                        IsVisible="{TemplateBinding SelectionBoxItem, Converter={x:Static ObjectConverters.IsNull}}"
+                        Text="{TemplateBinding Watermark}"
+                        ></TextBlock>
+                    <ContentPresenter 
+                        Grid.Column="0" 
+                        Margin="{TemplateBinding Padding}"
+                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                        VerticalAlignment="Center"
+                        ContentTemplate="{TemplateBinding SelectedItemTemplate}"
+                        Content="{TemplateBinding SelectionBoxItem}"/>
+                    <Border
+                        x:Name="DropDownOverlay"
+                        Grid.Column="2"
+                        Width="30"
+                        Margin="0,1,1,1"
+                        HorizontalAlignment="Right"
+                        Background="Transparent"
+                        IsVisible="False" />
+
+                    <PathIcon
+                        x:Name="DropDownGlyph"
+                        Grid.Column="2"
+                        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="{x:Static iri:PartNames.PART_Popup}" 
+                        Grid.Column="0" 
+                        MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
+                        MinHeight="{TemplateBinding MaxDropDownHeight}"
+                        ClipToBounds="False"
+                        InheritsTransform="True"
+                        PlacementTarget="Background"
+                        WindowManagerAddShadowHint="False"
+                        IsLightDismissEnabled="True" 
+                        IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}">
+                        <Border 
+                            Name="PopupBorder" 
+                            Margin="0 4" 
+                            Background="{DynamicResource ComboBoxPopupBackground}"
+                            BorderBrush="{DynamicResource ComboBoxPopupBorderBrush}"
+                            BoxShadow="{DynamicResource ComboBoxPopupBoxShadow}"
+                            ClipToBounds="True"
+                            CornerRadius="6"
+                            >
                             <ScrollViewer>
                                 <ItemsPresenter ItemsPanel="{TemplateBinding ItemsPanel}"/>
                             </ScrollViewer>
@@ -26,21 +98,81 @@
     </ControlTheme>
     
     <ControlTheme x:Key="{x:Type u:TreeComboBoxItem}" TargetType="u:TreeComboBoxItem">
+        <Setter Property="Background" Value="{DynamicResource TreeViewItemDefaultBackground}"/>
+        <Setter Property="Foreground" Value="{DynamicResource TreeViewItemDefaultForeground}"/>
+        <Setter Property="CornerRadius" Value="3"/>
+        <Setter Property="VerticalAlignment" Value="Center"/>
         <Setter Property="Template">
             <ControlTemplate TargetType="u:TreeComboBoxItem">
                 <StackPanel>
-                    <Border Name="PART_LayoutRoot" MinHeight="{TemplateBinding MinHeight}" TemplatedControl.IsTemplateFocusTarget="True">
+                    <Border 
+                        Name="PART_LayoutRoot" 
+                        MinHeight="{TemplateBinding MinHeight}" 
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}"
+                        TemplatedControl.IsTemplateFocusTarget="True">
                         <Grid
                             Name="{x:Static iri:PartNames.PART_Header}"
                             Margin="{TemplateBinding Level, Mode=OneWay, Converter={StaticResource LeftMarginConverter}}" 
                               ColumnDefinitions="Auto, *">
-                            <ToggleButton IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}" Theme="{DynamicResource ToggleButtonTreeViewItemIconButton}" Name="PART_ExpandCollapseChevron" Grid.Column="0" Focusable="False"></ToggleButton>
-                            <ContentPresenter Grid.Column="1" Name="{x:Static iri:PartNames.PART_HeaderPresenter}" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" Focusable="False"/>
+                            <ToggleButton 
+                                IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}" 
+                                Theme="{DynamicResource ToggleButtonTreeViewItemIconButton}" 
+                                Name="PART_ExpandCollapseChevron" 
+                                Grid.Column="0" 
+                                Padding="{DynamicResource TreeViewItemIconMargin}"
+                                Focusable="False"></ToggleButton>
+                            <ContentPresenter 
+                                Grid.Column="1" 
+                                Name="{x:Static iri:PartNames.PART_HeaderPresenter}"
+                                Margin="{TemplateBinding Padding}"
+                                Padding="{DynamicResource TreeViewItemPadding}"
+                                HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                                VerticalAlignment="{TemplateBinding VerticalAlignment}"
+                                Foreground="{TemplateBinding Foreground}"
+                                Content="{TemplateBinding Header}" 
+                                ContentTemplate="{TemplateBinding HeaderTemplate}" 
+                                Focusable="False"/>
                         </Grid>
                     </Border>
                     <ItemsPresenter IsVisible="{TemplateBinding IsExpanded}" Name="{x:Static iri:PartNames.PART_ItemsPresenter}" ItemsPanel="{TemplateBinding ItemsPanel}"/>
                 </StackPanel>
             </ControlTemplate>
         </Setter>
+        
+        <!--  Pointerover state  -->
+        <Style Selector="^ /template/ Border#PART_LayoutRoot:pointerover">
+            <Setter Property="Background" Value="{DynamicResource TreeViewItemPointeroverBackground}" />
+        </Style>
+
+        <!--  Pressed state  -->
+        <Style Selector="^:pressed /template/ Border#PART_LayoutRoot:pointerover">
+            <Setter Property="Background" Value="{DynamicResource TreeViewItemPressedBackground}" />
+        </Style>
+
+        <!--  Disabled state  -->
+        <Style Selector="^:disabled /template/ Border#PART_LayoutRoot">
+            <Setter Property="Background" Value="{DynamicResource TreeViewItemDisabledBackground}" />
+        </Style>
+        <Style Selector="^:disabled /template/ ContentPresenter#PART_HeaderPresenter">
+            <Setter Property="Foreground" Value="{DynamicResource TreeViewItemDisabledForeground}" />
+        </Style>
+
+        <!--  Selected state  -->
+        <Style Selector="^:selected /template/ Border#PART_LayoutRoot">
+            <Setter Property="Background" Value="{DynamicResource TreeViewItemSelectedBackground}" />
+        </Style>
+
+        <!--  Disabled Selected state  -->
+        <Style Selector="^:disabled:selected /template/ Border#PART_LayoutRoot">
+            <Setter Property="Background" Value="{DynamicResource TreeViewItemSelectedDisabledBackground}" />
+        </Style>
+
+        <Style Selector="^:empty /template/ ToggleButton#PART_ExpandCollapseChevron">
+            <Setter Property="Opacity" Value="0" />
+            <Setter Property="IsHitTestVisible" Value="False" />
+        </Style>
     </ControlTheme>
 </ResourceDictionary>
diff --git a/src/Ursa/Controls/ComboBox/TreeComboBox.cs b/src/Ursa/Controls/ComboBox/TreeComboBox.cs
index a20632a..8de5173 100644
--- a/src/Ursa/Controls/ComboBox/TreeComboBox.cs
+++ b/src/Ursa/Controls/ComboBox/TreeComboBox.cs
@@ -6,6 +6,7 @@ using Avalonia.Controls.Primitives;
 using Avalonia.Controls.Templates;
 using Avalonia.Input;
 using Avalonia.Layout;
+using Avalonia.LogicalTree;
 using Avalonia.OpenGL.Controls;
 using Irihi.Avalonia.Shared.Common;
 
@@ -115,24 +116,31 @@ public class TreeComboBox: SelectingItemsControl
         return CreateContainerForItemOverride(item, index, recycleKey);
     }
 
-    protected override void ContainerForItemPreparedOverride(Control container, object? item, int index)
-    {
-        base.ContainerForItemPreparedOverride(container, item, index);
-    }
-
     internal void ContainerForItemPreparedInternal(Control container, object? item, int index)
     {
         ContainerForItemPreparedOverride(container, item, index);
     }
-
+    
     protected override void OnPointerReleased(PointerReleasedEventArgs e)
     {
         base.OnPointerReleased(e);
         if (e.InitialPressMouseButton == MouseButton.Left)
         {
-            if (_popup is not null && _popup.IsOpen && e.Source is TextBlock v && _popup.IsInsidePopup(v))
+            if (_popup is not null && _popup.IsOpen && e.Source is Visual v && _popup.IsInsidePopup(v))
             {
-                SelectionBoxItem = v.Text;
+                var container = v.FindLogicalAncestorOfType<TreeComboBoxItem>();
+                container?.SetValue(IsSelectedProperty, true);
+                if (container?.Header is Control control)
+                {
+                    SelectionBoxItem = control.DataContext ?? control.ToString();
+                    // UpdateSelectionFromEventSource(e.Source);
+                    
+                }
+                else
+                {
+                    SelectionBoxItem = container?.Header; 
+                    // UpdateSelectionFromEventSource(e.Source);
+                }
                 SetCurrentValue(IsDropDownOpenProperty, false);
             }
             else
diff --git a/src/Ursa/Controls/ComboBox/TreeComboBoxItem.cs b/src/Ursa/Controls/ComboBox/TreeComboBoxItem.cs
index 887d20a..f2d3b1c 100644
--- a/src/Ursa/Controls/ComboBox/TreeComboBoxItem.cs
+++ b/src/Ursa/Controls/ComboBox/TreeComboBoxItem.cs
@@ -1,6 +1,7 @@
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Metadata;
+using Avalonia.Controls.Mixins;
 using Avalonia.Controls.Primitives;
 using Avalonia.Input;
 using Avalonia.Interactivity;
@@ -45,6 +46,13 @@ public class TreeComboBoxItem: HeaderedItemsControl, ISelectable
         protected set => SetAndRaise(LevelProperty, ref _level, value);
     }
 
+    static TreeComboBoxItem()
+    {
+        IsSelectedProperty.AffectsPseudoClass<TreeComboBoxItem>(PseudoClassName.PC_Selected,
+            SelectingItemsControl.IsSelectedChangedEvent);
+        PressedMixin.Attach<TreeComboBoxItem>();
+    }
+
     protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
     {
         base.OnApplyTemplate(e);
@@ -57,14 +65,15 @@ public class TreeComboBoxItem: HeaderedItemsControl, ISelectable
     {
         base.OnAttachedToLogicalTree(e);
         _treeComboBox = this.FindLogicalAncestorOfType<TreeComboBox>();
-        Level = CalculateDistanceFromLogicalParent<TreeComboBox>(this);
+        Level = CalculateDistanceFromLogicalParent<TreeComboBox>(this) - 1;
         if (this.ItemTemplate is null && this._treeComboBox?.ItemTemplate is not null)
         {
             SetCurrentValue(ItemTemplateProperty, this._treeComboBox.ItemTemplate);
         }
-        
-        
-        
+        if(this.ItemContainerTheme is null && this._treeComboBox?.ItemContainerTheme is not null)
+        {
+            SetCurrentValue(ItemContainerThemeProperty, this._treeComboBox.ItemContainerTheme);
+        }
     }
 
     private void OnDoubleTapped(object sender, TappedEventArgs e)
@@ -76,6 +85,8 @@ public class TreeComboBoxItem: HeaderedItemsControl, ISelectable
 
     protected override bool NeedsContainerOverride(object? item, int index, out object? recycleKey)
     {
+        TreeViewItem t = new TreeViewItem();
+        ComboBox c = new ComboBox();
         return EnsureParent().NeedsContainerInternal(item, index, out recycleKey);
     }
 
diff --git a/src/Ursa/Converters/SelectionBoxTemplateConverter.cs b/src/Ursa/Converters/SelectionBoxTemplateConverter.cs
new file mode 100644
index 0000000..3f735b7
--- /dev/null
+++ b/src/Ursa/Converters/SelectionBoxTemplateConverter.cs
@@ -0,0 +1,16 @@
+using System.Globalization;
+using Avalonia.Controls.Templates;
+using Avalonia.Data.Converters;
+
+namespace Ursa.Converters;
+
+public class SelectionBoxTemplateConverter: IMultiValueConverter
+{
+    public object? Convert(IList<object?> values, Type targetType, object? parameter, CultureInfo culture)
+    {
+        var selectedItemTemplate = values.Count > 0 ? values[0] as IDataTemplate : null;
+        if (selectedItemTemplate is not null) return selectedItemTemplate;
+        var itemTemplate = values.Count > 1 ? values[1] as IDataTemplate : null;
+        return itemTemplate;
+    }
+}
\ No newline at end of file
diff --git a/src/Ursa/Ursa.csproj b/src/Ursa/Ursa.csproj
index 853e121..6b5f3e0 100644
--- a/src/Ursa/Ursa.csproj
+++ b/src/Ursa/Ursa.csproj
@@ -17,7 +17,7 @@
 
     <ItemGroup>
         <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)"/>
-        <PackageReference Include="Irihi.Avalonia.Shared" Version="0.1.6" />
+        <PackageReference Include="Irihi.Avalonia.Shared" Version="0.1.7" />
     </ItemGroup>
 
     <ItemGroup>