From d141831571f1bea96c0eaf6ec79555db5dcc503f Mon Sep 17 00:00:00 2001
From: rabbitism <dongbin@irihi.tech>
Date: Wed, 14 Feb 2024 21:45:50 +0800
Subject: [PATCH 1/2] feat: replace ursa demo with nav menu.

---
 .../Converters/IconNameToPathConverter.cs     |   6 +
 demo/Ursa.Demo/Views/MainView.axaml           | 113 +++++++++---------
 src/Ursa.Themes.Semi/Controls/NavMenu.axaml   |  56 ++++++---
 3 files changed, 104 insertions(+), 71 deletions(-)

diff --git a/demo/Ursa.Demo/Converters/IconNameToPathConverter.cs b/demo/Ursa.Demo/Converters/IconNameToPathConverter.cs
index 5a602e8..4451895 100644
--- a/demo/Ursa.Demo/Converters/IconNameToPathConverter.cs
+++ b/demo/Ursa.Demo/Converters/IconNameToPathConverter.cs
@@ -26,6 +26,12 @@ public class IconNameToPathConverter: IValueConverter
             string s = paths[i % paths.Length];
             return StreamGeometry.Parse(s);
         }
+        else if (value is string s)
+        {
+            int hash = s.GetHashCode();
+            string path = paths[Math.Abs(hash) % paths.Length];
+            return StreamGeometry.Parse(path);
+        }
         return AvaloniaProperty.UnsetValue;
     }
 
diff --git a/demo/Ursa.Demo/Views/MainView.axaml b/demo/Ursa.Demo/Views/MainView.axaml
index 956dbe4..664ef75 100644
--- a/demo/Ursa.Demo/Views/MainView.axaml
+++ b/demo/Ursa.Demo/Views/MainView.axaml
@@ -16,6 +16,9 @@
     <Design.DataContext>
         <vm:MainViewViewModel />
     </Design.DataContext>
+    <UserControl.Resources>
+        <converters:IconNameToPathConverter x:Key="IconConverter" />
+    </UserControl.Resources>
     <Panel>
         <Grid
             Classes.Blur="{Binding #host.HasModal}"
@@ -27,63 +30,65 @@
                 </Style>
             </Grid.Styles>
             <Border
+                Padding="8 4"
                 Grid.RowSpan="2"
-                Padding="8,4"
                 VerticalAlignment="Stretch"
                 Theme="{DynamicResource CardBorder}">
