feat: initialize, setup demo. make sure MVVM works.

demo/Ursa.Demo/DataTemplates/ToolBarItemTemplateSelector.cs

@@ -0,0 +1,48 @@
+using Avalonia.Controls;
+using Avalonia.Controls.Primitives;
+using Avalonia.Controls.Templates;
+using Avalonia.Data;
+using Ursa.Demo.ViewModels;
+
+namespace Ursa.Demo.Converters;
+
+public class ToolBarItemTemplateSelector: IDataTemplate
+{
+    public static ToolBarItemTemplateSelector Instance { get; } = new();
+    public Control? Build(object? param)
+    {
+        if (param is null) return null;
+        if (param is ToolBarButtonItemViewModel vm)
+        {
+            return new Button()
+            {
+                [!ContentControl.ContentProperty] = new Binding() { Path = "Content" },
+                [!Button.CommandProperty] = new Binding() { Path = "Command" },
+            };
+        }
+        if (param is ToolBarCheckBoxItemViweModel cb)
+        {
+            return new CheckBox()
+            {
+                [!ContentControl.ContentProperty] = new Binding() { Path = "Content" },
+                [!ToggleButton.IsCheckedProperty] = new Binding() { Path = "IsChecked" },
+                [!Button.CommandProperty] = new Binding() { Path = "Command" },
+            };
+        }
+        if (param is ToolBarComboBoxItemViewModel combo)
+        {
+            return new ComboBox()
+            {
+                [!ContentControl.ContentProperty] = new Binding() { Path = "Content" },
+                [!SelectingItemsControl.SelectedItemProperty] = new Binding() { Path = "SelectedItem" },
+                [!ItemsControl.ItemsSourceProperty] = new Binding() { Path = "Items" },
+            };
+        }
+        return new Button() { Content = "Undefined Item" };
+    }
+
+    public bool Match(object? data)
+    {
+        return data is ToolBarItemViewModel;
+    }
+}

demo/Ursa.Demo/Models/MenuKeys.cs

@@ -31,5 +31,6 @@ public static class MenuKeys
     public const string MenuKeyTimeline = "Timeline";
     public const string MenuKeyTwoTonePathIcon = "TwoTonePathIcon";
     public const string MenuKeyThemeToggler = "ThemeToggler";
+    public const string MenuKeyToolBar = "ToolBar";
 
 }

demo/Ursa.Demo/Pages/ToolBarDemo.axaml

@@ -0,0 +1,24 @@
+<UserControl 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"
+             xmlns:template="using:Ursa.Demo.Converters"
+             x:DataType="vm:ToolBarDemoViewModel"
+             x:CompileBindings="True"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Ursa.Demo.Pages.ToolBarDemo">
+    <StackPanel>
+        <u:ToolBar>
+            <Button Content="Button 1" />
+            <Button Content="Button 2" />
+            <Button Content="Button 3" />
+        </u:ToolBar>
+        <u:ToolBar ItemsSource="{Binding Items}">
+            <u:ToolBar.ItemTemplate>
+                <template:ToolBarItemTemplateSelector/>
+            </u:ToolBar.ItemTemplate>
+        </u:ToolBar>
+    </StackPanel>
+</UserControl>

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

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

demo/Ursa.Demo/ViewModels/MainViewViewModel.cs

@@ -53,6 +53,7 @@ public class MainViewViewModel : ViewModelBase
             MenuKeys.MenuKeyTimeline => new TimelineDemoViewModel(),
             MenuKeys.MenuKeyTwoTonePathIcon => new TwoTonePathIconDemoViewModel(),
             MenuKeys.MenuKeyThemeToggler => new ThemeTogglerDemoViewModel(),
+            MenuKeys.MenuKeyToolBar => new ToolBarDemoViewModel(),
         };
     }
 }

demo/Ursa.Demo/ViewModels/MenuViewModel.cs

