From 5d917d590546f11427083f1e9dc7a155b390f675 Mon Sep 17 00:00:00 2001
From: rabbitism <dongbin@irihi.tech>
Date: Tue, 26 Mar 2024 12:05:16 +0800
Subject: [PATCH] feat: support clear.

---
 demo/Ursa.Demo/Pages/MultiComboBoxDemo.axaml  |   5 +-
 .../Controls/MultiComboBox.axaml              | 301 ++++++++++--------
 src/Ursa/Controls/ComboBox/MultiComboBox.cs   |  58 +++-
 3 files changed, 229 insertions(+), 135 deletions(-)

diff --git a/demo/Ursa.Demo/Pages/MultiComboBoxDemo.axaml b/demo/Ursa.Demo/Pages/MultiComboBoxDemo.axaml
index 2fb5a4b..cd1844c 100644
--- a/demo/Ursa.Demo/Pages/MultiComboBoxDemo.axaml
+++ b/demo/Ursa.Demo/Pages/MultiComboBoxDemo.axaml
@@ -8,7 +8,8 @@
              x:DataType="vm:MultiComboBoxDemoViewModel"
              x:CompileBindings="True"
              x:Class="Ursa.Demo.Pages.MultiComboBoxDemo">
-    <StackPanel>
-        <u:MultiComboBox ItemsSource="{Binding Items}"/>
+    <StackPanel Orientation="Horizontal">
+        <u:MultiComboBox Classes="ClearButton" Name="combo" ItemsSource="{Binding Items}"/>
+        <ListBox ItemsSource="{Binding #combo.SelectedItems}"/>
     </StackPanel>
 </UserControl>
diff --git a/src/Ursa.Themes.Semi/Controls/MultiComboBox.axaml b/src/Ursa.Themes.Semi/Controls/MultiComboBox.axaml
index 4e4726a..45108f9 100644
--- a/src/Ursa.Themes.Semi/Controls/MultiComboBox.axaml
+++ b/src/Ursa.Themes.Semi/Controls/MultiComboBox.axaml
@@ -5,65 +5,160 @@
     <!--  Add Resources Here  -->
     <ControlTheme x:Key="{x:Type u:MultiComboBox}" TargetType="u:MultiComboBox">
         <Setter Property="Focusable" Value="True" />
+        <Setter Property="VerticalAlignment" Value="Top"/>
+        <Setter Property="Background" Value="{DynamicResource ComboBoxSelectorBackground}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource ComboBoxSelectorCornerRadius}" />
+        <Setter Property="BorderBrush" Value="Transparent" />
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="Width" Value="300" />
         <Setter Property="MaxDropdownHeight" Value="300" />
         <Setter Property="MinHeight" Value="32" />
         <Setter Property="Padding" Value="12 4" />
+        <Setter Property="BorderThickness" Value="1" />
         <Setter Property="Template">
             <ControlTemplate TargetType="u:MultiComboBox">
-                <Panel>
-                    <Border
-                        HorizontalAlignment="Stretch"
-                        VerticalAlignment="Stretch"
-                        Background="Transparent"
-                        BorderBrush="{DynamicResource SemiGrey2}"
-                        BorderThickness="1">
-                        <Grid Name="PART_RootGrid" ColumnDefinitions="*, Auto, 32">
-                            <Border
-                                Name="{x:Static u:MultiComboBox.PART_BackgroundBorder}"
-                                Grid.Column="0"
-                                Grid.ColumnSpan="3"
-                                Background="Transparent" />
-                            <u:MultiComboBoxSelectedItemList
-                                Grid.Column="0"
-                                ItemsSource="{TemplateBinding SelectedItems}"
-                                RemoveCommand="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Remove}">
-                                <ItemsControl.ItemsPanel>
-                                    <ItemsPanelTemplate>
-                                        <WrapPanel Orientation="Horizontal" />
-                                    </ItemsPanelTemplate>
-                                </ItemsControl.ItemsPanel>
-                            </u:MultiComboBoxSelectedItemList>
-                            <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" />
-                        </Grid>
-                    </Border>
-                    <Popup
-                        Width="{Binding #PART_RootGrid.Bounds.Width}"
-                        MaxHeight="{TemplateBinding MaxDropdownHeight}"
-                        IsLightDismissEnabled="True"
-                        IsOpen="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsDropDownOpen, Mode=TwoWay}"
-                        PlacementTarget="PART_RootGrid">
-                        <Border Theme="{DynamicResource CardBorder}">
-                            <ScrollViewer>
-                                <ItemsPresenter HorizontalAlignment="Stretch" ItemsPanel="{TemplateBinding ItemsPanel}" />
-                            </ScrollViewer>
+                <DataValidationErrors>
+                    <Panel>
+                        <Border
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Stretch"
+                            Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="{TemplateBinding CornerRadius}">
+                            <Grid Name="PART_RootGrid" ColumnDefinitions="*, Auto, 32">
+                                <Border
+                                    Name="{x:Static u:MultiComboBox.PART_BackgroundBorder}"
+                                    Grid.Column="0"
+                                    Grid.ColumnSpan="3"
+                                    Background="Transparent" />
+                                <u:MultiComboBoxSelectedItemList
+                                    Grid.Column="0"
+                                    VerticalAlignment="Center"
+                                    ItemsSource="{TemplateBinding SelectedItems}"
+                                    RemoveCommand="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Remove}">
+                                    <ItemsControl.ItemsPanel>
+                                        <ItemsPanelTemplate>
+                                            <WrapPanel Orientation="Horizontal" />
+                                        </ItemsPanelTemplate>
+                                    </ItemsControl.ItemsPanel>
+                                </u:MultiComboBoxSelectedItemList>
+                                <Button
+                                    Name="ClearButton"
+                                    Grid.Column="1"
+                                    Command="{Binding $parent[u:MultiComboBox].Clear}"
+                                    Content="{DynamicResource IconButtonClearData}"
+                                    IsVisible="False"
+                                    Theme="{DynamicResource InnerIconButton}" />
+                                <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" />
+                            </Grid>
                         </Border>
