feat: simplify container generation, and add vertical demo.

demo/Ursa.Demo/Pages/ToolBarDemo.axaml

@@ -1,24 +1,43 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<UserControl
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    x:Class="Ursa.Demo.Pages.ToolBarDemo"
-             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns="https://github.com/avaloniaui"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:u="https://irihi.tech/ursa"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             xmlns:vm="using:Ursa.Demo.ViewModels"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             xmlns:template="using:Ursa.Demo.Converters"
+    xmlns:template="using:Ursa.Demo.Converters"
-             x:DataType="vm:ToolBarDemoViewModel"
+    xmlns:u="https://irihi.tech/ursa"
-             x:CompileBindings="True"
+    xmlns:vm="using:Ursa.Demo.ViewModels"
-             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+    d:DesignHeight="450"
-             x:Class="Ursa.Demo.Pages.ToolBarDemo">
+    d:DesignWidth="800"
-    <StackPanel>
+    x:CompileBindings="True"
-        <u:ToolBar HorizontalAlignment="Left" Header="Hello World">
+    x:DataType="vm:ToolBarDemoViewModel"
-            <Button Content="Button 1" />
+    mc:Ignorable="d">
-            <Button Content="Button 2" u:ToolBar.OverflowMode="AsNeeded" />
+    <DockPanel>
-            <Button Content="Button 3" u:ToolBar.OverflowMode="Always" />
+        <u:ToolBar
+            HorizontalAlignment="Left"
+            DockPanel.Dock="Top"
+            Header="Hello World">
+            <Button Content="Button 1" u:ToolBar.OverflowMode="Never" />
+            <Button u:ToolBar.OverflowMode="AsNeeded" Content="Button 2" />
+            <Button u:ToolBar.OverflowMode="AsNeeded" Content="Button 3" />
         </u:ToolBar>
-        <u:ToolBar ItemsSource="{Binding Items}" HorizontalAlignment="Left">
+        <u:ToolBar
+            HorizontalAlignment="Left"
+            DockPanel.Dock="Top"
+            ItemsSource="{Binding Items}">
             <u:ToolBar.ItemTemplate>
-                <template:ToolBarItemTemplateSelector/>
+                <template:ToolBarItemTemplateSelector />
             </u:ToolBar.ItemTemplate>
         </u:ToolBar>
-    </StackPanel>
+        <u:ToolBar
+            HorizontalAlignment="Left"
+            VerticalAlignment="Top"
+            DockPanel.Dock="Top"
+            ItemsSource="{Binding Items}"
+            Orientation="Vertical">
+            <u:ToolBar.ItemTemplate>
+                <template:ToolBarItemTemplateSelector />
+            </u:ToolBar.ItemTemplate>
+        </u:ToolBar>
+    </DockPanel>
 </UserControl>

demo/Ursa.Demo/ViewModels/ToolBarDemoViewModel.cs