@@ -40,6 +40,7 @@ public class MenuViewModel: ViewModelBase
             new() { MenuHeader = "Theme Toggler", Key = MenuKeys.MenuKeyThemeToggler },
             new() { MenuHeader = "Timeline", Key = MenuKeys.MenuKeyTimeline, Status = "Updated" },
             new() { MenuHeader = "TwoTonePathIcon", Key = MenuKeys.MenuKeyTwoTonePathIcon, Status = "New"},
+            new() { MenuHeader = "ToolBar", Key = MenuKeys.MenuKeyToolBar, Status = "New" }
         };
     }
 }

demo/Ursa.Demo/ViewModels/ToolBarDemoViewModel.cs

@@ -0,0 +1,72 @@
+using System.Collections.ObjectModel;
+using System.Windows.Input;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
+using Ursa.Controls;
+
+namespace Ursa.Demo.ViewModels;
+
+public partial class ToolBarDemoViewModel: ObservableObject
+{
+    public ObservableCollection<ToolBarItemViewModel> Items { get; set; }
+    public ToolBarDemoViewModel()
+    {
+        Items = new()
+        {
+            new ToolBarButtonItemViewModel() { Content = "New" },
+            new ToolBarButtonItemViewModel() { Content = "Open" },
+            new ToolBarButtonItemViewModel() { Content = "Save" },
+            new ToolBarCheckBoxItemViweModel() { Content = "Bold" },
+            new ToolBarCheckBoxItemViweModel() { Content = "Italic" },
+            new ToolBarComboBoxItemViewModel() { Content = "Font Size", Items = new (){ "10", "12", "14"  } }
+        };
+    }
+}
+
+public abstract class ToolBarItemViewModel: ObservableObject
+{
+    
+}
+
+public class ToolBarButtonItemViewModel: ToolBarItemViewModel
+{
+    public string Content { get; set; }
+    public ICommand Command { get; set; }
+
+    public ToolBarButtonItemViewModel()
+    {
+        Command = new AsyncRelayCommand(async () => { await MessageBox.ShowOverlayAsync(Content); });
+    }
+}
+
+public class ToolBarCheckBoxItemViweModel: ToolBarItemViewModel
+{
+    public string Content { get; set; }
+    public bool IsChecked { get; set; }
+    public ICommand Command { get; set; }
+
+    public ToolBarCheckBoxItemViweModel()
+    {
+        Command = new AsyncRelayCommand(async () => { await MessageBox.ShowOverlayAsync(Content); });
+    }
+}
+
+public class ToolBarComboBoxItemViewModel: ToolBarItemViewModel
+{
+    public string Content { get; set; }
+    public ObservableCollection<string> Items { get; set; }
+
+    private string _selectedItem;
+    public string SelectedItem
+    {
+        get => _selectedItem;
+        set
+        {
+            SetProperty(ref _selectedItem, value);
+            MessageBox.ShowOverlayAsync(value);
+        }
+    }
+    
+    
+    
+}

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

@@ -0,0 +1,37 @@
+<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:ToolBar}" TargetType="u:ToolBar">
+        <Setter Property="ItemsPanel">
+            <ItemsPanelTemplate>
+                <u:ToolBarPanel/>
+            </ItemsPanelTemplate>
+        </Setter>
+        <Setter Property="Template">
+            <ControlTemplate TargetType="u:ToolBar">
+                <Border
+                    Padding="2"
+                    Theme="{DynamicResource CardBorder}"
+                    CornerRadius="4">
+                    <StackPanel Orientation="{TemplateBinding Orientation}">
+                        <Rectangle
+                            Width="1"
+                            VerticalAlignment="Stretch"
+                            Margin="4 0"
+                            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>
+                            <Border Theme="{DynamicResource CardBorder}">
+                                <StackPanel Name="{x:Static u:ToolBar.PART_OverflowPanel}"></StackPanel>
+                            </Border>
+                        </Popup>
+                    </StackPanel>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

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

@@ -30,5 +30,6 @@
         <ResourceInclude Source="ThemeSelector.axaml" />
         <ResourceInclude Source="Timeline.axaml" />
         <ResourceInclude Source="TwoTonePathIcon.axaml" />
+        <ResourceInclude Source="ToolBar.axaml" />
     </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>