-                    </Popup>
-                </Panel>
+                        <Popup
+                            Width="{Binding #PART_RootGrid.Bounds.Width}"
+                            MaxHeight="{TemplateBinding MaxDropdownHeight}"
+                            IsLightDismissEnabled="True"
+                            IsOpen="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsDropDownOpen, Mode=TwoWay}"
+                            PlacementTarget="PART_RootGrid">
+                            <Border
+                                Margin="0,4"
+                                HorizontalAlignment="Stretch"
+                                Background="{DynamicResource ComboBoxPopupBackground}"
+                                BorderBrush="{DynamicResource ComboBoxPopupBorderBrush}"
+                                BorderThickness="{DynamicResource ComboBoxPopupBorderThickness}"
+                                BoxShadow="{DynamicResource ComboBoxPopupBoxShadow}"
+                                ClipToBounds="True"
+                                CornerRadius="6">
+                                <ScrollViewer                                         Grid.IsSharedSizeScope="True" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
+                                    <ItemsPresenter
+                                        Name="PART_ItemsPresenter"
+                                        Margin="{DynamicResource ComboBoxDropdownContentMargin}"
+                                        HorizontalAlignment="Stretch"
+                                        ItemsPanel="{TemplateBinding ItemsPanel}" />
+                                </ScrollViewer>
+                            </Border>
+                        </Popup>
+                    </Panel>
+                </DataValidationErrors>
             </ControlTemplate>
         </Setter>
+        <Style Selector="^.Large">
+            <Setter Property="MinHeight" Value="{DynamicResource ComboBoxLargeHeight}" />
+        </Style>
+        <Style Selector="^.Small">
+            <Setter Property="MinHeight" Value="{DynamicResource ComboBoxSmallHeight}" />
+        </Style>
+        
+        <Style Selector="^.clearButton, ^.ClearButton">
+            <Style Selector="^:pointerover:not(:selection-empty) /template/ Button#ClearButton">
+                <Setter Property="IsVisible" Value="{Binding $parent[ComboBox].SelectionBoxItem, Converter={x:Static ObjectConverters.IsNotNull}}" />
+            </Style>
+        </Style>
+
+
+        <!--  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>
+        <!--  Error State  -->
+        <Style Selector="^:error">
+            <Style Selector="^ /template/ Border#Background">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsBackground}" />
+            </Style>
+            <Style Selector="^:pointerover /template/ Border#Background">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPointerOverBackground}" />
+                <Setter Property="BorderBrush" Value="Transparent" />
+            </Style>
+            <Style Selector="^:pressed /template/ Border#Background">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPressedBackground}" />
+                <Setter Property="BorderBrush" Value="Transparent" />
+            </Style>
+            <Style Selector="^:focus /template/ Border#Background">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsSelectedBackground}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsSelectedBorderBrush}" />
+            </Style>
+        </Style>
     </ControlTheme>
 
     <ControlTheme x:Key="{x:Type u:MultiComboBoxItem}" TargetType="u:MultiComboBoxItem">
@@ -87,26 +182,17 @@
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
-                    <Grid x:Name="RootGrid" ColumnDefinitions="Auto,*">
-                        <Grid
+                    <Grid x:Name="RootGrid" ColumnDefinitions="Auto, *">
+                        <PathIcon
+                            Name="CheckGlyph"
                             Grid.Column="0"
