feat: 1. update container state from selection collection change.

2. Add popup slot.
3. fix various binding relative resource issue.
4. update empty pseudo-class handing, simplify watermark visibility.

demo/Ursa.Demo/Pages/MultiComboBoxDemo.axaml

@@ -12,6 +12,12 @@
     x:DataType="vm:MultiComboBoxDemoViewModel"
     mc:Ignorable="d">
     <StackPanel Orientation="Horizontal">
+        <u:MultiComboBox
+            Watermark="Please Select"
+            MaxHeight="200"
+            SelectedItems="{Binding SelectedItems}"
+            ItemsSource="{Binding Items}" >
+        </u:MultiComboBox>
         <u:MultiComboBox
             Name="combo"
             Watermark="Please Select"
@@ -19,8 +25,21 @@
             InnerRightContent="Right"
             Classes="ClearButton"
             MaxHeight="200"
+            SelectedItems="{Binding SelectedItems}"
             ItemsSource="{Binding Items}" >
+            <u:MultiComboBox.PopupInnerTopContent>
+                <StackPanel Margin="0" Orientation="Horizontal">
+                    <Button Theme="{DynamicResource BorderlessButton}" Content="Select All" Command="{Binding SelectAllCommand}"/>
+                    <Button Theme="{DynamicResource BorderlessButton}" Content="Unselect All" Command="{Binding ClearAllCommand}"/>
+                    <Button Theme="{DynamicResource BorderlessButton}" Content="Inverse" Command="{Binding InvertSelectionCommand}"/>
+                </StackPanel>
+            </u:MultiComboBox.PopupInnerTopContent>
+            <u:MultiComboBox.ContextFlyout>
+                <MenuFlyout>
+                    <MenuItem Header="Select All" Command="{Binding SelectAllCommand}"/>
+                </MenuFlyout>
+            </u:MultiComboBox.ContextFlyout>
         </u:MultiComboBox>
-        <ListBox ItemsSource="{Binding #combo.SelectedItems}" />
+        <ListBox ItemsSource="{Binding SelectedItems}" />
     </StackPanel>
 </UserControl>

demo/Ursa.Demo/ViewModels/MultiComboBoxDemoViewModel.cs

@@ -1,12 +1,44 @@
-using System.Collections.ObjectModel;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Windows.Input;
 using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
 
 namespace Ursa.Demo.ViewModels;
 
 public class MultiComboBoxDemoViewModel: ObservableObject
 {
     public ObservableCollection<string> Items { get; set; }
+    
+    public ObservableCollection<string> SelectedItems { get; set; }
 
+    public ICommand SelectAllCommand => new RelayCommand(() =>
+    {
+        SelectedItems.Clear();
+        foreach (var item in Items)
+        {
+            SelectedItems.Add(item);
+        }
+    });
+    
+    public ICommand ClearAllCommand => new RelayCommand(() =>
+    {
+        SelectedItems.Clear();
+    });
+    
+    public ICommand InvertSelectionCommand => new RelayCommand(() =>
+    {
+        var selectedItems = new List<string>(SelectedItems);
+        SelectedItems.Clear();
+        foreach (var item in Items)
+        {
+            if (!selectedItems.Contains(item))
+            {
+                SelectedItems.Add(item);
+            }
+        }
+    });
+    
     public MultiComboBoxDemoViewModel()
     {
         Items = new ObservableCollection<string>()
@@ -47,5 +79,6 @@ public class MultiComboBoxDemoViewModel: ObservableObject
             "Pennsylvania",
             "Rhode Island",
         };
+        SelectedItems = new ObservableCollection<string>();
     }
 }

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

@@ -51,6 +51,7 @@
                                   HorizontalAlignment="Left"
                                   VerticalAlignment="Center"
                                   Foreground="{TemplateBinding Foreground}"
+                                  IsHitTestVisible="False"
                                   IsVisible="False"
                                   Opacity="0.3"
                                   Text="{TemplateBinding Watermark}" />
@@ -104,7 +105,7 @@
                             </Grid>
                         </Border>
                         <Popup