src/Ursa/Controls/ToolBar/OverflowMode.cs

@@ -0,0 +1,8 @@
+namespace Ursa.Controls;
+
+public enum OverflowMode
+{
+    AsNeeded,
+    Always,
+    Never
+}

src/Ursa/Controls/ToolBar/ToolBar.cs

@@ -0,0 +1,61 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Metadata;
+using Avalonia.Controls.Presenters;
+using Avalonia.Controls.Primitives;
+using Avalonia.Controls.Templates;
+using Avalonia.Layout;
+
+namespace Ursa.Controls;
+
+[TemplatePart(PART_OverflowPanel, typeof(Panel))]
+public class ToolBar: HeaderedItemsControl
+{
+    public const string PART_OverflowPanel = "PART_OverflowPanel";
+    
+    internal Panel? OverflowPanel { get; private set; }
+    
+    private static readonly ITemplate<Panel?> DefaultTemplate =
+        new FuncTemplate<Panel?>(() => new ToolBarPanel() { Orientation = Orientation.Horizontal });
+    
+    public static readonly StyledProperty<Orientation> OrientationProperty =
+        StackPanel.OrientationProperty.AddOwner<ToolBar>();
+
+    public Orientation Orientation
+    {
+        get => GetValue(OrientationProperty);
+        set => SetValue(OrientationProperty, value);
+    }
+    
+    public static readonly StyledProperty<int> BandProperty = AvaloniaProperty.Register<ToolBar, int>(
+        nameof(Band));
+    
+    public int Band
+    {
+        get => GetValue(BandProperty);
+        set => SetValue(BandProperty, value);
+    }
+
+    static ToolBar()
+    {
+        IsTabStopProperty.OverrideDefaultValue<ToolBar>(false);
+        ItemsPanelProperty.OverrideDefaultValue<ToolBar>(DefaultTemplate);
+        OrientationProperty.OverrideDefaultValue<ToolBar>(Orientation.Horizontal);
+    }
+    
+    protected override bool NeedsContainerOverride(object? item, int index, out object? recycleKey)
+    {
+        return NeedsContainer<Control>(item, out recycleKey);
+    }
+
+    protected override Control CreateContainerForItemOverride(object? item, int index, object? recycleKey)
+    {
+        return new ContentPresenter();
+    }
+
+    protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
+    {
+        base.OnApplyTemplate(e);
+        OverflowPanel = e.NameScope.Find<Panel>(PART_OverflowPanel);
+    }
+}

src/Ursa/Controls/ToolBar/ToolBarOverflowPanel.cs

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

src/Ursa/Controls/ToolBar/ToolBarPanel.cs

@@ -0,0 +1,34 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Layout;
+using Avalonia.LogicalTree;
+
+namespace Ursa.Controls;
+
+public class ToolBarPanel: StackPanel
+{
+    private ToolBar? _parent;
+    private Panel? _overflowPanel;
+
+    internal Panel? OverflowPanel => _overflowPanel ??= _parent?.OverflowPanel;
+    internal ToolBar? ParentToolBar => _parent ??= this.TemplatedParent as ToolBar;
+
+    static ToolBarPanel()
+    {
+        OrientationProperty.OverrideDefaultValue<ToolBarPanel>(Orientation.Horizontal);
+    }
+
+    protected override void OnAttachedToLogicalTree(LogicalTreeAttachmentEventArgs e)
+    {
+        base.OnAttachedToLogicalTree(e);
+        _parent = this.TemplatedParent as ToolBar;
+        if (_parent is null) return;
+        this[!OrientationProperty] = _parent[!OrientationProperty];
+    }
+
+    protected override Size MeasureOverride(Size availableSize)
+    {
+        return base.MeasureOverride(availableSize);
+        
+    }
+}

src/Ursa/Ursa.csproj

@@ -17,4 +17,8 @@
         <PackageReference Include="Irihi.Avalonia.Shared" Version="0.1.2" />
     </ItemGroup>
 
+    <ItemGroup>
+      <Folder Include="Controls\Panels\" />
+    </ItemGroup>
+
 </Project>