feat: add more templates.

demo/Ursa.Demo/Pages/NavMenuDemo.axaml

@@ -12,9 +12,9 @@
     x:DataType="vm:NavMenuDemoViewModel"
     mc:Ignorable="d">
     <ScrollViewer>
-        <StackPanel>
+        <StackPanel HorizontalAlignment="Left">
             <TextBlock Text="{ReflectionBinding #menu2.SelectedItem.Header}"></TextBlock>
-            <u:NavMenu Name="menu2">
+            <u:NavMenu Name="menu2" Width="300" IsHorizontalCollapsed="{Binding #collapse.IsChecked}">
                 <u:NavMenuItem Header="Menu 1">
                     <u:NavMenuItem.Icon>
                         <Rectangle
@@ -45,8 +45,11 @@
             </u:NavMenu>
             <u:Divider Content="Divider" />
             <TextBlock Text="{ReflectionBinding #menu.SelectedItem.Header}" />
+            <ToggleButton Name="collapse">Collapse</ToggleButton>
             <u:NavMenu
                 Name="menu"
+                Width="300"
+                IsHorizontalCollapsed="{Binding #collapse.IsChecked, Mode=OneWay}"
                 ItemsSource="{Binding MenuItems}"
                 HeaderBinding="{Binding Header}"
                 SubMenuBinding="{Binding  Children}"

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

@@ -1,10 +1,15 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:converters="clr-namespace:Ursa.Themes.Semi.Converters"
     xmlns:u="https://irihi.tech/ursa">
     <!--  Add Resources Here  -->
+
+    <converters:NavMenuMarginConverter x:Key="NavMarginConverter" />
+
     <ControlTheme x:Key="{x:Type u:NavMenu}" TargetType="u:NavMenu">
         <Setter Property="Grid.IsSharedSizeScope" Value="True" />
+        <Setter Property="SubMenuIndent" Value="16" />
         <Setter Property="Template">
             <ControlTemplate TargetType="u:NavMenu">
                 <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
@@ -14,39 +19,160 @@
         </Setter>
     </ControlTheme>
 
-    <ControlTheme x:Key="{x:Type u:NavMenuItem}" TargetType="u:NavMenuItem">
-        <Setter Property="Template">
-            <ControlTemplate TargetType="u:NavMenuItem">
-                <Grid Background="{TemplateBinding Background}" RowDefinitions="Auto, *">
-                    <Grid Grid.Row="0">
-                        <Grid.ColumnDefinitions>
-                            <ColumnDefinition Width="Auto" SharedSizeGroup="Icon" />
-                            <ColumnDefinition Width="*" SharedSizeGroup="Header" />
-                            <ColumnDefinition Width="Auto" SharedSizeGroup="Expander" />
-                        </Grid.ColumnDefinitions>
-                        <ContentPresenter
-                            Padding="8"
-                            HorizontalAlignment="Left"
-                            Background="Transparent"
-                            Content="{TemplateBinding Icon}"
-                            ContentTemplate="{TemplateBinding IconTemplate}" />
-                        <ContentPresenter
-                            Grid.Column="1"
-                            Padding="0,8"
-                            Background="Transparent"
-                            Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" />
-                    </Grid>
-                    <ItemsPresenter
-                        Grid.Row="1"
-                        Margin="20,0,0,0"
-                        Grid.IsSharedSizeScope="True"
-                        ItemsPanel="{TemplateBinding ItemsPanel}" />
+    <ControlTemplate x:Key="DefaultNavMenuItemTemplate" TargetType="u:NavMenuItem">
+        <Grid RowDefinitions="Auto, *">
+            <Border
+                Grid.Row="0"
+                Background="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}"
+                CornerRadius="4">
+                <Grid HorizontalAlignment="Stretch">
+                    <Grid.Margin>
+                        <MultiBinding Converter="{StaticResource NavMarginConverter}">
+                            <Binding Path="SubMenuIndent" RelativeSource="{RelativeSource TemplatedParent}" />
+                            <Binding Path="Level" RelativeSource="{RelativeSource TemplatedParent}" />
+                        </MultiBinding>
+                    </Grid.Margin>
+                    <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}">
+                        <PathIcon.Transitions>
+                            <Transitions>
+                                <TransformOperationsTransition Property="RenderTransform" Duration="0.1" />
+                            </Transitions>
+                        </PathIcon.Transitions>
+                    </PathIcon>
                 </Grid>
