feat: add separator.

demo/Ursa.Demo/Pages/NavMenuDemo.axaml

@@ -20,13 +20,18 @@
         <TextBlock Grid.Row="1" Grid.Column="0" Text="{ReflectionBinding #menu.SelectedItem.Header}" />
         <Border Grid.Row="2" Grid.Column="0" Theme="{DynamicResource CardBorder}" HorizontalAlignment="Left" Padding="0">
             <u:NavMenu
-                Header="Hello Ursa"
                 Name="menu"
+                Header="Welcome to Ursa!"
                 HeaderBinding="{Binding Header}"
                 IconBinding="{Binding IconIndex}"
                 IsHorizontalCollapsed="{Binding #collapse.IsChecked, Mode=OneWay}"
                 ItemsSource="{Binding MenuItems}"
                 SubMenuBinding="{Binding Children}">
+                <u:NavMenu.Styles>
+                    <Style Selector="u|NavMenuItem" x:DataType="vm:MenuItem">
+                        <Setter Property="IsSeparator" Value="{Binding IsSeparator}"></Setter>
+                    </Style>
+                </u:NavMenu.Styles>
                 <u:NavMenu.IconTemplate>
                     <DataTemplate DataType="{x:Type x:Int32}">
                         <u:TwoTonePathIcon
@@ -42,7 +47,11 @@
                     </DataTemplate>
                 </u:NavMenu.IconTemplate>
                 <u:NavMenu.Footer>
-                    <Button>Collapse</Button>
+                    <Image
+                        Width="48"
+                        Height="48"
+                        RenderOptions.BitmapInterpolationMode="HighQuality"
+                        Source="../Assets/Ursa.ico" />
                 </u:NavMenu.Footer>
             </u:NavMenu>
         </Border>
@@ -76,16 +85,5 @@
                 </u:NavMenuItem.Icon>
             </u:NavMenuItem>
         </u:NavMenu>
-        <StackPanel HorizontalAlignment="Left">
-            
-            
-            
-            
-            
-            
-            
-
-           
-        </StackPanel>
     </Grid>
 </UserControl>

demo/Ursa.Demo/ViewModels/NavMenuDemoViewModel.cs

@@ -19,7 +19,7 @@ public class NavMenuDemoViewModel: ObservableObject
                 new MenuItem() { Header = "How to Contribute" },
                 new MenuItem() { Header = "Development Workflow" },
             }},
-            new MenuItem() { Header = "Design Principles" },
+            new MenuItem() { Header = "Design Principles"},
             new MenuItem() { Header = "Contributing", Children =
             {
                 new MenuItem() { Header = "Code of Conduct" },
@@ -27,6 +27,7 @@ public class NavMenuDemoViewModel: ObservableObject
                 new MenuItem() { Header = "Development Workflow" },
             }},
         }},
+        new MenuItem { Header = "Controls", IsSeparator = true},
         new MenuItem { Header = "Badge" },
         new MenuItem { Header = "Banner" },
         new MenuItem { Header = "ButtonGroup" },
