Merge pull request #187 from irihitech/combo

Multi ComboBox

demo/Ursa.Demo/Pages/MultiComboBoxDemo.axaml

@@ -0,0 +1,23 @@
+<UserControl
+    x:Class="Ursa.Demo.Pages.MultiComboBoxDemo"
+    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"
+    xmlns:u="https://irihi.tech/ursa"
+    xmlns:vm="using:Ursa.Demo.ViewModels"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    x:CompileBindings="True"
+    x:DataType="vm:MultiComboBoxDemoViewModel"
+    mc:Ignorable="d">
+    <StackPanel Orientation="Horizontal">
+        <u:MultiComboBox
+            Name="combo"
+            InnerLeftContent="Left"
+            InnerRightContent="Right"
+            Classes="ClearButton"
+            ItemsSource="{Binding Items}" />
+        <ListBox ItemsSource="{Binding #combo.SelectedItems}" />
+    </StackPanel>
+</UserControl>

demo/Ursa.Demo/Pages/MultiComboBoxDemo.axaml.cs

@@ -0,0 +1,13 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Ursa.Demo.Pages;
+
+public partial class MultiComboBoxDemo : UserControl
+{
+    public MultiComboBoxDemo()
+    {
+        InitializeComponent();
+    }
+}

demo/Ursa.Demo/ViewModels/MainViewViewModel.cs

@@ -43,6 +43,7 @@ public class MainViewViewModel : ViewModelBase
             MenuKeys.MenuKeyKeyGestureInput => new KeyGestureInputDemoViewModel(),
             MenuKeys.MenuKeyLoading => new LoadingDemoViewModel(),
             MenuKeys.MenuKeyMessageBox => new MessageBoxDemoViewModel(),
+            MenuKeys.MenuKeyMultiComboBox => new MultiComboBoxDemoViewModel(),
             MenuKeys.MenuKeyNavMenu => new NavMenuDemoViewModel(),
             MenuKeys.MenuKeyNumberDisplayer => new NumberDisplayerDemoViewModel(),
             MenuKeys.MenuKeyNumericUpDown => new NumericUpDownDemoViewModel(),

demo/Ursa.Demo/ViewModels/MenuViewModel.cs

@@ -30,6 +30,7 @@ public class MenuViewModel: ViewModelBase
             new() { MenuHeader = "KeyGestureInput", Key = MenuKeys.MenuKeyKeyGestureInput },
             new() { MenuHeader = "Loading", Key = MenuKeys.MenuKeyLoading },
             new() { MenuHeader = "Message Box", Key = MenuKeys.MenuKeyMessageBox },
+            new() { MenuHeader = "MultiComboBox", Key = MenuKeys.MenuKeyMultiComboBox, Status = "New" },
             new() { MenuHeader = "Nav Menu", Key = MenuKeys.MenuKeyNavMenu, Status = "Updated" },
             // new() { MenuHeader = "Number Displayer", Key = MenuKeys.MenuKeyNumberDisplayer, Status = "New" }, 
             new() { MenuHeader = "Numeric UpDown", Key = MenuKeys.MenuKeyNumericUpDown },
@@ -70,6 +71,7 @@ public static class MenuKeys
     public const string MenuKeyKeyGestureInput = "KeyGestureInput";
     public const string MenuKeyLoading = "Loading";
     public const string MenuKeyMessageBox = "MessageBox";
+    public const string MenuKeyMultiComboBox = "MultiComboBox";
     public const string MenuKeyNavMenu = "NavMenu";
     public const string MenuKeyNumberDisplayer = "NumberDisplayer";
     public const string MenuKeyNumericUpDown = "NumericUpDown";

demo/Ursa.Demo/ViewModels/MultiComboBoxDemoViewModel.cs