-                            Width="{Binding #PART_RootGrid.Bounds.Width}"
+                            MinWidth="{Binding #PART_RootGrid.Bounds.Width}"
                             MaxHeight="{TemplateBinding MaxDropdownHeight}"
                             IsLightDismissEnabled="True"
                             IsOpen="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsDropDownOpen, Mode=TwoWay}"
@@ -118,16 +119,20 @@
                                 BoxShadow="{DynamicResource ComboBoxPopupBoxShadow}"
                                 ClipToBounds="True"
                                 CornerRadius="6">
-                                <ScrollViewer
+                                <DockPanel LastChildFill="True">
-                                    Grid.IsSharedSizeScope="True"
+                                    <ContentPresenter Content="{TemplateBinding PopupInnerTopContent}" DockPanel.Dock="Top"/>
-                                    HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
+                                    <ContentPresenter Content="{TemplateBinding PopupInnerBottomContent}" DockPanel.Dock="Bottom"/>
-                                    VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
+                                    <ScrollViewer
-                                    <ItemsPresenter
+                                        Grid.IsSharedSizeScope="True"
-                                        Name="PART_ItemsPresenter"
+                                        HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
-                                        Margin="{DynamicResource ComboBoxDropdownContentMargin}"
+                                        VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
-                                        HorizontalAlignment="Stretch"
+                                        <ItemsPresenter
-                                        ItemsPanel="{TemplateBinding ItemsPanel}" />
+                                            Name="PART_ItemsPresenter"
-                                </ScrollViewer>
+                                            Margin="{DynamicResource ComboBoxDropdownContentMargin}"
+                                            HorizontalAlignment="Stretch"
+                                            ItemsPanel="{TemplateBinding ItemsPanel}" />
+                                    </ScrollViewer>
+                                </DockPanel>
                             </Border>
                         </Popup>
                     </Panel>
@@ -143,12 +148,12 @@
 
         <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}}" />
+                <Setter Property="IsVisible" Value="True" />
             </Style>
         </Style>
 
         <Style Selector="^:selection-empty /template/ TextBlock#PlaceholderTextBlock">
-            <Setter Property="IsVisible" Value="{Binding $parent[ComboBox].SelectionBoxItem, Converter={x:Static ObjectConverters.IsNotNull}}" />
+            <Setter Property="IsVisible" Value="True" />
         </Style>
 
         <!--  Pointerover State  -->

src/Ursa/Controls/ComboBox/MultiComboBox.cs

@@ -8,128 +8,159 @@ using Avalonia.Controls.Primitives;
 using Avalonia.Controls.Templates;
 using Avalonia.Input;
 using Avalonia.Interactivity;
-using Irihi.Avalonia.Shared.Helpers;
 using Irihi.Avalonia.Shared.Contracts;
+using Irihi.Avalonia.Shared.Helpers;
 
 namespace Ursa.Controls;
 
 [TemplatePart(PART_BackgroundBorder, typeof(Border))]
 [PseudoClasses(PC_DropDownOpen, PC_Empty)]