@@ -57,11 +58,13 @@ public class NavMenuDemoViewModel: ObservableObject
 
 public class MenuItem
 {
-    public string? Header { get; set; }
-    public string? Icon { get; set; }
-    public int IconIndex { get; set; }
-    public ICommand NavigationCommand { get; set; }
     static Random r = new Random();
+    
+    public string? Header { get; set; }
+    public int IconIndex { get; set; }
+    public bool IsSeparator { get; set; }
+    public ICommand NavigationCommand { get; set; }
+
     public MenuItem()
     {
         NavigationCommand = new AsyncRelayCommand(OnNavigate);

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

@@ -15,7 +15,7 @@
                 <DockPanel LastChildFill="True">
                     <ContentPresenter Content="{TemplateBinding Header}" DockPanel.Dock="Top"></ContentPresenter>
                     <ContentPresenter Content="{TemplateBinding Footer}" DockPanel.Dock="Bottom"></ContentPresenter>
-                    <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
+                    <ScrollViewer HorizontalAlignment="Center" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
                         <ItemsPresenter ItemsPanel="{TemplateBinding ItemsPanel}" />
                     </ScrollViewer>
                 </DockPanel>
@@ -33,6 +33,7 @@
                 Name="PART_Border"
                 Grid.Row="0"
                 MinHeight="32"
+                Cursor="Hand"
                 Background="{TemplateBinding u:NavMenuItem.Background}"
                 CornerRadius="4">
                 <Grid
@@ -116,75 +117,6 @@
             </ItemsPresenter>
         </Grid>
     </ControlTemplate>
-    <!--
-    <ControlTemplate x:Key="TopLevelCollapsedNavMenuItemTemplate" TargetType="u:NavMenuItem">
-        <Border
-            Name="PART_Border"
-            MinWidth="32"
-            MinHeight="32"
-            HorizontalAlignment="Left"
-            Background="{TemplateBinding u:NavMenuItem.Background}"
-            CornerRadius="4">
-            <Grid>
-                <ContentPresenter
-                    Name="PART_IconPresenter"
-                    Content="{Binding Icon, RelativeSource={RelativeSource TemplatedParent}}"
-                    ContentTemplate="{Binding IconTemplate, RelativeSource={RelativeSource TemplatedParent}}" />
-            </Grid>
-        </Border>
-    </ControlTemplate>
-    <ControlTemplate x:Key="CollapsedNavMenuItemTemplate" TargetType="u:NavMenuItem">
-        <Border
-            Name="PART_Border"
-            MinWidth="24"
-            MinHeight="24"
-            HorizontalAlignment="Stretch"
-            Background="{TemplateBinding u:NavMenuItem.Background}"
-            CornerRadius="4">
-            <Grid>
-                <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="Auto" SharedSizeGroup="Icon" />
-                    <ColumnDefinition Width="*" />
-                    <ColumnDefinition Width="Auto" SharedSizeGroup="Expander" />
-                </Grid.ColumnDefinitions>
-                <ContentPresenter
-                    Padding="8"
-                    HorizontalAlignment="Left"
-                    Background="Transparent"
-                    Content="{Binding Icon, RelativeSource={RelativeSource TemplatedParent}}"
-                    ContentTemplate="{Binding IconTemplate, RelativeSource={RelativeSource TemplatedParent}}" />
-                <ContentPresenter
-                    Grid.Column="1"
-                    Padding="0,8"
-                    Background="Transparent"
-                    Content="{Binding Header, RelativeSource={RelativeSource TemplatedParent}}"
-                    ContentTemplate="{Binding HeaderTemplate, RelativeSource={RelativeSource TemplatedParent}}" />
-                <PathIcon
-                    Name="PART_ExpanderIcon"
-                    Grid.Column="2"
-                    Width="8"
-                    Height="8"
-                    Margin="12,0"
-                    Data="{DynamicResource NavigationMenuItemExpandIconGlyph}"
-                    Foreground="{DynamicResource NavigationMenuItemExpandIconForeground}"
-                    RenderTransform="rotate(-90deg)" />
-                <Popup
-                    Name="PART_Popup"
-                    Grid.Column="0"
-                    IsLightDismissEnabled="True"
-                    Placement="RightEdgeAlignedTop"
-                    PlacementTarget="{Binding #PART_Border}">
-                    <Border
-                        Padding="4"
-                        Grid.IsSharedSizeScope="True"
-                        Theme="{DynamicResource CardBorder}">
-                        <ItemsPresenter ItemsPanel="{Binding ItemsPanel, RelativeSource={RelativeSource TemplatedParent}}" />
-                    </Border>
-                </Popup>
-            </Grid>
-        </Border>
-    </ControlTemplate>
-    -->
     <ControlTheme x:Key="{x:Type u:NavMenuItem}" TargetType="u:NavMenuItem">
         <Setter Property="Background" Value="Transparent" />
         <Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
@@ -244,30 +176,44 @@
                 <Setter Property="RenderTransform" Value="rotate(-90deg)" />
             </Style>
         </Style>
-        <!--
+        <Style Selector="^[IsSeparator=True]">
-        <Style Selector="^:horizontal-collapsed:first-level">
+            <Setter Property="Template">
-            <Setter Property="Template" Value="{StaticResource TopLevelCollapsedNavMenuItemTemplate}" />
+                <ControlTemplate>
-            <Style Selector="^ /template/ Border#PART_Border">
+                    <StackPanel Cursor="No" Name="PART_RootPanel" Margin="{DynamicResource NavigationMenuSeparatorMargin}">
-                <Setter Property="ToolTip.Tip" Value="{Binding Header, RelativeSource={RelativeSource TemplatedParent}}" />
+                        <ContentPresenter
-                <Setter Property="ToolTip.ShowDelay" Value="0" />
+                            Name="PART_HeaderPresenter"
-            </Style>
+                            Margin="{DynamicResource NavigationMenuSeparatorHeaderMargin}"
-            <Style Selector="^/template/ Border#PART_Border:pointerover">
+                            HorizontalAlignment="Left"
-                <Setter Property="Background" Value="{DynamicResource NavigationMenuItemPointeroverBackground}" />
+                            Content="{TemplateBinding Header}"
+                            ContentTemplate="{TemplateBinding HeaderTemplate}"
+                            Foreground="{DynamicResource TextBlockQuaternaryForeground}"
+                            IsVisible="{TemplateBinding Header, Converter={x:Static ObjectConverters.IsNotNull}}">
+                            <ContentPresenter.Styles>
+                                <Style Selector="TextBlock">
+                                    <Setter Property="FontSize" Value="{DynamicResource NavigationMenuSeparatorHeaderFontSize}" />
+                                </Style>
+                            </ContentPresenter.Styles>
+                        </ContentPresenter>
+                        <Rectangle
+                            Name="PART_SeparatorBorder"
+                            Height="{DynamicResource NavigationMenuSeparatorBorderHeight}"
+                            Margin="{DynamicResource NavigationMenuSeparatorBorderMargin}"
+                            HorizontalAlignment="Stretch"
+                            Fill="{DynamicResource SemiColorBorder}" />
+                    </StackPanel>
+                </ControlTemplate>
+            </Setter>
+            <Style Selector="^:horizontal-collapsed:first-level">
+                <Setter Property="HorizontalAlignment" Value="Center"></Setter>
+                <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
+                    <Setter Property="IsVisible" Value="False"></Setter>
+                </Style>
+                <Style Selector="^ /template/ Rectangle#PART_SeparatorBorder">
+                    <Setter Property="HorizontalAlignment" Value="Center"></Setter>
+                    <Setter Property="Width" Value="12"></Setter>
+                </Style>
             </Style>
         </Style>
-        <Style Selector="^:horizontal-collapsed:not(:first-level)">
-            <Setter Property="Template" Value="{StaticResource CollapsedNavMenuItemTemplate}" />
-            <Style Selector="^:selected">
-                <Setter Property="Background" Value="{DynamicResource NavigationMenuItemSelectedBackground}" />
-            </Style>
-            <Style Selector="^:empty /template/ PathIcon#PART_ExpanderIcon">
-                <Setter Property="IsVisible" Value="False" />
-            </Style>
-            <Style Selector="^/template/ Border#PART_Border:pointerover">
-                <Setter Property="Background" Value="{DynamicResource NavigationMenuItemPointeroverBackground}" />
-            </Style>
-        </Style>
-        -->
     </ControlTheme>
 
 </ResourceDictionary>

src/Ursa/Controls/NavMenu/NavMenuItem.cs

@@ -124,7 +124,15 @@ public class NavMenuItem: HeaderedSelectingItemsControl
         get => _level;
         set => SetAndRaise(LevelProperty, ref _level, value);
     }
-    
+
+    public static readonly StyledProperty<bool> IsSeparatorProperty = AvaloniaProperty.Register<NavMenuItem, bool>(
+        nameof(IsSeparator));
+
+    public bool IsSeparator
+    {
+        get => GetValue(IsSeparatorProperty);
+        set => SetValue(IsSeparatorProperty, value);
+    }
 
     static NavMenuItem()
     {
@@ -222,6 +230,11 @@ public class NavMenuItem: HeaderedSelectingItemsControl
 
     protected override void OnPointerPressed(PointerPressedEventArgs e)
     {
+        if (IsSeparator)
+        {
+            e.Handled = true;
+            return;
+        }
         base.OnPointerPressed(e);
         if (this.ItemCount == 0)
         {