@@ -15,7 +15,14 @@ public partial class ToolBarDemoViewModel: ObservableObject
         {
             new ToolBarButtonItemViewModel() { Content = "New", OverflowMode = OverflowMode.AsNeeded},
             new ToolBarButtonItemViewModel() { Content = "Open" },
-            new ToolBarButtonItemViewModel() { Content = "Save" },
+            new ToolBarButtonItemViewModel() { Content = "Save1" },
+            new ToolBarButtonItemViewModel() { Content = "Save2" },
+            new ToolBarButtonItemViewModel() { Content = "Save3" },
+            new ToolBarButtonItemViewModel() { Content = "Save4" },
+            new ToolBarButtonItemViewModel() { Content = "Save5" },
+            new ToolBarButtonItemViewModel() { Content = "Save6" },
+            new ToolBarButtonItemViewModel() { Content = "Save7" },
+            new ToolBarButtonItemViewModel() { Content = "Save8" },
             new ToolBarCheckBoxItemViweModel() { Content = "Bold" },
             new ToolBarCheckBoxItemViweModel() { Content = "Italic", OverflowMode = OverflowMode.Never},
             new ToolBarComboBoxItemViewModel() { Content = "Font Size", Items = new (){ "10", "12", "14"  } }

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

@@ -3,6 +3,28 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:u="https://irihi.tech/ursa">
     <!--  Add Resources Here  -->
+    <ControlTheme x:Key="ToolBarExpandToggleButton" TargetType="ToggleButton">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <ContentPresenter
+                    x:Name="PART_ContentPresenter"
+                    Padding="{TemplateBinding Padding}"
+                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    Content="{TemplateBinding Content}"
+                    ContentTemplate="{TemplateBinding ContentTemplate}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    RecognizesAccessKey="True"
+                    TextElement.FontSize="{TemplateBinding FontSize}"
+                    TextElement.FontWeight="{TemplateBinding FontWeight}"
+                    UseLayoutRounding="False" />
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
     <ControlTheme x:Key="{x:Type u:ToolBar}" TargetType="u:ToolBar">
         <Setter Property="ItemsPanel">
             <ItemsPanelTemplate>
@@ -13,27 +35,35 @@
             <ControlTemplate TargetType="u:ToolBar">
                 <Border
                     Padding="2"
+                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                    VerticalAlignment="{TemplateBinding VerticalAlignment}"
                     CornerRadius="4"
                     Theme="{DynamicResource CardBorder}">
                     <DockPanel LastChildFill="True">
-                        <Rectangle
-                            Width="1"
-                            Margin="4,0"
-                            VerticalAlignment="Stretch"
-                            DockPanel.Dock="Left"
-                            Fill="Gray" />
                         <ContentPresenter
-                            Margin="4,0"
+                            Margin="8,0"
+                            HorizontalAlignment="Left"
+                            VerticalAlignment="Center"
                             Content="{TemplateBinding Header}"
                             ContentTemplate="{TemplateBinding HeaderTemplate}"
-                            DockPanel.Dock="Left" />
+                            DockPanel.Dock="Left"
-                        <Panel DockPanel.Dock="Right">
+                            IsVisible="{TemplateBinding Header,
-                            <ToggleButton Name="button" Content="More" />
+                                                        Converter={x:Static ObjectConverters.IsNotNull}}" />
+                        <Panel Name="PART_PopupButton" DockPanel.Dock="Right">
+                            <ToggleButton
+                                Name="button"
+                                IsVisible="False"
+                                Padding="8,0"
+                                VerticalAlignment="Stretch"
+                                Theme="{DynamicResource ToolBarExpandToggleButton}">
+                                <PathIcon Height="16" Data="{DynamicResource ToolBarHorizontalMoreGlyph}"></PathIcon>
+                            </ToggleButton>
                             <Popup
                                 IsLightDismissEnabled="True"
                                 IsOpen="{Binding #button.IsChecked, Mode=TwoWay}"
+                                Placement="{TemplateBinding PopupPlacement}"
                                 PlacementTarget="{Binding #button}">
-                                <Border Theme="{DynamicResource CardBorder}">
+                                <Border Theme="{DynamicResource CardBorder}" Padding="2">
                                     <StackPanel Name="{x:Static u:ToolBar.PART_OverflowPanel}" />
                                 </Border>
                             </Popup>
@@ -46,5 +76,58 @@
                 </Border>
             </ControlTemplate>
         </Setter>
+        <Style Selector="^[Orientation=Horizontal]">
+            <Setter Property="PopupPlacement" Value="BottomEdgeAlignedLeft" />
+        </Style>
+        <Style Selector="^[Orientation=Vertical]">
+            <Setter Property="PopupPlacement" Value="RightEdgeAlignedTop" />
+            <Setter Property="Template">
+                <ControlTemplate TargetType="u:ToolBar">
+                    <Border
+                        Padding="2"
+                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                        VerticalAlignment="{TemplateBinding VerticalAlignment}"
+                        CornerRadius="4"
+                        Theme="{DynamicResource CardBorder}">
+                        <DockPanel LastChildFill="True">
+                            <ContentPresenter
+                                Margin="8,0"
+                                HorizontalAlignment="Center"
+                                VerticalAlignment="Top"
+                                Content="{TemplateBinding Header}"
+                                ContentTemplate="{TemplateBinding HeaderTemplate}"
+                                DockPanel.Dock="Top"
+                                IsVisible="{TemplateBinding Header,
+                                                            Converter={x:Static ObjectConverters.IsNotNull}}" />
+                            <Panel Name="PART_PopupButton" DockPanel.Dock="Bottom">
+                                <ToggleButton
+                                    Name="button"
+                                    IsVisible="False"
+                                    Padding="0 8"
+                                    Theme="{DynamicResource ToolBarExpandToggleButton}">
+                                    <PathIcon Width="16" Data="{DynamicResource ToolBarVerticalMoreGlyph}" />
+                                </ToggleButton>
+                                <Popup
+                                    IsLightDismissEnabled="True"
+                                    IsOpen="{Binding #button.IsChecked, Mode=TwoWay}"
+                                    Placement="{TemplateBinding PopupPlacement}"
+                                    PlacementTarget="{Binding #button}">
+                                    <Border Theme="{DynamicResource CardBorder}">
+                                        <StackPanel Name="{x:Static u:ToolBar.PART_OverflowPanel}" />
+                                    </Border>
+                                </Popup>
+                            </Panel>
+                            <ItemsPresenter
+                                HorizontalAlignment="Left"
+                                VerticalAlignment="Center"
+                                ItemsPanel="{TemplateBinding ItemsPanel}" />
+                        </DockPanel>
+                    </Border>
+                </ControlTemplate>
+            </Setter>
+        </Style>
+        <Style Selector="^:overflow /template/ ToggleButton#button">
+            <Setter Property="IsVisible" Value="True"></Setter>
+        </Style>
     </ControlTheme>
 </ResourceDictionary>