-public class MultiComboBox: SelectingItemsControl, IInnerContentControl
+public class MultiComboBox : SelectingItemsControl, IInnerContentControl, IPopupInnerContent
 {
     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 readonly ITemplate<Panel?> _defaultPanel =
-    
+        new FuncTemplate<Panel?>(() => new VirtualizingStackPanel());
-    private static ITemplate<Panel?> _defaultPanel = new FuncTemplate<Panel?>(() => new VirtualizingStackPanel());
 
     public static readonly StyledProperty<bool> IsDropDownOpenProperty =
         ComboBox.IsDropDownOpenProperty.AddOwner<MultiComboBox>();
-    
+
+    public static readonly StyledProperty<double> MaxDropdownHeightProperty =
+        AvaloniaProperty.Register<MultiComboBox, double>(
+            nameof(MaxDropdownHeight));
+
+    public static readonly StyledProperty<double> MaxSelectionBoxHeightProperty =
+        AvaloniaProperty.Register<MultiComboBox, double>(
+            nameof(MaxSelectionBoxHeight));
+
+    public new static readonly StyledProperty<IList?> SelectedItemsProperty =
+        AvaloniaProperty.Register<MultiComboBox, IList?>(
+            nameof(SelectedItems));
+
+    public static readonly StyledProperty<object?> InnerLeftContentProperty =
+        AvaloniaProperty.Register<MultiComboBox, object?>(
+            nameof(InnerLeftContent));
+
+    public static readonly StyledProperty<object?> InnerRightContentProperty =
+        AvaloniaProperty.Register<MultiComboBox, object?>(
+            nameof(InnerRightContent));
+
+
+    public static readonly StyledProperty<IDataTemplate?> SelectedItemTemplateProperty =
+        AvaloniaProperty.Register<MultiComboBox, IDataTemplate?>(
+            nameof(SelectedItemTemplate));
+
+    public static readonly StyledProperty<string?> WatermarkProperty =
+        TextBox.WatermarkProperty.AddOwner<MultiComboBox>();
+
+    public static readonly StyledProperty<object?> PopupInnerTopContentProperty =
+        AvaloniaProperty.Register<MultiComboBox, object?>(
+            nameof(PopupInnerTopContent));
+
+    public static readonly StyledProperty<object?> PopupInnerBottomContentProperty =
+        AvaloniaProperty.Register<MultiComboBox, object?>(
+            nameof(PopupInnerBottomContent));
+
+    private Border? _rootBorder;
+
+    static MultiComboBox()
+    {
+        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()
+    {
+        SelectedItems = new AvaloniaList<object>();
+        if (SelectedItems is INotifyCollectionChanged c) c.CollectionChanged += OnSelectedItemsCollectionChanged;
+    }
+
     public bool IsDropDownOpen
     {
         get => GetValue(IsDropDownOpenProperty);
         set => SetValue(IsDropDownOpenProperty, value);
     }
 
-    public static readonly StyledProperty<double> MaxDropdownHeightProperty = AvaloniaProperty.Register<MultiComboBox, double>(
-        nameof(MaxDropdownHeight));
-
     public double MaxDropdownHeight
     {
         get => GetValue(MaxDropdownHeightProperty);
         set => SetValue(MaxDropdownHeightProperty, value);
     }
 
-    public static readonly StyledProperty<double> MaxSelectionBoxHeightProperty = AvaloniaProperty.Register<MultiComboBox, double>(
-        nameof(MaxSelectionBoxHeight));
-
     public double MaxSelectionBoxHeight
     {
         get => GetValue(MaxSelectionBoxHeightProperty);
         set => SetValue(MaxSelectionBoxHeightProperty, value);
     }
 
-    public new static readonly StyledProperty<IList?> SelectedItemsProperty = AvaloniaProperty.Register<MultiComboBox, IList?>(
-        nameof(SelectedItems));
-
     public new IList? SelectedItems
     {
         get => GetValue(SelectedItemsProperty);
         set => SetValue(SelectedItemsProperty, value);
     }
 
-    public static readonly StyledProperty<object?> InnerLeftContentProperty = AvaloniaProperty.Register<MultiComboBox, object?>(
-        nameof(InnerLeftContent));
-
-    public object? InnerLeftContent
-    {
-        get => GetValue(InnerLeftContentProperty);
-        set => SetValue(InnerLeftContentProperty, value);
-    }
-
-    public static readonly StyledProperty<object?> InnerRightContentProperty = AvaloniaProperty.Register<MultiComboBox, object?>(
-        nameof(InnerRightContent));
-
-    public object? InnerRightContent
-    {
-        get => GetValue(InnerRightContentProperty);
-        set => SetValue(InnerRightContentProperty, value);
-    }
-
-    public static readonly StyledProperty<IDataTemplate?> SelectedItemTemplateProperty = AvaloniaProperty.Register<MultiComboBox, IDataTemplate?>(
-        nameof(SelectedItemTemplate));
-
     public IDataTemplate? SelectedItemTemplate
     {
         get => GetValue(SelectedItemTemplateProperty);
         set => SetValue(SelectedItemTemplateProperty, value);
     }
 
-    public static readonly StyledProperty<string?> WatermarkProperty =
-        TextBox.WatermarkProperty.AddOwner<MultiComboBox>();
-
     public string? Watermark
     {
         get => GetValue(WatermarkProperty);
         set => SetValue(WatermarkProperty, value);
     }
 
-    static MultiComboBox()
+    public object? InnerLeftContent
     {
-        FocusableProperty.OverrideDefaultValue<MultiComboBox>(true);
+        get => GetValue(InnerLeftContentProperty);
-        ItemsPanelProperty.OverrideDefaultValue<MultiComboBox>(_defaultPanel);
+        set => SetValue(InnerLeftContentProperty, value);
-        IsDropDownOpenProperty.AffectsPseudoClass<MultiComboBox>(PC_DropDownOpen);
-        SelectedItemsProperty.Changed.AddClassHandler<MultiComboBox, IList?>((box, args) => box.OnSelectedItemsChanged(args));
     }
 
-    public MultiComboBox()
+    public object? InnerRightContent
     {
-        SelectedItems = new AvaloniaList<object>();
+        get => GetValue(InnerRightContentProperty);
-        if (SelectedItems is INotifyCollectionChanged c)
+        set => SetValue(InnerRightContentProperty, value);
-        {
+    }
-            c.CollectionChanged+= OnSelectedItemsCollectionChanged;
+
-        }
+    public object? PopupInnerTopContent
-        
+    {
+        get => GetValue(PopupInnerTopContentProperty);
+        set => SetValue(PopupInnerTopContentProperty, value);
+    }
+
+    public object? PopupInnerBottomContent
+    {
+        get => GetValue(PopupInnerBottomContentProperty);
+        set => SetValue(PopupInnerBottomContentProperty, value);
     }
 
     private void OnSelectedItemsChanged(AvaloniaPropertyChangedEventArgs<IList?> args)
     {
         if (args.OldValue.Value is INotifyCollectionChanged old)
-        {
+            old.CollectionChanged -= OnSelectedItemsCollectionChanged;
-            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);
+        PseudoClasses.Set(PC_Empty, SelectedItems?.Count is null or 0);
+        //return;
+        var containers = Presenter?.Panel?.Children;
+        if (containers is null) return;
+        foreach (var container in containers)
+        {
+            if (container is MultiComboBoxItem i)
+            {
+                i.UpdateSelection();
+            }
+        }
     }
 
     protected override bool NeedsContainerOverride(object? item, int index, out object? recycleKey)
@@ -159,10 +190,7 @@ public class MultiComboBox: SelectingItemsControl, IInnerContentControl
 
     internal void ItemFocused(MultiComboBoxItem dropDownItem)
     {
-        if (IsDropDownOpen && dropDownItem.IsFocused && dropDownItem.IsArrangeValid)
+        if (IsDropDownOpen && dropDownItem.IsFocused && dropDownItem.IsArrangeValid) dropDownItem.BringIntoView();
-        {
-            dropDownItem.BringIntoView();
-        }
     }
 
     public void Remove(object? o)
@@ -170,40 +198,29 @@ public class MultiComboBox: SelectingItemsControl, IInnerContentControl
         if (o is StyledElement s)
         {
             var data = s.DataContext;
-            this.SelectedItems?.Remove(data);
+            SelectedItems?.Remove(data);
-            var item = this.Items.FirstOrDefault(a => ReferenceEquals(a, data));
+            var item = Items.FirstOrDefault(a => ReferenceEquals(a, data));
             if (item is not null)
             {
                 var container = ContainerFromItem(item);
-                if (container is MultiComboBoxItem t)
+                if (container is MultiComboBoxItem t) t.IsSelected = false;
-                {
-                    t.IsSelected = false;
-                }
             }
         }
-        
     }
 
     public void Clear()
     {
-        // this.SelectedItems?.Clear();
+        this.SelectedItems?.Clear();
         var containers = Presenter?.Panel?.Children;
-        if(containers is null) return;
+        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)
+        if (SelectedItems is INotifyCollectionChanged c) c.CollectionChanged -= OnSelectedItemsCollectionChanged;
-        {
-            c.CollectionChanged-=OnSelectedItemsCollectionChanged;
-        }
     }
 }

src/Ursa/Controls/ComboBox/MultiComboBoxItem.cs

@@ -100,6 +100,11 @@ public class MultiComboBoxItem: ContentControl
     protected override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e)
     {
         base.OnAttachedToVisualTree(e);
+        UpdateSelection();
+    }
+    
+    internal void UpdateSelection()
+    {
         _updateInternal = true;
         if (_parent?.ItemsPanelRoot is VirtualizingPanel)
         {