-                <u:NavigationMenu ItemsSource="{Binding Menus.MenuItems}" ShowCollapseButton="True">
-                    <u:NavigationMenu.Header>
-                        <TextBlock
-                            Classes="H4"
-                            Text="Ursa"
-                            Theme="{DynamicResource TitleTextBlock}" />
-                    </u:NavigationMenu.Header>
-                    <u:NavigationMenu.Icon>
-                        <Image
-                            Width="48"
-                            Height="48"
-                            RenderOptions.BitmapInterpolationMode="HighQuality"
-                            Source="../Assets/Ursa.ico" />
-                    </u:NavigationMenu.Icon>
-                    <u:NavigationMenu.ItemTemplate>
-                        <converters:MenuDataTemplateSelector>
-                            <converters:MenuDataTemplateSelector.MenuTemplate>
-                                <DataTemplate DataType="vm:MenuItemViewModel">
-                                    <u:NavigationMenuItem
-                                        Command="{Binding ActivateCommand}"
-                                        Header="{Binding}"
-                                        ItemsSource="{Binding Children}">
-                                        <u:NavigationMenuItem.HeaderTemplate>
-                                            <DataTemplate x:DataType="vm:MenuItemViewModel">
-                                                <StackPanel Orientation="Horizontal">
-                                                    <TextBlock HorizontalAlignment="Left" Text="{Binding MenuHeader}" />
-                                                    <u:Badge
-                                                        Margin="8,0,0,0"
-                                                        HorizontalAlignment="Left"
-                                                        BadgeContent="{Binding Status}"
-                                                        CornerPosition="TopRight" />
-                                                </StackPanel>
-
-                                            </DataTemplate>
-                                        </u:NavigationMenuItem.HeaderTemplate>
-                                        <u:NavigationMenuItem.Icon>
-                                            <Border
-                                                Width="10"
-                                                Height="10"
-                                                Background="{DynamicResource SemiBlue6}"
-                                                CornerRadius="3" />
-                                        </u:NavigationMenuItem.Icon>
-                                    </u:NavigationMenuItem>
-                                </DataTemplate>
-                            </converters:MenuDataTemplateSelector.MenuTemplate>
-                            <converters:MenuDataTemplateSelector.SeparatorTemplate>
-                                <DataTemplate DataType="vm:MenuItemViewModel">
-                                    <u:NavigationMenuSeparator Header="{Binding MenuHeader}" />
-                                </DataTemplate>
-                            </converters:MenuDataTemplateSelector.SeparatorTemplate>
-                        </converters:MenuDataTemplateSelector>
-                    </u:NavigationMenu.ItemTemplate>
-                </u:NavigationMenu>
+                <u:NavMenu Name="menu" ItemsSource="{Binding Menus.MenuItems}"
+                           CommandBinding="{Binding ActivateCommand}"
+                           HeaderBinding="{Binding}"
+                           IconBinding="{Binding MenuHeader}">
+                    <u:NavMenu.Styles>
+                        <Style Selector="u|NavMenuItem" x:DataType="vm:MenuItemViewModel">
+                            <Setter Property="IsSeparator" Value="{Binding IsSeparator}"></Setter>
+                        </Style>
+                    </u:NavMenu.Styles>
+                    <u:NavMenu.IconTemplate>
+                        <DataTemplate x:DataType="x:String">
+                            <u:TwoTonePathIcon
+                                Width="16"
+                                Height="16"
+                                ActiveForeground="{DynamicResource SemiBlue5}"
+                                ActiveStrokeBrush="{DynamicResource SemiBlue5}"
+                                Data="{Binding Converter={StaticResource IconConverter}}"
+                                Foreground="{DynamicResource SemiGrey5}"
+                                IsActive="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=u:NavMenuItem}, Path=IsHighlighted, Mode=TwoWay}"
+                                StrokeBrush="{DynamicResource SemiGrey5}" />
+                        </DataTemplate>
+                    </u:NavMenu.IconTemplate>
+                    <u:NavMenu.HeaderTemplate>
+                        <DataTemplate x:DataType="vm:MenuItemViewModel">
+                            <StackPanel Orientation="Horizontal" MinWidth="240">
+                                <TextBlock HorizontalAlignment="Left" Text="{Binding MenuHeader}" />
+                                <Label
+                                    Margin="8,0,0,0"
+                                    HorizontalAlignment="Left"
+                                    Theme="{DynamicResource TagLabel}"
+                                    Classes="Blue Solid"
+                                    IsVisible="{Binding Status, Converter={x:Static ObjectConverters.IsNotNull}}"
+                                    Content="{Binding Status}"/>
+                            </StackPanel>
+                        </DataTemplate>
+                    </u:NavMenu.HeaderTemplate>
+                    <u:NavMenu.Header>
+                        <DockPanel HorizontalAlignment="Center" Margin="8">
+                            <Image
+                                Width="48"
+                                Height="48"
+                                u:NavMenu.CanToggle="True"
+                                VerticalAlignment="Center"
+                                DockPanel.Dock="Left"
+                                RenderOptions.BitmapInterpolationMode="HighQuality"
+                                Source="../Assets/Ursa.ico" />
+                            <TextBlock
+                                Classes="H4"
+                                Text="Ursa"
+                                IsVisible="{Binding !#menu.IsHorizontalCollapsed}"
+                                VerticalAlignment="Center"
+                                Theme="{DynamicResource TitleTextBlock}" />
+                        </DockPanel>
+                    </u:NavMenu.Header>
+                </u:NavMenu>
             </Border>
             <u:ThemeToggleButton
                 Grid.Row="0"
