feat: add remove command support.

src/Ursa.Themes.Semi/Controls/MultiComboBox.axaml

@@ -5,27 +5,59 @@
     <!--  Add Resources Here  -->
     <ControlTheme x:Key="{x:Type u:MultiComboBox}" TargetType="u:MultiComboBox">
         <Setter Property="Focusable" Value="True" />
+        <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="Template">
             <ControlTemplate TargetType="u:MultiComboBox">
                 <Panel>
-                    <ToggleButton Name="button" IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsDropDownOpen, Mode=TwoWay}">
-                        <ItemsControl ItemsSource="{TemplateBinding SelectedItems}">
-                            <ItemsControl.ItemsPanel>
-                                <ItemsPanelTemplate>
-                                    <WrapPanel Orientation="Horizontal" />
-                                </ItemsPanelTemplate>
-                            </ItemsControl.ItemsPanel>
-                        </ItemsControl>
-                    </ToggleButton>
+                    <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}"
-                        IsOpen="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsDropDownOpen, Mode=TwoWay}"
                         IsLightDismissEnabled="True"
-                        PlacementTarget="button">
+                        IsOpen="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsDropDownOpen, Mode=TwoWay}"
+                        PlacementTarget="PART_RootGrid">
                         <Border Theme="{DynamicResource CardBorder}">
                             <ScrollViewer>
-                                <ItemsPresenter ItemsPanel="{TemplateBinding ItemsPanel}" />
+                                <ItemsPresenter HorizontalAlignment="Stretch" ItemsPanel="{TemplateBinding ItemsPanel}" />
                             </ScrollViewer>
                         </Border>
                     </Popup>
@@ -36,7 +68,7 @@
 
     <ControlTheme x:Key="{x:Type u:MultiComboBoxItem}" TargetType="u:MultiComboBoxItem">
         <Setter Property="Padding" Value="8,0,0,0" />
-        <Setter Property="HorizontalAlignment" Value="Left" />
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
         <Setter Property="VerticalAlignment" Value="Top" />
         <Setter Property="Cursor" Value="Hand" />
         <Setter Property="HorizontalContentAlignment" Value="Left" />
@@ -45,7 +77,7 @@
         <Setter Property="CornerRadius" Value="{DynamicResource ListBoxItemCheckBoxCornerRadius}" />
         <Setter Property="MinHeight" Value="32" />
         <Setter Property="Foreground" Value="{DynamicResource ListBoxItemCheckForeground}" />
-        <Setter Property="Background" Value="{DynamicResource ListBoxItemCheckDefaultBackground}" />
+        <Setter Property="Background" Value="Transparent" />
         <Setter Property="BorderBrush" Value="{DynamicResource ListBoxItemCheckDefaultBorderBrush}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="u:MultiComboBoxItem">
@@ -83,7 +115,8 @@
                             VerticalAlignment="Center"
                             Content="{TemplateBinding Content}"
                             ContentTemplate="{TemplateBinding ContentTemplate}"
-                            IsVisible="{TemplateBinding Content,Converter={x:Static ObjectConverters.IsNotNull}}"
+                            IsVisible="{TemplateBinding Content,
+                                                        Converter={x:Static ObjectConverters.IsNotNull}}"
                             RecognizesAccessKey="True"
                             TextWrapping="Wrap" />
                     </Grid>
@@ -132,10 +165,8 @@
             <!--  Checked Pointerover State  -->
             <Style Selector="^:pointerover">
                 <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush"
-                            Value="{DynamicResource ListBoxItemCheckCheckedPointeroverBorderBrush}" />
-                    <Setter Property="Background"
-                            Value="{DynamicResource ListBoxItemCheckCheckedPointeroverBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource ListBoxItemCheckCheckedPointeroverBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource ListBoxItemCheckCheckedPointeroverBackground}" />
                 </Style>
             </Style>
 
@@ -163,4 +194,12 @@
             </Style>
         </Style>
     </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type u:MultiComboBoxSelectedItemList}" TargetType="u:MultiComboBoxSelectedItemList">
+        <Setter Property="Template">
+            <ControlTemplate TargetType="u:MultiComboBoxSelectedItemList">
+                <ItemsPresenter ItemsPanel="{TemplateBinding ItemsPanel}" />
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
 </ResourceDictionary>

src/Ursa.Themes.Semi/Controls/TagInput.axaml

@@ -42,10 +42,10 @@
                 </Border>
             </ControlTemplate>
         </Setter>