-            </ControlTemplate>
-        </Setter>
-
+            </Border>
+            <LayoutTransformControl
+                Name="PART_Transform"
+                Grid.Row="1"
+                VerticalAlignment="Top"
+                RenderTransformOrigin="0.5,0">
+                <ItemsPresenter Grid.IsSharedSizeScope="True" ItemsPanel="{Binding ItemsPanel, RelativeSource={RelativeSource TemplatedParent}}" />
+                <LayoutTransformControl.Transitions>
+                    <Transitions>
+                        <TransformOperationsTransition Property="LayoutTransform" Duration="0.1" />
+                    </Transitions>
+                </LayoutTransformControl.Transitions>
+            </LayoutTransformControl>
+        </Grid>
+    </ControlTemplate>
+    <ControlTemplate x:Key="TopLevelCollapsedNavMenuItemTemplate" TargetType="u:NavMenuItem">
+        <Border
+            MinWidth="24"
+            MinHeight="24"
+            HorizontalAlignment="Left">
+            <Grid>
+                <ContentPresenter
+                    Name="PART_IconPresenter"
+                    Content="{Binding Icon, RelativeSource={RelativeSource TemplatedParent}}"
+                    ContentTemplate="{Binding IconTemplate, RelativeSource={RelativeSource TemplatedParent}}" />
+                <Popup
+                    Name="PART_Popup"
+                    IsLightDismissEnabled="True"
+                    Placement="RightEdgeAlignedTop"
+                    PlacementTarget="{Binding #PART_IconPresenter}">
+                    <Border Theme="{DynamicResource CardBorder}" Grid.IsSharedSizeScope="True">
+                        <ItemsPresenter ItemsPanel="{Binding ItemsPanel, RelativeSource={RelativeSource TemplatedParent}}" />
+                    </Border>
+                </Popup>
+            </Grid>
+        </Border>
+    </ControlTemplate>
+    
+    <ControlTemplate x:Key="CollapsedNavMenuItemTemplate" TargetType="u:NavMenuItem">
+        <Border
+            Name="PART_Border"
+            MinWidth="24"
+            MinHeight="24"
+            HorizontalAlignment="Stretch">
+            <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}">
+                    <PathIcon.Transitions>
+                        <Transitions>
+                            <TransformOperationsTransition Property="RenderTransform" Duration="0.1" />
+                        </Transitions>
+                    </PathIcon.Transitions>
+                </PathIcon>
+                <Popup Grid.Column="0"
+                    Name="PART_Popup"
+                    IsLightDismissEnabled="True"
+                    Placement="RightEdgeAlignedTop"
+                    PlacementTarget="{Binding #PART_Border}">
+                    <Border Theme="{DynamicResource CardBorder}" Grid.IsSharedSizeScope="True">
+                        <ItemsPresenter ItemsPanel="{Binding ItemsPanel, RelativeSource={RelativeSource TemplatedParent}}" />
+                    </Border>
+                </Popup>
+            </Grid>
+        </Border>
+    </ControlTemplate>
+    
+    <ControlTheme x:Key="{x:Type u:NavMenuItem}" TargetType="u:NavMenuItem">
+        <Setter Property="Template" Value="{StaticResource DefaultNavMenuItemTemplate}" />
         <Style Selector="^:selected">
             <Setter Property="Background" Value="{DynamicResource NavigationMenuItemSelectedBackground}" />
         </Style>