-                            Margin="0,0,0,0"
-                            VerticalAlignment="Center">
-                            <Border
-                                x:Name="NormalRectangle"
-                                Width="{DynamicResource ListBoxItemCheckBoxWidth}"
-                                Height="{DynamicResource ListBoxItemCheckBoxHeight}"
-                                Background="{DynamicResource ListBoxItemCheckDefaultBackground}"
-                                BorderBrush="{DynamicResource ListBoxItemCheckDefaultBorderBrush}"
-                                BorderThickness="{DynamicResource ListBoxItemCheckBoxBorderThickness}"
-                                CornerRadius="{TemplateBinding CornerRadius}"
-                                UseLayoutRounding="False" />
-                            <PathIcon
-                                Name="CheckGlyph"
-                                Width="{DynamicResource ListBoxItemCheckBoxGlyphWidth}"
-                                Height="{DynamicResource ListBoxItemCheckBoxGlyphHeight}"
-                                Foreground="{DynamicResource ListBoxItemCheckGlyphFill}" />
-                        </Grid>
+                            VerticalAlignment="Center"
+                            Opacity="0"
+                            Data="{DynamicResource ListBoxItemCheckCheckGlyph}"
+                            Width="{DynamicResource ListBoxItemCheckBoxGlyphWidth}"
+                            Height="{DynamicResource ListBoxItemCheckBoxGlyphHeight}"
+                            Margin="8,0"
+                            />
                         <ContentPresenter
                             x:Name="ContentPresenter"
                             Grid.Column="1"
@@ -123,75 +209,28 @@
                 </Border>
             </ControlTemplate>
         </Setter>
-
-        <!--  Unchecked Pointerover State  -->
-        <Style Selector="^:pointerover">
-            <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource ListBoxItemCheckPointeroverBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource ListBoxItemCheckPointeroverBackground}" />
-            </Style>
-        </Style>
-
-        <!--  Unchecked Pressed State  -->
-        <Style Selector="^:pressed">
-            <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource ListBoxItemCheckPressedBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource ListBoxItemCheckPressedBackground}" />
-            </Style>
-        </Style>
-
-        <!--  Unchecked Disabled state  -->
         <Style Selector="^:disabled">
-            <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource ListBoxItemCheckDisabledForeground}" />
-            </Style>
-            <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource ListBoxItemCheckDefaultDisabledBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource ListBoxItemCheckDefaultDisabledBackground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ListBoxItemDisabledForeground}" />
+            <Setter Property="Background" Value="{DynamicResource ListBoxItemDisabledBackground}" />
+            <Style Selector="^:selected">
+                <Setter Property="Background"
+                        Value="{DynamicResource ListBoxItemSelectedDisabledBackground}" />
             </Style>
         </Style>
 
-        <Style Selector="^:selected">
-            <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource ListBoxItemCheckCheckedDefaultBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource ListBoxItemCheckCheckedDefaultBackground}" />
-            </Style>
+        <!--  Pointerover State  -->
+        <Style Selector="^:pointerover">
+            <Setter Property="Background" Value="{DynamicResource ListBoxItemPointeroverBackground}" />
+        </Style>
 
-            <Style Selector="^ /template/ PathIcon#CheckGlyph">
-                <Setter Property="Data" Value="{DynamicResource ListBoxItemCheckCheckGlyph}" />
-                <Setter Property="Opacity" Value="1" />
-            </Style>
+        <!--  Pressed State  -->
+        <Style Selector="^:pressed">
+            <Setter Property="Background" Value="{DynamicResource ListBoxItemPressedBackground}" />
+        </Style>
 
-            <!--  Checked Pointerover State  -->
-            <Style Selector="^:pointerover">
-                <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource ListBoxItemCheckCheckedPointeroverBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource ListBoxItemCheckCheckedPointeroverBackground}" />
-                </Style>
-            </Style>
-
-            <!--  Checked Pressed State  -->
-            <Style Selector="^:pressed">
-                <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource ListBoxItemCheckCheckedPressedBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource ListBoxItemCheckCheckedPressedBackground}" />
-                </Style>
-            </Style>
-
-            <!--  Checked Disabled State  -->
-            <Style Selector="^:disabled">
-                <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
-                    <Setter Property="Foreground" Value="{DynamicResource ListBoxItemCheckDisabledForeground}" />
-                </Style>
-                <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource ListBoxItemCheckCheckedDisabledBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource ListBoxItemCheckCheckedDisabledBackground}" />
-                </Style>
-
-                <Style Selector="^ /template/ Path#CheckGlyph">
-                    <Setter Property="Fill" Value="{DynamicResource ListBoxItemCheckGlyphDisabledFill}" />
-                </Style>
-            </Style>
+        <!--  Selected State  -->
+        <Style Selector="^:selected /template/ PathIcon#CheckGlyph">
+            <Setter Property="Opacity" Value="1"></Setter>
         </Style>
     </ControlTheme>
 