src/Ursa.Themes.Semi/Themes/Shared/ToolBar.axaml

@@ -0,0 +1,6 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!-- Add Resources Here -->
+    <StreamGeometry x:Key="ToolBarHorizontalMoreGlyph">M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z</StreamGeometry>
+    <StreamGeometry x:Key="ToolBarVerticalMoreGlyph">M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z</StreamGeometry>
+</ResourceDictionary>

src/Ursa.Themes.Semi/Themes/Shared/_index.axaml

@@ -15,5 +15,6 @@
         <MergeResourceInclude Source="Pagination.axaml" />
         <MergeResourceInclude Source="TagInput.axaml" />
         <MergeResourceInclude Source="ThemeSelector.axaml" />
+        <MergeResourceInclude Source="ToolBar.axaml" />
     </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>

src/Ursa/Controls/ToolBar/ToolBar.cs

@@ -6,13 +6,16 @@ using Avalonia.Controls.Primitives;
 using Avalonia.Controls.Templates;
 using Avalonia.Layout;
 using Avalonia.Markup.Xaml.Templates;
+using Irihi.Avalonia.Shared.Helpers;
 
 namespace Ursa.Controls;
 
+[PseudoClasses(PC_Overflow)]
 [TemplatePart(PART_OverflowPanel, typeof(Panel))]
 public class ToolBar: HeaderedItemsControl
 {
     public const string PART_OverflowPanel = "PART_OverflowPanel";
+    public const string PC_Overflow = ":overflow";
     
     internal Panel? OverflowPanel { get; private set; }
     
@@ -28,13 +31,13 @@ public class ToolBar: HeaderedItemsControl
         set => SetValue(OrientationProperty, value);
     }
 
-    public static readonly StyledProperty<int> BandProperty = AvaloniaProperty.Register<ToolBar, int>(
+    public static readonly StyledProperty<PlacementMode> PopupPlacementProperty =
-        nameof(Band));
+        Popup.PlacementProperty.AddOwner<ToolBar>();
 
-    public int Band
+    public PlacementMode PopupPlacement
     {
-        get => GetValue(BandProperty);
+        get => GetValue(PopupPlacementProperty);
-        set => SetValue(BandProperty, value);
+        set => SetValue(PopupPlacementProperty, value);
     }
 
     public static readonly AttachedProperty<OverflowMode> OverflowModeProperty =
@@ -49,11 +52,27 @@ public class ToolBar: HeaderedItemsControl
     internal static void SetIsOverflowItem(Control obj, bool value) => obj.SetValue(IsOverflowItemProperty, value);
     internal static bool GetIsOverflowItem(Control obj) => obj.GetValue(IsOverflowItemProperty);
 
+    private bool _hasOverflowItems;
+    internal bool HasOverflowItems
+    {
+        get => _hasOverflowItems;
+        set
+        {
+            _hasOverflowItems = value;
+            PseudoClasses.Set(PC_Overflow, value);
+        }
+    }
+
     static ToolBar()
     {
         IsTabStopProperty.OverrideDefaultValue<ToolBar>(false);
         ItemsPanelProperty.OverrideDefaultValue<ToolBar>(DefaultTemplate);
         OrientationProperty.OverrideDefaultValue<ToolBar>(Orientation.Horizontal);
+        // TODO: use helper method after merged and upgrade helper dependency. 
+        IsOverflowItemProperty.Changed.AddClassHandler<Control, bool>((o, e) =>
+        {
+            PseudolassesExtensions.Set(o.Classes, PC_Overflow, e.NewValue.Value);
+        });
     }
     
     protected override bool NeedsContainerOverride(object? item, int index, out object? recycleKey)