@@ -0,0 +1,51 @@
+using System.Collections.ObjectModel;
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Ursa.Demo.ViewModels;
+
+public class MultiComboBoxDemoViewModel: ObservableObject
+{
+    public ObservableCollection<string> Items { get; set; }
+
+    public MultiComboBoxDemoViewModel()
+    {
+        Items = new ObservableCollection<string>()
+        {
+            "Item 1",
+            "Item 2",
+            "Item 3",
+            "Item 4",
+            "Item 5",
+            "Item 6",
+            "Item 7",
+            "Item 8",
+            "Illinois",
+            "Indiana",
+            "Iowa",
+            "Kansas",
+            "Kentucky",
+            "Louisiana",
+            "Maine",
+            "Maryland",
+            "Massachusetts",
+            "Michigan",
+            "Minnesota",
+            "Mississippi",
+            "Missouri",
+            "Montana",
+            "Nebraska",
+            "Nevada",
+            "New Hampshire",
+            "New Jersey",
+            "New Mexico",
+            "New York",
+            "North Carolina",
+            "North Dakota",
+            "Ohio",
+            "Oklahoma",
+            "Oregon",
+            "Pennsylvania",
+            "Rhode Island",
+        };
+    }
+}

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

@@ -0,0 +1,270 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:u="https://irihi.tech/ursa">
+    <!--  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="MaxSelectionBoxHeight" Value="270"></Setter>
+        <Setter Property="MinHeight" Value="32" />
+        <Setter Property="Padding" Value="12 4" />
+        <Setter Property="BorderThickness" Value="1" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="u:MultiComboBox">
+                <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, *, Auto, Auto, 32">
+                                <Border
+                                    Name="{x:Static u:MultiComboBox.PART_BackgroundBorder}"
+                                    Grid.Column="0"
+                                    Grid.ColumnSpan="5"
+                                    Background="Transparent" />
+                                <ContentPresenter
+                                    Grid.Column="0"
+                                    Margin="8,0"
+                                    IsHitTestVisible="False"
+                                    VerticalAlignment="Center"
+                                    Content="{TemplateBinding InnerLeftContent}"
+                                    Foreground="{DynamicResource TextBoxInnerForeground}"
+                                    IsVisible="{TemplateBinding InnerLeftContent,
+                                                                Converter={x:Static ObjectConverters.IsNotNull}}" />
+                                <ScrollViewer
+                                    Grid.Column="1"
+                                    Grid.ColumnSpan="2"
+                                    MaxHeight="{TemplateBinding MaxSelectionBoxHeight}"
+                                    Background="{x:Null}"
+                                    HorizontalScrollBarVisibility="Disabled">
+                                    <u:MultiComboBoxSelectedItemList
+                                        VerticalAlignment="Center"
+                                        ItemsSource="{TemplateBinding SelectedItems}"
+                                        RemoveCommand="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Remove}">
+                                        <ItemsControl.ItemsPanel>
+                                            <ItemsPanelTemplate>
+                                                <WrapPanel Orientation="Horizontal" />
+                                            </ItemsPanelTemplate>
+                                        </ItemsControl.ItemsPanel>
+                                    </u:MultiComboBoxSelectedItemList>
+                                </ScrollViewer>
+                                <Button
+                                    Name="ClearButton"
+                                    Grid.Column="2"
+                                    Command="{Binding $parent[u:MultiComboBox].Clear}"
+                                    Content="{DynamicResource IconButtonClearData}"
+                                    IsVisible="False"
+                                    Theme="{DynamicResource InnerIconButton}" />
+                                <ContentPresenter
+                                    Grid.Column="3"
+                                    Margin="8,0"
+                                    VerticalAlignment="Center"
+                                    IsHitTestVisible="False"
+                                    Content="{TemplateBinding InnerRightContent}"
+                                    Foreground="{DynamicResource TextBoxInnerForeground}"
+                                    IsVisible="{TemplateBinding InnerRightContent,
+                                                                Converter={x:Static ObjectConverters.IsNotNull}}" />
+                                <PathIcon
+                                    x:Name="DropDownGlyph"
+                                    Grid.Column="4"
+                                    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
+                                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">
+        <Setter Property="Padding" Value="8,0,0,0" />
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <Setter Property="VerticalAlignment" Value="Top" />
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="HorizontalContentAlignment" Value="Left" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="FontSize" Value="{DynamicResource ListBoxItemCheckFontSize}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource ListBoxItemCheckBoxCornerRadius}" />
+        <Setter Property="MinHeight" Value="32" />
+        <Setter Property="Foreground" Value="{DynamicResource ListBoxItemCheckForeground}" />
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ListBoxItemCheckDefaultBorderBrush}" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="u:MultiComboBoxItem">
+                <Border
+                    x:Name="RootBorder"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <Grid x:Name="RootGrid" ColumnDefinitions="Auto, *">
+                        <PathIcon
+                            Name="CheckGlyph"
+                            Grid.Column="0"
+                            Width="{DynamicResource ListBoxItemCheckBoxGlyphWidth}"
+                            Height="{DynamicResource ListBoxItemCheckBoxGlyphHeight}"
+                            Margin="8,0"
+                            VerticalAlignment="Center"
+                            Data="{DynamicResource ListBoxItemCheckCheckGlyph}"
+                            Opacity="0" />
+                        <ContentPresenter
+                            x:Name="ContentPresenter"
+                            Grid.Column="1"
+                            Margin="{TemplateBinding Padding}"
+                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalAlignment="Center"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                            IsVisible="{TemplateBinding Content,
+                                                        Converter={x:Static ObjectConverters.IsNotNull}}"
+                            RecognizesAccessKey="True"
+                            TextWrapping="Wrap" />
+                    </Grid>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:disabled">
+            <Setter Property="Foreground" Value="{DynamicResource ListBoxItemDisabledForeground}" />
+            <Setter Property="Background" Value="{DynamicResource ListBoxItemDisabledBackground}" />
+            <Style Selector="^:selected">
+                <Setter Property="Background" Value="{DynamicResource ListBoxItemSelectedDisabledBackground}" />
+            </Style>
+        </Style>
+
+        <!--  Pointerover State  -->
+        <Style Selector="^:pointerover">
+            <Setter Property="Background" Value="{DynamicResource ListBoxItemPointeroverBackground}" />
+        </Style>
+
+        <!--  Pressed State  -->
+        <Style Selector="^:pressed">
+            <Setter Property="Background" Value="{DynamicResource ListBoxItemPressedBackground}" />
+        </Style>
+
+        <!--  Selected State  -->
+        <Style Selector="^:selected /template/ PathIcon#CheckGlyph">
+            <Setter Property="Opacity" Value="1" />
+        </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.Themes.Semi/Controls/_index.axaml

