feat: wip.

demo/Ursa.Demo/App.axaml

@@ -5,6 +5,6 @@
     xmlns:u-semi="https://irihi.tech/ursa/themes/semi">
     <Application.Styles>
         <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" />
-        <u-semi:SemiTheme Locale="zh-CN"/>
+        <u-semi:SemiTheme Locale="zh-CN" />
     </Application.Styles>
 </Application>

demo/Ursa.Demo/DataTemplates/ToolBarItemTemplateSelector.cs

@@ -2,6 +2,7 @@
 using Avalonia.Controls.Primitives;
 using Avalonia.Controls.Templates;
 using Avalonia.Data;
+using Ursa.Controls;
 using Ursa.Demo.ViewModels;
 
 namespace Ursa.Demo.Converters;
@@ -18,6 +19,7 @@ public class ToolBarItemTemplateSelector: IDataTemplate
             {
                 [!ContentControl.ContentProperty] = new Binding() { Path = "Content" },
                 [!Button.CommandProperty] = new Binding() { Path = "Command" },
+                [!ToolBar.OverflowModeProperty] = new Binding(){ Path = "OverflowMode" }
             };
         }
         if (param is ToolBarCheckBoxItemViweModel cb)
@@ -27,6 +29,7 @@ public class ToolBarItemTemplateSelector: IDataTemplate
                 [!ContentControl.ContentProperty] = new Binding() { Path = "Content" },
                 [!ToggleButton.IsCheckedProperty] = new Binding() { Path = "IsChecked" },
                 [!Button.CommandProperty] = new Binding() { Path = "Command" },
+                [!ToolBar.OverflowModeProperty] = new Binding(){ Path = "OverflowMode" }
             };
         }
         if (param is ToolBarComboBoxItemViewModel combo)
@@ -36,6 +39,7 @@ public class ToolBarItemTemplateSelector: IDataTemplate
                 [!ContentControl.ContentProperty] = new Binding() { Path = "Content" },
                 [!SelectingItemsControl.SelectedItemProperty] = new Binding() { Path = "SelectedItem" },
                 [!ItemsControl.ItemsSourceProperty] = new Binding() { Path = "Items" },
+                [!ToolBar.OverflowModeProperty] = new Binding(){ Path = "OverflowMode" }
             };
         }
         return new Button() { Content = "Undefined Item" };

demo/Ursa.Demo/ViewModels/ToolBarDemoViewModel.cs

@@ -13,11 +13,11 @@ public partial class ToolBarDemoViewModel: ObservableObject
     {
         Items = new()
         {
-            new ToolBarButtonItemViewModel() { Content = "New" },
+            new ToolBarButtonItemViewModel() { Content = "New", OverflowMode = OverflowMode.AsNeeded},
             new ToolBarButtonItemViewModel() { Content = "Open" },
             new ToolBarButtonItemViewModel() { Content = "Save" },
             new ToolBarCheckBoxItemViweModel() { Content = "Bold" },
-            new ToolBarCheckBoxItemViweModel() { Content = "Italic" },
+            new ToolBarCheckBoxItemViweModel() { Content = "Italic", OverflowMode = OverflowMode.Never},
             new ToolBarComboBoxItemViewModel() { Content = "Font Size", Items = new (){ "10", "12", "14"  } }
         };
     }
@@ -25,7 +25,7 @@ public partial class ToolBarDemoViewModel: ObservableObject
 
 public abstract class ToolBarItemViewModel: ObservableObject
 {
-    
+    public OverflowMode OverflowMode { get; set; }
 }
 
 public class ToolBarButtonItemViewModel: ToolBarItemViewModel

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

@@ -23,8 +23,8 @@
                             Fill="Gray" />
                         <ContentPresenter Margin="4 0" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" />
                         <ItemsPresenter VerticalAlignment="Center" HorizontalAlignment="Left" ItemsPanel="{TemplateBinding ItemsPanel}"/>
-                        <Button Content="More"></Button>
-                        <Popup>
+                        <ToggleButton Name="button" Content="More"></ToggleButton>
+                        <Popup IsOpen="{Binding #button.IsChecked, Mode=TwoWay}" PlacementTarget="{Binding #button}" IsLightDismissEnabled="True">
                             <Border Theme="{DynamicResource CardBorder}">
                                 <StackPanel Name="{x:Static u:ToolBar.PART_OverflowPanel}"></StackPanel>
                             </Border>

src/Ursa/Controls/ToolBar/ToolBar.cs

@@ -36,6 +36,12 @@ public class ToolBar: HeaderedItemsControl
         set => SetValue(BandProperty, value);
     }
 
+    public static readonly AttachedProperty<OverflowMode> OverflowModeProperty =
+        AvaloniaProperty.RegisterAttached<ToolBar, Control?, OverflowMode>("OverflowMode");
+
+    public static void SetOverflowMode(Control? obj, OverflowMode value) => obj.SetValue(OverflowModeProperty, value);
+    public static OverflowMode GetOverflowMode(Control? obj) => obj.GetValue(OverflowModeProperty);
+
     static ToolBar()
     {
         IsTabStopProperty.OverrideDefaultValue<ToolBar>(false);

src/Ursa/Controls/ToolBar/ToolBarPanel.cs

@@ -28,7 +28,24 @@ public class ToolBarPanel: StackPanel
 
     protected override Size MeasureOverride(Size availableSize)
     {
-        return base.MeasureOverride(availableSize);
-        
+        var size = base.MeasureOverride(availableSize);
+        var children = this.Children;
+        var children2 = this.OverflowPanel?.Children;
+        var all = children.ToList();
+        if (children2 != null)
+        {
+            all.AddRange(children2);
+        }
+        this.Children.Clear();
+        OverflowPanel?.Children.Clear();
+        for (int i = 0; i < all.Count - 1; i++)
+        {
+            this.Children.Add(all[i]);
+        }
+        if (all.Count > 0)
+        {
+            OverflowPanel?.Children.Add(all.Last());
+        }
+        return size;
     }
 }