@@ -63,29 +82,11 @@ public class ToolBar: HeaderedItemsControl
 
     protected override Control CreateContainerForItemOverride(object? item, int index, object? recycleKey)
     {
-        return new ContentPresenter();
+        if(item is Control c)
-    }
-
-    protected override void ContainerForItemPreparedOverride(Control container, object? item, int index)
-    {
-        base.ContainerForItemPreparedOverride(container, item, index);
-        if (item is Control s)
         {
-            container[!ToolBar.OverflowModeProperty] = s[!ToolBar.OverflowModeProperty];
+            return c;
-        }
-        else
-        {
-            if (container is ContentPresenter p)
-            {
-                p.ApplyTemplate();
-                var c = p.Child;
-                if (c != null)
-                {
-                    container[ToolBar.OverflowModeProperty] = c[ToolBar.OverflowModeProperty];
-                    // container[!ToolBar.OverflowModeProperty] = c[!ToolBar.OverflowModeProperty];
-                }
-            }
         }
+        return ItemTemplate?.Build(item) ?? new ContentPresenter();
     }
 
     protected override void OnApplyTemplate(TemplateAppliedEventArgs e)

src/Ursa/Controls/ToolBar/ToolBarOverflowPanel.cs

@@ -1,8 +0,0 @@
-using Avalonia.Controls;
-
-namespace Ursa.Controls;
-
-public class ToolBarOverflowPanel: StackPanel
-{
-    
-}

src/Ursa/Controls/ToolBar/ToolBarPanel.cs

@@ -10,18 +10,9 @@ public class ToolBarPanel: StackPanel
     private ToolBar? _parent;
     private Panel? _overflowPanel;
 
-    internal Panel? OverflowPanel => _overflowPanel ??= _parent?.OverflowPanel;
+    private Panel? OverflowPanel => _overflowPanel ??= _parent?.OverflowPanel;
     internal ToolBar? ParentToolBar => _parent ??= this.TemplatedParent as ToolBar;
 
-    public static readonly StyledProperty<Orientation> OrientationProperty =
-        StackPanel.OrientationProperty.AddOwner<ToolBar>();
-
-    public Orientation Orientation
-    {
-        get => GetValue(OrientationProperty);
-        set => SetValue(OrientationProperty, value);
-    }
-
     static ToolBarPanel()
     {
         OrientationProperty.OverrideDefaultValue<ToolBarPanel>(Orientation.Horizontal);
@@ -38,13 +29,11 @@ public class ToolBarPanel: StackPanel
     protected override Size MeasureOverride(Size availableSize)
     {
         var logicalChildren = _parent?.GetLogicalChildren().OfType<Control>().ToList();
-        var parent = this.GetLogicalParent();
         Size size = new Size();
         double spacing = 0;
         Size measureSize = availableSize;
         bool horizontal = Orientation == Orientation.Horizontal;
         bool hasVisibleChildren = false;
-        int index = 0;
         if (logicalChildren is null) return size;
         for (int i = 0; i < logicalChildren.Count; i++)
         {
@@ -54,7 +43,6 @@ public class ToolBarPanel: StackPanel
             if (mode == OverflowMode.Always)
             {
                 ToolBar.SetIsOverflowItem(control, true);
-                continue;
             }
             else if (mode == OverflowMode.Never)
             {
@@ -114,30 +102,33 @@ public class ToolBarPanel: StackPanel
     {
         Children.Clear();
         OverflowPanel?.Children.Clear();
-        InvalidateVisual();
         var logicalChildren = _parent?.GetLogicalChildren().OfType<Control>().ToList();
         if(logicalChildren is null) return finalSize;
+        bool overflow = false;
         foreach (var child in logicalChildren)
         {
             if (ToolBar.GetIsOverflowItem(child))
             {
                 OverflowPanel?.Children.Add(child);
+                overflow = true;
             }
             else
             {
-                this.Children.Add(child);
+                Children.Add(child);
             }
         }
+
+        if (_parent != null) _parent.HasOverflowItems = overflow;
         return base.ArrangeOverride(finalSize);
     }
 
     protected override void OnDetachedFromVisualTree(VisualTreeAttachmentEventArgs e)
     {
-        var list = OverflowPanel?.Children?.ToList();
+        var list = OverflowPanel?.Children.ToList();
         if (list is not null)
         {
-            OverflowPanel?.Children?.Clear();
+            OverflowPanel?.Children.Clear();
-            this.Children.AddRange(list);
+            Children.AddRange(list);
         }
         base.OnDetachedFromVisualTree(e);
     }