@@ -20,6 +20,7 @@
         <ResourceInclude Source="KeyGestureInput.axaml" />
         <ResourceInclude Source="Loading.axaml" />
         <ResourceInclude Source="MessageBox.axaml" />
+        <ResourceInclude Source="MultiComboBox.axaml" />
         <ResourceInclude Source="NavMenu.axaml" />
         <ResourceInclude Source="NumericUpDown.axaml" />
         <ResourceInclude Source="NumPad.axaml" />

src/Ursa/Controls/ComboBox/MultiComboBox.cs

@@ -0,0 +1,190 @@
+using System.Collections;
+using System.Collections.Specialized;
+using Avalonia;
+using Avalonia.Collections;
+using Avalonia.Controls;
+using Avalonia.Controls.Metadata;
+using Avalonia.Controls.Primitives;
+using Avalonia.Controls.Templates;
+using Avalonia.Input;
+using Avalonia.Interactivity;
+using Avalonia.LogicalTree;
+using Irihi.Avalonia.Shared.Helpers;
+using Irihi.Avalonia.Shared.Contracts;
+
+namespace Ursa.Controls;
+
+[TemplatePart(PART_BackgroundBorder, typeof(Border))]
+[PseudoClasses(PC_DropDownOpen, PC_Empty)]
+public class MultiComboBox: SelectingItemsControl, IInnerContentControl
+{
+    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());
+
+    public static readonly StyledProperty<bool> IsDropDownOpenProperty =
+        ComboBox.IsDropDownOpenProperty.AddOwner<MultiComboBox>();
+    
+    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), new AvaloniaList<object>());
+
+    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);
+    }
+    
+    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()
+    {
+        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)
+    {
+        recycleKey = item;
+        return item is not MultiComboBoxItem;
+    }
+
+    protected override Control CreateContainerForItemOverride(object? item, int index, object? recycleKey)
+    {
+        return new MultiComboBoxItem();
+    }
+
+    protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
+    {
+        base.OnApplyTemplate(e);
+        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)
+    {
+        SetCurrentValue(IsDropDownOpenProperty, !IsDropDownOpen);
+    }
+
+    internal void ItemFocused(MultiComboBoxItem dropDownItem)
+    {
+        if (IsDropDownOpen && dropDownItem.IsFocused && dropDownItem.IsArrangeValid)
+        {
+            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;
+                }
+            }
+        }
+        
+    }
+
+    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;
+        }
+    }
+}