-        <Style Selector="^:pointerover /template/ Border#PART_RootBorder">
+        <Style Selector="^:pointerover /template/ Border#PART_BackgroundBorder">
             <Setter Property="Border.Background" Value="{DynamicResource TextBoxPointeroverBackground}" />
         </Style>
-        <Style Selector="^:focus-within /template/ Border#PART_RootBorder">
+        <Style Selector="^:focus-within /template/ Border#PART_BackgroundBorder">
             <Setter Property="Border.BorderBrush" Value="{DynamicResource TextBoxFocusBorderBrush}" />
         </Style>
     </ControlTheme>

src/Ursa/Controls/ComboBox/MultiComboBox.cs

@@ -7,13 +7,18 @@ using Avalonia.Controls;
 using Avalonia.Controls.Metadata;
 using Avalonia.Controls.Primitives;
 using Avalonia.Controls.Templates;
+using Avalonia.Input;
 using Avalonia.Interactivity;
 using Irihi.Avalonia.Shared.Helpers;
 
 namespace Ursa.Controls;
 
+[TemplatePart(PART_BackgroundBorder, typeof(Border))]
 public class MultiComboBox: SelectingItemsControl
 {
+    public const string PART_BackgroundBorder = "PART_BackgroundBorder";
+    private Border? _rootBorder;
+    
     private static ITemplate<Panel?> _defaultPanel = new FuncTemplate<Panel?>(() => new VirtualizingStackPanel());
 
     public static readonly StyledProperty<bool> IsDropDownOpenProperty =
@@ -60,9 +65,18 @@ public class MultiComboBox: SelectingItemsControl
         return new MultiComboBoxItem();
     }
 
-    protected override void PrepareContainerForItemOverride(Control container, object? item, int index)
+    protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
     {
-        base.PrepareContainerForItemOverride(container, item, index);
+        base.OnApplyTemplate(e);
+        PointerPressedEvent.RemoveHandler(OnBackgroundPointerPressed, _rootBorder);
+        _rootBorder = e.NameScope.Find<Border>(PART_BackgroundBorder);
+        PointerPressedEvent.AddHandler(OnBackgroundPointerPressed, _rootBorder);
+        
+    }
+
+    private void OnBackgroundPointerPressed(object sender, PointerPressedEventArgs e)
+    {
+        SetCurrentValue(IsDropDownOpenProperty, !IsDropDownOpen);
     }
 
     internal void ItemFocused(MultiComboBoxItem dropDownItem)
@@ -72,4 +86,23 @@ public class MultiComboBox: SelectingItemsControl
             dropDownItem.BringIntoView();
         }
     }
+
+    public void Remove(object? o)
+    {
+        if (o is StyledElement s)
+        {
+            var data = s.DataContext;
+            this.SelectedItems?.Remove(data);
+            var item = this.Items.FirstOrDefault(a => ReferenceEquals(a, data));
+            if (item is not null)
+            {
+                var container = ContainerFromItem(item);
+                if (container is MultiComboBoxItem t)
+                {
+                    t.IsSelected = false;
+                }
+            }
+        }
+        
+    }
 }

src/Ursa/Controls/ComboBox/MultiComboBoxItem.cs

@@ -1,4 +1,5 @@
-using Avalonia;
+using System.Windows.Input;
+using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Mixins;
 using Avalonia.Input;

src/Ursa/Controls/ComboBox/MultiComboBoxSelectedItemList.cs

@@ -0,0 +1,36 @@
+using System.Windows.Input;
+using Avalonia;
+using Avalonia.Controls;
+
+namespace Ursa.Controls;
+
+public class MultiComboBoxSelectedItemList: ItemsControl
+{
+    public static readonly StyledProperty<ICommand?> RemoveCommandProperty = AvaloniaProperty.Register<MultiComboBoxSelectedItemList, ICommand?>(
+        nameof(RemoveCommand));
+
+    public ICommand? RemoveCommand
+    {
+        get => GetValue(RemoveCommandProperty);
+        set => SetValue(RemoveCommandProperty, value);
+    }
+    
+    protected override bool NeedsContainerOverride(object? item, int index, out object? recycleKey)
+    {
+        return NeedsContainer<ClosableTag>(item, out recycleKey);
+    }
+
+    protected override Control CreateContainerForItemOverride(object? item, int index, object? recycleKey)
+    {
+        return new ClosableTag();
+    }
+
+    protected override void PrepareContainerForItemOverride(Control container, object? item, int index)
+    {
+        base.PrepareContainerForItemOverride(container, item, index);
+        if (container is ClosableTag tag)
+        {
+            tag.Command = RemoveCommand;
+        }
+    }
+}