diff --git a/src/Ursa/Controls/ComboBox/MultiComboBox.cs b/src/Ursa/Controls/ComboBox/MultiComboBox.cs
index 55115e4..64e237b 100644
--- a/src/Ursa/Controls/ComboBox/MultiComboBox.cs
+++ b/src/Ursa/Controls/ComboBox/MultiComboBox.cs
@@ -1,5 +1,4 @@
 using System.Collections;
-using System.Collections.ObjectModel;
 using System.Collections.Specialized;
 using Avalonia;
 using Avalonia.Collections;
@@ -9,14 +8,19 @@ using Avalonia.Controls.Primitives;
 using Avalonia.Controls.Templates;
 using Avalonia.Input;
 using Avalonia.Interactivity;
+using Avalonia.LogicalTree;
 using Irihi.Avalonia.Shared.Helpers;
 
 namespace Ursa.Controls;
 
 [TemplatePart(PART_BackgroundBorder, typeof(Border))]
+[PseudoClasses(PC_DropDownOpen, PC_Empty)]
 public class MultiComboBox: SelectingItemsControl
 {
     public const string PART_BackgroundBorder = "PART_BackgroundBorder";
+    public const string PC_DropDownOpen = ":dropdownopen";
+    public const string PC_Empty = ":selection-empty";
+    
     private Border? _rootBorder;
     
     private static ITemplate<Panel?> _defaultPanel = new FuncTemplate<Panel?>(() => new VirtualizingStackPanel());
@@ -52,6 +56,33 @@ public class MultiComboBox: SelectingItemsControl
     {
         FocusableProperty.OverrideDefaultValue<MultiComboBox>(true);
         ItemsPanelProperty.OverrideDefaultValue<MultiComboBox>(_defaultPanel);
+        IsDropDownOpenProperty.AffectsPseudoClass<MultiComboBox>(PC_DropDownOpen);
+        SelectedItemsProperty.Changed.AddClassHandler<MultiComboBox, IList?>((box, args) => box.OnSelectedItemsChanged(args));
+    }
+
+    public MultiComboBox()
+    {
+        if (SelectedItems is INotifyCollectionChanged c)
+        {
+            c.CollectionChanged+=OnSelectedItemsCollectionChanged;
+        }
+    }
+
+    private void OnSelectedItemsChanged(AvaloniaPropertyChangedEventArgs<IList?> args)
+    {
+        if (args.OldValue.Value is INotifyCollectionChanged old)
+        {
+            old.CollectionChanged-=OnSelectedItemsCollectionChanged;
+        }
+        if (args.NewValue.Value is INotifyCollectionChanged @new)
+        {
+            @new.CollectionChanged += OnSelectedItemsCollectionChanged;
+        }
+    }
+
+    private void OnSelectedItemsCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
+    {
+        PseudoClasses.Set(PC_Empty, SelectedItems?.Count == 0);
     }
 
     protected override bool NeedsContainerOverride(object? item, int index, out object? recycleKey)
@@ -71,7 +102,7 @@ public class MultiComboBox: SelectingItemsControl
         PointerPressedEvent.RemoveHandler(OnBackgroundPointerPressed, _rootBorder);
         _rootBorder = e.NameScope.Find<Border>(PART_BackgroundBorder);
         PointerPressedEvent.AddHandler(OnBackgroundPointerPressed, _rootBorder);
-        
+        PseudoClasses.Set(PC_Empty, SelectedItems?.Count == 0);
     }
 
     private void OnBackgroundPointerPressed(object sender, PointerPressedEventArgs e)
@@ -105,4 +136,27 @@ public class MultiComboBox: SelectingItemsControl
         }
         
     }
+
+    public void Clear()
+    {
+        this.SelectedItems?.Clear();
+        var containers = Presenter?.Panel?.Children;
+        if(containers is null) return;
+        foreach (var container in containers)
+        {
+            if (container is MultiComboBoxItem t)
+            {
+                t.IsSelected = false;
+            }
+        }
+    }
+
+    protected override void OnUnloaded(RoutedEventArgs e)
+    {
+        base.OnUnloaded(e);
+        if (SelectedItems is INotifyCollectionChanged c)
+        {
+            c.CollectionChanged-=OnSelectedItemsCollectionChanged;
+        }
+    }
 }
\ No newline at end of file