src/Ursa/Controls/ComboBox/MultiComboBoxItem.cs

@@ -0,0 +1,97 @@
+using System.Windows.Input;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Mixins;
+using Avalonia.Input;
+using Avalonia.LogicalTree;
+using Irihi.Avalonia.Shared.Helpers;
+
+namespace Ursa.Controls;
+
+public class MultiComboBoxItem: ContentControl
+{
+    private MultiComboBox? _parent;
+    private static readonly Point s_invalidPoint = new (double.NaN, double.NaN);
+    private Point _pointerDownPoint = s_invalidPoint;
+    
+    public static readonly StyledProperty<bool> IsSelectedProperty = AvaloniaProperty.Register<MultiComboBoxItem, bool>(
+        nameof(IsSelected));
+
+    public bool IsSelected
+    {
+        get => GetValue(IsSelectedProperty);
+        set => SetValue(IsSelectedProperty, value);
+    }
+    
+    static MultiComboBoxItem()
+    {
+        IsSelectedProperty.AffectsPseudoClass<MultiComboBoxItem>(":selected");
+        PressedMixin.Attach<MultiComboBoxItem>();
+        FocusableProperty.OverrideDefaultValue<MultiComboBoxItem>(true);
+        IsSelectedProperty.Changed.AddClassHandler<MultiComboBoxItem, bool>((item, args) =>
+            item.OnSelectionChanged(args));
+    }
+
+    private void OnSelectionChanged(AvaloniaPropertyChangedEventArgs<bool> args)
+    {
+        var parent = this.FindLogicalAncestorOfType<MultiComboBox>();
+        if (args.NewValue.Value)
+        {
+            parent?.SelectedItems?.Add(this.DataContext);
+        }
+        else
+        {
+            parent?.SelectedItems?.Remove(this.DataContext);
+        }
+    }
+
+    protected override void OnAttachedToLogicalTree(LogicalTreeAttachmentEventArgs e)
+    {
+        base.OnAttachedToLogicalTree(e);
+        _parent = this.FindLogicalAncestorOfType<MultiComboBox>();
+        if(this.IsSelected)
+            _parent?.SelectedItems?.Add(this.DataContext);
+    }
+
+    protected override void OnPointerPressed(PointerPressedEventArgs e)
+    {
+        base.OnPointerPressed(e);
+        _pointerDownPoint = e.GetPosition(this);
+        if (e.Handled)
+        {
+            return;
+        }
+        if (e.GetCurrentPoint(this).Properties.IsLeftButtonPressed)
+        {
+            var p = e.GetCurrentPoint(this);
+            if (p.Properties.PointerUpdateKind is PointerUpdateKind.LeftButtonPressed
+                or PointerUpdateKind.RightButtonPressed)
+            {
+                if (p.Pointer.Type == PointerType.Mouse)
+                {
+                    this.IsSelected = !this.IsSelected;
+                    e.Handled = true;
+                }
+                else
+                {
+                    _pointerDownPoint = p.Position;
+                }
+            }
+        }
+    }
+
+    protected override void OnPointerReleased(PointerReleasedEventArgs e)
+    {
+        base.OnPointerReleased(e);
+        if (!e.Handled && !double.IsNaN(_pointerDownPoint.X) &&
+            e.InitialPressMouseButton is MouseButton.Left or MouseButton.Right)
+        {
+            var point = e.GetCurrentPoint(this);
+            if (new Rect(Bounds.Size).ContainsExclusive(point.Position))
+            {
+                this.IsSelected = !this.IsSelected;
+                e.Handled = true;
+            }
+        }
+    }
+}

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;
+        }
+    }
+}