+        <Style Selector="^:vertical-collapsed /template/ LayoutTransformControl#PART_Transform">
+            <Setter Property="LayoutTransform" Value="scale(1,0)" />
+        </Style>
+        <Style Selector="^:vertical-collapsed /template/ PathIcon#PART_ExpanderIcon">
+            <Setter Property="RenderTransform" Value="rotate(180deg)" />
+        </Style>
+        <Style Selector="^:empty /template/ PathIcon#PART_ExpanderIcon">
+            <Setter Property="IsVisible" Value="False" />
+        </Style>
+        <Style Selector="^:horizontal-collapsed:first-level">
+            <Setter Property="Template" Value="{StaticResource TopLevelCollapsedNavMenuItemTemplate}" />
+        </Style>
+        <Style Selector="^:horizontal-collapsed:not(:first-level)">
+            <Setter Property="Template" Value="{StaticResource CollapsedNavMenuItemTemplate}" />
+        </Style>
     </ControlTheme>
+
 </ResourceDictionary>

src/Ursa.Themes.Semi/Converters/NavMenuMarginConverter.cs

@@ -0,0 +1,17 @@
+using System.Globalization;
+using Avalonia;
+using Avalonia.Data.Converters;
+
+namespace Ursa.Themes.Semi.Converters;
+
+public class NavMenuMarginConverter: IMultiValueConverter
+{
+    public object? Convert(IList<object?> values, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (values[0] is double indent && values[1] is int level)
+        {
+            return new Thickness(indent * level, 0, 0, 0);
+        }
+        return AvaloniaProperty.UnsetValue;
+    }
+}

src/Ursa/Controls/NavMenu/NavMenu.cs

@@ -88,7 +88,7 @@ public class NavMenu: ItemsControl
     }
 
     public static readonly StyledProperty<double> SubMenuIndentProperty = AvaloniaProperty.Register<NavMenu, double>(
-        nameof(SubMenuIndent), defaultValue: 20.0);
+        nameof(SubMenuIndent));
 
     public double SubMenuIndent
     {

src/Ursa/Controls/NavMenu/NavMenuItem.cs

@@ -8,6 +8,7 @@ using Avalonia.Controls.Templates;
 using Avalonia.Input;
 using Avalonia.LogicalTree;
 using Avalonia.VisualTree;
+using Irihi.Avalonia.Shared.Helpers;
 
 namespace Ursa.Controls;
 
@@ -25,6 +26,7 @@ public class NavMenuItem: HeaderedSelectingItemsControl
     
     private NavMenu? _rootMenu;
     private Panel? _popupPanel;
+    private Popup? _popup;
     
     public static readonly StyledProperty<object?> IconProperty = AvaloniaProperty.Register<NavMenuItem, object?>(
         nameof(Icon));
@@ -81,6 +83,24 @@ public class NavMenuItem: HeaderedSelectingItemsControl
         private set => SetAndRaise(IsHighlightedProperty, ref _isHighlighted, value);
     }
 
+    public static readonly StyledProperty<bool> IsHorizontalCollapsedProperty =
+        NavMenu.IsHorizontalCollapsedProperty.AddOwner<NavMenuItem>();
+
+    public bool IsHorizontalCollapsed
+    {
+        get => GetValue(IsHorizontalCollapsedProperty);
+        set => SetValue(IsHorizontalCollapsedProperty, value);
+    }
+
+    public static readonly StyledProperty<bool> IsVerticalCollapsedProperty = AvaloniaProperty.Register<NavMenuItem, bool>(
+        nameof(IsVerticalCollapsed));
+
+    public bool IsVerticalCollapsed
+    {
+        get => GetValue(IsVerticalCollapsedProperty);
+        set => SetValue(IsVerticalCollapsedProperty, value);
+    }
+
     public static readonly StyledProperty<double> SubMenuIndentProperty =
         NavMenu.SubMenuIndentProperty.AddOwner<NavMenuItem>();
 