diff --git a/src/Ursa.Themes.Semi/Controls/NavMenu.axaml b/src/Ursa.Themes.Semi/Controls/NavMenu.axaml
index b8196a7..c88c81c 100644
--- a/src/Ursa.Themes.Semi/Controls/NavMenu.axaml
+++ b/src/Ursa.Themes.Semi/Controls/NavMenu.axaml
@@ -13,17 +13,35 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="u:NavMenu">
                 <DockPanel LastChildFill="True">
-                    <ContentPresenter Content="{TemplateBinding Header}" DockPanel.Dock="Top"></ContentPresenter>
-                    <ContentPresenter Content="{TemplateBinding Footer}" DockPanel.Dock="Bottom"></ContentPresenter>
-                    <ScrollViewer HorizontalAlignment="Center" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
+                    <ContentPresenter Content="{TemplateBinding Header}" DockPanel.Dock="Top" />
+                    <ContentPresenter Content="{TemplateBinding Footer}" DockPanel.Dock="Bottom" />
+                    <ScrollViewer
+                        HorizontalAlignment="Center"
+                        HorizontalScrollBarVisibility="Disabled"
+                        AllowAutoHide="True"
+                        Theme="{DynamicResource StaticScrollViewer}"
+                        VerticalScrollBarVisibility="Auto">
+                        <ScrollViewer.Styles>
+                            <Style Selector="ScrollViewer /template/ ScrollBar">
+                                <Setter Property="Opacity" Value="0"></Setter>
+                            </Style>
+                            <Style Selector="ScrollViewer:pointerover">
+                                <Style Selector="^ /template/ ScrollBar#PART_HorizontalScrollBar">
+                                    <Setter Property="Opacity" Value="1" />
+                                </Style>
+                                <Style Selector="^ /template/ ScrollBar#PART_VerticalScrollBar">
+                                    <Setter Property="Opacity" Value="1" />
+                                </Style>
+                            </Style>
+                        </ScrollViewer.Styles>
                         <ItemsPresenter ItemsPanel="{TemplateBinding ItemsPanel}" />
                     </ScrollViewer>
                 </DockPanel>
             </ControlTemplate>
         </Setter>
         <Style Selector="^:horizontal-collapsed">
-            <Setter Property="Width" Value="{x:Static x:Double.NaN}"></Setter>
-            <Setter Property="HorizontalAlignment" Value="Left"></Setter>
+            <Setter Property="Width" Value="{x:Static x:Double.NaN}" />
+            <Setter Property="HorizontalAlignment" Value="Left" />
         </Style>
     </ControlTheme>
 
@@ -33,9 +51,9 @@
                 Name="PART_Border"
                 Grid.Row="0"
                 MinHeight="32"
-                Cursor="Hand"
                 Background="{TemplateBinding u:NavMenuItem.Background}"
-                CornerRadius="4">
+                CornerRadius="4"
+                Cursor="Hand">
                 <Grid
                     Name="PART_RootGrid"
                     HorizontalAlignment="Stretch"
@@ -119,7 +137,7 @@
     </ControlTemplate>
     <ControlTheme x:Key="{x:Type u:NavMenuItem}" TargetType="u:NavMenuItem">
         <Setter Property="Background" Value="Transparent" />
-        <Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
         <Setter Property="ItemsPanel">
             <ItemsPanelTemplate>
                 <u:OverflowStackPanel />
@@ -146,7 +164,7 @@
             <Setter Property="Background" Value="{DynamicResource NavigationMenuItemPointeroverBackground}" />
         </Style>
         <Style Selector="^:horizontal-collapsed:first-level">
-            <Setter Property="HorizontalAlignment" Value="Left"></Setter>
+            <Setter Property="HorizontalAlignment" Value="Left" />
             <Style Selector="^ /template/ Border#PART_Border">
                 <Setter Property="ToolTip.Tip" Value="{Binding Header, RelativeSource={RelativeSource TemplatedParent}}" />
                 <Setter Property="ToolTip.ShowDelay" Value="0" />
@@ -157,7 +175,7 @@
             </Style>
             <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
                 <Setter Property="Grid.ColumnSpan" Value="3" />
-                <Setter Property="Margin" Value="0 8"></Setter>
+                <Setter Property="Margin" Value="0 8" />
                 <Setter Property="HorizontalAlignment" Value="Center" />
             </Style>
             <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