@@ -90,8 +110,6 @@ public class NavMenuItem: HeaderedSelectingItemsControl
         set => SetValue(SubMenuIndentProperty, value);
     }
 
-    
-
     internal static readonly DirectProperty<NavMenuItem, int> LevelProperty = AvaloniaProperty.RegisterDirect<NavMenuItem, int>(
         nameof(Level), o => o.Level, (o, v) => o.Level = v);
     private int _level;
@@ -104,20 +122,18 @@ public class NavMenuItem: HeaderedSelectingItemsControl
 
     static NavMenuItem()
     {
-        SelectableMixin.Attach<NavMenuItem>(IsSelectedProperty);
+        // SelectableMixin.Attach<NavMenuItem>(IsSelectedProperty);
         PressedMixin.Attach<NavMenuItem>();
-        IsHighlightedProperty.Changed.AddClassHandler<NavMenuItem, bool>((o, e) => o.OnIsHighlightedChange(e));
         LevelProperty.Changed.AddClassHandler<NavMenuItem, int>((item, args) => item.OnLevelChange(args));
+        PropertyToPseudoClassMixin.Attach<NavMenuItem>(IsHighlightedProperty, PC_Highlighted);
+        PropertyToPseudoClassMixin.Attach<NavMenuItem>(IsHorizontalCollapsedProperty, PC_HorizontalCollapsed);
+        PropertyToPseudoClassMixin.Attach<NavMenuItem>(IsVerticalCollapsedProperty, PC_VerticalCollapsed);
+        PropertyToPseudoClassMixin.Attach<NavMenuItem>(IsSelectedProperty, ":selected", IsSelectedChangedEvent);
     }
 
     private void OnLevelChange(AvaloniaPropertyChangedEventArgs<int> args)
     {
-        PseudoClasses.Set(PC_FirstLevel, args.NewValue.Value == 0);
-    }
-
-    private void OnIsHighlightedChange(AvaloniaPropertyChangedEventArgs<bool> args)
-    {
-        PseudoClasses.Set(PC_Highlighted, args.NewValue.Value);
+        PseudoClasses.Set(PC_FirstLevel, args.NewValue.Value == 1);
     }
 
     protected override bool NeedsContainerOverride(object? item, int index, out object? recycleKey)
@@ -154,6 +170,8 @@ public class NavMenuItem: HeaderedSelectingItemsControl
             }
             this[!IconTemplateProperty] = _rootMenu[!NavMenu.IconTemplateProperty];
             this[!HeaderTemplateProperty] = _rootMenu[!NavMenu.HeaderTemplateProperty];
+            this[!SubMenuIndentProperty] = _rootMenu[!NavMenu.SubMenuIndentProperty];
+            this[!IsHorizontalCollapsedProperty] = _rootMenu[!NavMenu.IsHorizontalCollapsedProperty];
         }
         
     }
@@ -163,6 +181,7 @@ public class NavMenuItem: HeaderedSelectingItemsControl
         var children = this.ItemsPanelRoot?.Children.ToList();
         base.OnApplyTemplate(e);
         SetCurrentValue(LevelProperty,CalculateDistanceFromLogicalParent<NavMenu>(this));
+        _popup = e.NameScope.Find<Popup>("PART_Popup");
     }
 
     protected override void OnPointerPressed(PointerPressedEventArgs e)
@@ -174,7 +193,24 @@ public class NavMenuItem: HeaderedSelectingItemsControl
         }
         else
         {
-            
+            if (!IsHorizontalCollapsed) 
+            {
+                SetCurrentValue(IsVerticalCollapsedProperty, !IsVerticalCollapsed);
+            }
+            else
+            {
+                if (_popup is not null)
+                {
+                    if (_popup.IsOpen)
+                    {
+                        _popup.Close();
+                    }
+                    else
+                    {
+                        _popup.Open();
+                    }
+                }
+            }
         }
         Command?.Execute(CommandParameter);
         e.Handled = true;