@@ -172,7 +190,7 @@
             <Style Selector="^ /template/ Grid#PART_RootGrid">
                 <Setter Property="HorizontalAlignment" Value="Left" />
             </Style>
-            
+
         </Style>
         <Style Selector="^:horizontal-collapsed:not(:first-level)">
             <Style Selector="^ /template/ PathIcon#PART_ExpanderIcon">
@@ -182,7 +200,10 @@
         <Style Selector="^[IsSeparator=True]">
             <Setter Property="Template">
                 <ControlTemplate>
-                    <StackPanel Cursor="No" Name="PART_RootPanel" Margin="{DynamicResource NavigationMenuSeparatorMargin}">
+                    <StackPanel
+                        Name="PART_RootPanel"
+                        Margin="{DynamicResource NavigationMenuSeparatorMargin}"
+                        Cursor="No">
                         <ContentPresenter
                             Name="PART_HeaderPresenter"
                             Margin="{DynamicResource NavigationMenuSeparatorHeaderMargin}"
@@ -190,7 +211,8 @@
                             Content="{TemplateBinding Header}"
                             ContentTemplate="{TemplateBinding HeaderTemplate}"
                             Foreground="{DynamicResource TextBlockQuaternaryForeground}"
-                            IsVisible="{TemplateBinding Header, Converter={x:Static ObjectConverters.IsNotNull}}">
+                            IsVisible="{TemplateBinding Header,
+                                                        Converter={x:Static ObjectConverters.IsNotNull}}">
                             <ContentPresenter.Styles>
                                 <Style Selector="TextBlock">
                                     <Setter Property="FontSize" Value="{DynamicResource NavigationMenuSeparatorHeaderFontSize}" />
@@ -207,13 +229,13 @@
                 </ControlTemplate>
             </Setter>
             <Style Selector="^:horizontal-collapsed:first-level">
-                <Setter Property="HorizontalAlignment" Value="Center"></Setter>
+                <Setter Property="HorizontalAlignment" Value="Center" />
                 <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
-                    <Setter Property="IsVisible" Value="False"></Setter>
+                    <Setter Property="IsVisible" Value="False" />
                 </Style>
                 <Style Selector="^ /template/ Rectangle#PART_SeparatorBorder">
-                    <Setter Property="HorizontalAlignment" Value="Center"></Setter>
-                    <Setter Property="Width" Value="12"></Setter>
+                    <Setter Property="HorizontalAlignment" Value="Center" />
+                    <Setter Property="Width" Value="12" />
                 </Style>
             </Style>
         </Style>

From ea447764059c6d9144f0c581a261a391d3dd0218 Mon Sep 17 00:00:00 2001
From: rabbitism <dongbin@irihi.tech>
Date: Wed, 14 Feb 2024 21:52:50 +0800
Subject: [PATCH 2/2] feat: make tooltip utilize header template.

---
 src/Ursa.Themes.Semi/Controls/NavMenu.axaml | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/Ursa.Themes.Semi/Controls/NavMenu.axaml b/src/Ursa.Themes.Semi/Controls/NavMenu.axaml
index c88c81c..d769a30 100644
--- a/src/Ursa.Themes.Semi/Controls/NavMenu.axaml
+++ b/src/Ursa.Themes.Semi/Controls/NavMenu.axaml
@@ -166,7 +166,11 @@
         <Style Selector="^:horizontal-collapsed:first-level">
             <Setter Property="HorizontalAlignment" Value="Left" />
             <Style Selector="^ /template/ Border#PART_Border">
-                <Setter Property="ToolTip.Tip" Value="{Binding Header, RelativeSource={RelativeSource TemplatedParent}}" />
+                <Setter Property="ToolTip.Tip" >
+                    <Template>
+                        <ContentPresenter Content="{TemplateBinding u:NavMenuItem.Header}" ContentTemplate="{TemplateBinding u:NavMenuItem.HeaderTemplate}"></ContentPresenter>
+                    </Template>
+                </Setter>
                 <Setter Property="ToolTip.ShowDelay" Value="0" />
                 <Setter Property="HorizontalAlignment" Value="Left" />
             </Style>