From 331141197d458ae0e846b19c453314f1c5f69f6e Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Thu, 30 Apr 2026 14:53:38 +0800
Subject: [PATCH] Enhance DrawerPage (#813)

* feat: enhance navigation and UI structure in MainView and Application.

* fix: using ContentPreseter and add HeaderTemplate.

* feat: add locale resource for navigation drawer toggle button text.

* feat: add customizations for DrawerPageDemo.

* fix: fix DrawerPage title vertical alignment to Center.

* Update DrawerPageDemo.axaml

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update DrawerPageDemo.axaml.cs

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* fix: fix bottom bar styles.

* fix: update border background color in DrawerPageDemo.axaml.

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 .../Pages/DrawerPageDemo.axaml                |  93 +++++++++++-----
 .../Pages/DrawerPageDemo.axaml.cs             |  49 +--------
 src/Semi.Avalonia/Controls/DrawerPage.axaml   | 100 ++++++++----------
 src/Semi.Avalonia/Locale/de-de.axaml          |   4 +-
 src/Semi.Avalonia/Locale/en-gb.axaml          |   4 +-
 src/Semi.Avalonia/Locale/en-us.axaml          |   4 +-
 src/Semi.Avalonia/Locale/es-es.axaml          |   4 +-
 src/Semi.Avalonia/Locale/fr-fr.axaml          |   2 +
 src/Semi.Avalonia/Locale/it-ch.axaml          |   4 +-
 src/Semi.Avalonia/Locale/it-it.axaml          |   4 +-
 src/Semi.Avalonia/Locale/ja-jp.axaml          |   4 +-
 src/Semi.Avalonia/Locale/ko-kr.axaml          |   4 +-
 src/Semi.Avalonia/Locale/nl-be.axaml          |   4 +-
 src/Semi.Avalonia/Locale/nl-nl.axaml          |   4 +-
 src/Semi.Avalonia/Locale/pl-pl.axaml          |   4 +-
 src/Semi.Avalonia/Locale/ru-ru.axaml          |   4 +-
 src/Semi.Avalonia/Locale/uk-ua.axaml          |   4 +-
 src/Semi.Avalonia/Locale/zh-cn.axaml          |   4 +-
 src/Semi.Avalonia/Locale/zh-tw.axaml          |   4 +-
 .../Themes/Light/DrawerPage.axaml             |   2 +-
 .../Themes/Shared/DrawerPage.axaml            |   4 +
 21 files changed, 162 insertions(+), 148 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/DrawerPageDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/DrawerPageDemo.axaml
index 0636b90..f5ea1a4 100644
--- a/demo/Semi.Avalonia.Demo/Pages/DrawerPageDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/DrawerPageDemo.axaml
@@ -10,45 +10,84 @@
     <DockPanel>
         <ScrollViewer DockPanel.Dock="Right" Width="260">
             <StackPanel Margin="12" Spacing="8">
-                <TextBlock Text="Configuration" FontWeight="SemiBold" FontSize="16"
-                           Foreground="{DynamicResource SemiColorText0}" />
+                <TextBlock
+                    Theme="{DynamicResource TitleTextBlock}"
+                    Classes="H4"
+                    Text="Configuration" />
 
-                <Button Content="Toggle Drawer"
-                        HorizontalAlignment="Stretch"
-                        Click="OnToggleDrawer" />
-
-                <Separator />
+                <CheckBox Name="ToggleDrawerCheck"
+                          Content="Toggle Drawer" />
 
                 <CheckBox Name="GestureCheck"
                           Content="Gesture Enabled"
-                          IsChecked="True"
-                          IsCheckedChanged="OnGestureChanged" />
-                
-                <ComboBox SelectionChanged="OnLayoutChanged" >
-                    <ComboBoxItem Content="CompactOverlay" />
-                    <ComboBoxItem Content="CompactInline" />
-                    <ComboBoxItem Content="Split" />
-                    <ComboBoxItem Content="Overlay" />
+                          IsChecked="True" />
+
+                <TextBlock Text="Behavior" FontSize="12" />
+                <ComboBox
+                    Name="BehaviorComboBox"
+                    HorizontalAlignment="Stretch"
+                    SelectedIndex="0">
+                    <DrawerBehavior>Auto</DrawerBehavior>
+                    <DrawerBehavior>Flyout</DrawerBehavior>
+                    <DrawerBehavior>Locked</DrawerBehavior>
+                    <DrawerBehavior>Disabled</DrawerBehavior>
                 </ComboBox>
 
-                <Separator />
+                <TextBlock Text="Layout" FontSize="12" />
+                <ComboBox
+                    Name="LayoutComboBox"
+                    HorizontalAlignment="Stretch"
+                    SelectedIndex="0">
+                    <DrawerLayoutBehavior>Overlay</DrawerLayoutBehavior>
+                    <DrawerLayoutBehavior>Split</DrawerLayoutBehavior>
+                    <DrawerLayoutBehavior>CompactOverlay</DrawerLayoutBehavior>
+                    <DrawerLayoutBehavior>CompactInline</DrawerLayoutBehavior>
+                </ComboBox>
 
-                <TextBlock Text="Status" FontWeight="SemiBold" FontSize="14" />
-                <TextBlock Name="StatusText"
-                           Text="Drawer: Closed"
-                           Opacity="0.7"
-                           TextWrapping="Wrap" />
+                <TextBlock Text="Placement" FontSize="12" />
+                <ComboBox
+                    Name="PlacementComboBox"
+                    HorizontalAlignment="Stretch"
+                    SelectedIndex="0">
+                    <DrawerPlacement>Left</DrawerPlacement>
+                    <DrawerPlacement>Right</DrawerPlacement>
+                    <DrawerPlacement>Top</DrawerPlacement>
+                    <DrawerPlacement>Bottom</DrawerPlacement>
+                </ComboBox>
+
+                <TextBlock Text="Compact Drawer Length" FontSize="12" />
+                <StackPanel Orientation="Horizontal" Spacing="8">
+                    <Slider Name="CompactDrawerLengthSlider"
+                            Minimum="0" Maximum="250" Value="80"
+                            TickFrequency="1"
+                            IsSnapToTickEnabled="True"
+                            Width="150" />
+                    <TextBlock Text="{Binding #CompactDrawerLengthSlider.Value}" />
+                </StackPanel>
+                <TextBlock Text="Drawer Length" FontSize="12" />
+                <StackPanel Orientation="Horizontal" Spacing="8">
+                    <Slider Name="DrawerLengthSlider"
+                            Minimum="150" Maximum="400" Value="260"
+                            TickFrequency="1"
+                            IsSnapToTickEnabled="True"
+                            Width="150" />
+                    <TextBlock Text="{Binding #DrawerLengthSlider.Value}" />
+                </StackPanel>
             </StackPanel>
         </ScrollViewer>
 
-        <Border DockPanel.Dock="Right" Width="1" Background="{DynamicResource SemiColorBackground0}" />
-        
+        <Border DockPanel.Dock="Right" Width="1" Background="{DynamicResource SemiColorBorder}" />
+
         <DrawerPage Name="DemoDrawer"
                     Margin="12"
                     Header="First Look"
-                    DrawerLayoutBehavior="Overlay"
-                    CompactDrawerLength="80"
-                    DrawerLength="250">
+                    IsOpen="{Binding #ToggleDrawerCheck.IsChecked}"
+                    IsGestureEnabled="{Binding #GestureCheck.IsChecked}"
+                    DrawerBehavior="{Binding #BehaviorComboBox.SelectedItem}"
+                    DrawerLayoutBehavior="{Binding #LayoutComboBox.SelectedItem}"
+                    DrawerPlacement="{Binding #PlacementComboBox.SelectedItem}"
+                    CompactDrawerLength="{Binding #CompactDrawerLengthSlider.Value}"
+                    DrawerLength="{Binding #DrawerLengthSlider.Value}">
             <DrawerPage.DrawerHeader>
                 <TextBlock Text="Menu" Margin="16" FontSize="18" FontWeight="SemiBold" Foreground="{DynamicResource SemiColorPrimary}" />
             </DrawerPage.DrawerHeader>
@@ -74,4 +113,4 @@
             </DrawerPage.Content>
         </DrawerPage>
     </DockPanel>
-</UserControl>
\ No newline at end of file
+</UserControl>
diff --git a/demo/Semi.Avalonia.Demo/Pages/DrawerPageDemo.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/DrawerPageDemo.axaml.cs
index 4428e53..17a1dae 100644
--- a/demo/Semi.Avalonia.Demo/Pages/DrawerPageDemo.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/DrawerPageDemo.axaml.cs
@@ -1,8 +1,6 @@
-using System;
-using System.Linq;
+using System.Linq;
 using Avalonia.Controls;
 using Avalonia.Input.GestureRecognizers;
-using Avalonia.Interactivity;
 using Avalonia.Layout;
 
 namespace Semi.Avalonia.Demo.Pages;
@@ -15,32 +13,6 @@ public partial class DrawerPageDemo : UserControl
         EnableMouseSwipeGesture(DemoDrawer);
     }
 
-    protected override void OnLoaded(RoutedEventArgs e)
-    {
-        base.OnLoaded(e);
-        DemoDrawer.Opened += OnDrawerStatusChanged;
-        DemoDrawer.Closed += OnDrawerStatusChanged;
-    }
-
-    protected override void OnUnloaded(RoutedEventArgs e)
-    {
-        base.OnUnloaded(e);
-        DemoDrawer.Opened -= OnDrawerStatusChanged;
-        DemoDrawer.Closed -= OnDrawerStatusChanged;
-    }
-
-    private void OnDrawerStatusChanged(object? sender, EventArgs e) => UpdateStatus();
-
-    private void OnToggleDrawer(object? sender, RoutedEventArgs e)
-    {
-        DemoDrawer.IsOpen = !DemoDrawer.IsOpen;
-    }
-
-    private void OnGestureChanged(object? sender, RoutedEventArgs e)
-    {
-        DemoDrawer.IsGestureEnabled = GestureCheck.IsChecked == true;
-    }
-
     private void OnMenuSelectionChanged(object? sender, SelectionChangedEventArgs e)
     {
         if (DrawerMenu.SelectedItem is ListBoxItem item)
@@ -62,11 +34,6 @@ public partial class DrawerPageDemo : UserControl
         }
     }
 
-    private void UpdateStatus()
-    {
-        StatusText.Text = $"Drawer: {(DemoDrawer.IsOpen ? "Open" : "Closed")}";
-    }
-
     private static void EnableMouseSwipeGesture(Control control)
     {
         var recognizer = control.GestureRecognizers
@@ -75,16 +42,4 @@ public partial class DrawerPageDemo : UserControl
 
         recognizer?.IsMouseEnabled = true;
     }
-
-    private void OnLayoutChanged(object? sender, SelectionChangedEventArgs e)
-    {
-        DemoDrawer.DrawerLayoutBehavior = (sender as ComboBox)?.SelectedIndex switch
-        {
-            0 => DrawerLayoutBehavior.CompactOverlay,
-            1 => DrawerLayoutBehavior.CompactInline,
-            2 => DrawerLayoutBehavior.Split,
-            3 => DrawerLayoutBehavior.Overlay,
-            _ => DrawerLayoutBehavior.CompactOverlay
-        };
-    }
-}
\ No newline at end of file
+}
diff --git a/src/Semi.Avalonia/Controls/DrawerPage.axaml b/src/Semi.Avalonia/Controls/DrawerPage.axaml
index 556a7e2..c6ffced 100644
--- a/src/Semi.Avalonia/Controls/DrawerPage.axaml
+++ b/src/Semi.Avalonia/Controls/DrawerPage.axaml
@@ -20,27 +20,23 @@
                             <!--  Compact-mode toggle: visible only in CompactOverlay/CompactInline.  -->
                             <ToggleButton
                                 Name="PART_CompactPaneToggle"
+                                DockPanel.Dock="Top"
+                                AutomationProperties.Name="Toggle navigation drawer"
+                                ToolTip.Tip="{DynamicResource STRING_DRAWERPAGE_TOGGLE_NAVIGATION_DRAWER}"
                                 Width="{DynamicResource ButtonDefaultHeight}"
                                 Height="{DynamicResource ButtonDefaultHeight}"
                                 HorizontalAlignment="Left"
-                                AutomationProperties.Name="Toggle navigation drawer"
                                 Background="Transparent"
-                                DockPanel.Dock="Top"
                                 IsChecked="{Binding #PART_SplitView.IsPaneOpen, Mode=TwoWay}"
-                                IsVisible="False"
-                                ToolTip.Tip="Toggle navigation drawer">
+                                IsVisible="False">
                                 <Panel>
                                     <PathIcon
-                                        HorizontalAlignment="Center"
-                                        VerticalAlignment="Center"
                                         Data="{DynamicResource DrawerPageMenuGlyph}"
                                         Foreground="{DynamicResource DrawerPagePaneButtonForeground}"
                                         IsVisible="{TemplateBinding DrawerIcon, Converter={x:Static ObjectConverters.IsNull}}"
                                         Theme="{DynamicResource InnerPathIcon}" />
                                     <ContentPresenter
                                         Name="PART_CompactPaneIconPresenter"
-                                        HorizontalAlignment="Center"
-                                        VerticalAlignment="Center"
                                         Content="{TemplateBinding DrawerIcon}"
                                         ContentTemplate="{TemplateBinding DrawerIconTemplate}"
                                         Foreground="{DynamicResource DrawerPagePaneButtonForeground}"
@@ -49,117 +45,105 @@
                             </ToggleButton>
                             <ContentPresenter
                                 Name="PART_DrawerHeader"
+                                DockPanel.Dock="Top"
                                 Background="{TemplateBinding DrawerHeaderBackground}"
                                 Content="{TemplateBinding DrawerHeader}"
                                 ContentTemplate="{TemplateBinding DrawerHeaderTemplate}"
-                                DockPanel.Dock="Top"
-                                IsVisible="{TemplateBinding DrawerHeader,
-                                                            Converter={x:Static ObjectConverters.IsNotNull}}" />
+                                IsVisible="{TemplateBinding DrawerHeader, Converter={x:Static ObjectConverters.IsNotNull}}" />
                             <ContentPresenter
                                 Name="PART_DrawerFooter"
+                                DockPanel.Dock="Bottom"
                                 Background="{TemplateBinding DrawerFooterBackground}"
                                 Content="{TemplateBinding DrawerFooter}"
                                 ContentTemplate="{TemplateBinding DrawerFooterTemplate}"
-                                DockPanel.Dock="Bottom"
-                                IsVisible="{TemplateBinding DrawerFooter,
-                                                            Converter={x:Static ObjectConverters.IsNotNull}}" />
+                                IsVisible="{TemplateBinding DrawerFooter, Converter={x:Static ObjectConverters.IsNotNull}}" />
                             <ContentPresenter
                                 Name="PART_DrawerPresenter"
-                                HorizontalContentAlignment="Stretch"
-                                VerticalContentAlignment="Stretch"
                                 Content="{TemplateBinding Drawer}"
                                 ContentTemplate="{TemplateBinding DrawerTemplate}" />
                         </DockPanel>
                     </SplitView.Pane>
-                    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
+                    <Panel>
                         <DockPanel Name="PART_ContentDock">
                             <Border
                                 Name="PART_TopBar"
+                                DockPanel.Dock="Top"
                                 Height="{DynamicResource DrawerPageTopBarMinHeight}"
-                                Padding="5"
-                                Background="{DynamicResource DrawerPageTopBarBackground}"
-                                DockPanel.Dock="Top">
-                                <DockPanel HorizontalAlignment="Stretch">
+                                Background="{DynamicResource DrawerPageTopBarBackground}">
+                                <DockPanel>
                                     <ToggleButton
                                         Name="PART_PaneButton"
+                                        DockPanel.Dock="Left"
+                                        AutomationProperties.Name="Toggle navigation drawer"
+                                        ToolTip.Tip="{DynamicResource STRING_DRAWERPAGE_TOGGLE_NAVIGATION_DRAWER}"
                                         Width="{DynamicResource ButtonDefaultHeight}"
                                         Height="{DynamicResource ButtonDefaultHeight}"
-                                        AutomationProperties.Name="Toggle navigation drawer"
                                         Background="Transparent"
-                                        DockPanel.Dock="Left"
-                                        IsChecked="{Binding #PART_SplitView.IsPaneOpen, Mode=TwoWay}"
-                                        ToolTip.Tip="Toggle navigation drawer">
+                                        IsChecked="{Binding #PART_SplitView.IsPaneOpen, Mode=TwoWay}">
                                         <Panel>
                                             <PathIcon
-                                                HorizontalAlignment="Center"
-                                                VerticalAlignment="Center"
                                                 Data="{DynamicResource DrawerPageMenuGlyph}"
                                                 Foreground="{DynamicResource DrawerPagePaneButtonForeground}"
                                                 IsVisible="{TemplateBinding DrawerIcon, Converter={x:Static ObjectConverters.IsNull}}"
                                                 Theme="{DynamicResource InnerPathIcon}" />
                                             <ContentPresenter
                                                 Name="PART_PaneIconPresenter"
-                                                HorizontalAlignment="Center"
-                                                VerticalAlignment="Center"
                                                 Content="{TemplateBinding DrawerIcon}"
                                                 ContentTemplate="{TemplateBinding DrawerIconTemplate}"
                                                 Foreground="{DynamicResource DrawerPagePaneButtonForeground}"
                                                 IsVisible="{TemplateBinding DrawerIcon, Converter={x:Static ObjectConverters.IsNotNull}}" />
                                         </Panel>
                                     </ToggleButton>
-                                    <ContentControl
+                                    <ContentPresenter
                                         Name="PART_TitlePresenter"
-                                        Margin="8,0,0,0"
-                                        VerticalAlignment="Center"
+                                        Margin="{DynamicResource DrawerPageTitleMargin}"
                                         VerticalContentAlignment="Center"
                                         Content="{TemplateBinding Header}"
-                                        FontSize="16"
-                                        FontWeight="SemiBold"
-                                        IsVisible="{TemplateBinding Header,
-                                                                    Converter={x:Static ObjectConverters.IsNotNull}}" />
+                                        ContentTemplate="{TemplateBinding HeaderTemplate}"
+                                        FontSize="{DynamicResource DrawerPageTitleFontSize}"
+                                        FontWeight="{DynamicResource DrawerPageTitleFontWeight}"
+                                        IsVisible="{TemplateBinding Header, Converter={x:Static ObjectConverters.IsNotNull}}" />
                                 </DockPanel>
                             </Border>
                             <Border
                                 Name="PART_BottomBar"
-                                Height="{DynamicResource DrawerPageTopBarMinHeight}"
-                                Padding="5"
-                                Background="{DynamicResource DrawerPageTopBarBackground}"
                                 DockPanel.Dock="Bottom"
+                                Height="{DynamicResource DrawerPageTopBarMinHeight}"
+                                Background="{DynamicResource DrawerPageTopBarBackground}"
                                 IsVisible="False">
-                                <DockPanel HorizontalAlignment="Stretch">
+                                <DockPanel>
                                     <ToggleButton
                                         Name="PART_BottomPaneButton"
-                                        AutomationProperties.Name="Toggle navigation drawer"
-                                        Background="Transparent"
                                         DockPanel.Dock="Left"
-                                        IsChecked="{Binding #PART_SplitView.IsPaneOpen, Mode=TwoWay}"
-                                        ToolTip.Tip="Toggle navigation drawer">
+                                        AutomationProperties.Name="Toggle navigation drawer"
+                                        ToolTip.Tip="{DynamicResource STRING_DRAWERPAGE_TOGGLE_NAVIGATION_DRAWER}"
+                                        Width="{DynamicResource ButtonDefaultHeight}"
+                                        Height="{DynamicResource ButtonDefaultHeight}"
+                                        Background="Transparent"
+                                        IsChecked="{Binding #PART_SplitView.IsPaneOpen, Mode=TwoWay}">
                                         <Panel>
                                             <PathIcon
-                                                HorizontalAlignment="Center"
-                                                VerticalAlignment="Center"
-                                                Data="{DynamicResource DrawerPaneButtonIcon}"
+                                                Data="{DynamicResource DrawerPageMenuGlyph}"
+                                                Foreground="{DynamicResource DrawerPagePaneButtonForeground}"
                                                 IsVisible="{TemplateBinding DrawerIcon, Converter={x:Static ObjectConverters.IsNull}}"
                                                 Theme="{DynamicResource InnerPathIcon}" />
                                             <ContentPresenter
                                                 Name="PART_BottomPaneIconPresenter"
-                                                HorizontalAlignment="Center"
-                                                VerticalAlignment="Center"
                                                 Content="{TemplateBinding DrawerIcon}"
                                                 ContentTemplate="{TemplateBinding DrawerIconTemplate}"
+                                                Foreground="{DynamicResource DrawerPagePaneButtonForeground}"
                                                 IsVisible="{TemplateBinding DrawerIcon, Converter={x:Static ObjectConverters.IsNotNull}}" />
                                         </Panel>
                                     </ToggleButton>
-                                    <ContentControl
+                                    <ContentPresenter
                                         Name="PART_BottomTitlePresenter"
-                                        Margin="8,0,0,0"
-                                        VerticalAlignment="Center"
+                                        Margin="{DynamicResource DrawerPageTitleMargin}"
                                         VerticalContentAlignment="Center"
                                         Content="{TemplateBinding Header}"
-                                        FontSize="16"
-                                        FontWeight="SemiBold"
-                                        IsVisible="{TemplateBinding Header,
-                                                                    Converter={x:Static ObjectConverters.IsNotNull}}" />
+                                        ContentTemplate="{TemplateBinding HeaderTemplate}"
+                                        FontSize="{DynamicResource DrawerPageTitleFontSize}"
+                                        FontWeight="{DynamicResource DrawerPageTitleFontWeight}"
+                                        IsVisible="{TemplateBinding Header, Converter={x:Static ObjectConverters.IsNotNull}}" />
                                 </DockPanel>
                             </Border>
                             <ContentPresenter
@@ -178,7 +162,7 @@
                             Background="{TemplateBinding BackdropBrush}"
                             IsHitTestVisible="False"
                             IsVisible="False" />
-                    </Grid>
+                    </Panel>
                 </SplitView>
             </ControlTemplate>
         </Setter>
@@ -249,4 +233,4 @@
         </Style>
 
     </ControlTheme>
-</ResourceDictionary>
\ No newline at end of file
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Locale/de-de.axaml b/src/Semi.Avalonia/Locale/de-de.axaml
index ebb4b3e..d4d70de 100644
--- a/src/Semi.Avalonia/Locale/de-de.axaml
+++ b/src/Semi.Avalonia/Locale/de-de.axaml
@@ -14,6 +14,8 @@
     <x:String x:Key="STRING_MENU_CUT">Ausschneiden</x:String>
     <x:String x:Key="STRING_MENU_COPY">Kopieren</x:String>
     <x:String x:Key="STRING_MENU_PASTE">Einfügen</x:String>
+    <!--  DrawerPage  -->
+    <x:String x:Key="STRING_DRAWERPAGE_TOGGLE_NAVIGATION_DRAWER">Navigationsleiste umschalten</x:String>
     <!--  ManagedFileChooser  -->
     <x:String x:Key="STRING_CHOOSER_FILE_NAME">Dateiname</x:String>
     <x:String x:Key="STRING_CHOOSER_SHOW_HIDDEN_FILES">Ausgeblendete Elemente anzeigen</x:String>
@@ -24,4 +26,4 @@
     <x:String x:Key="STRING_CHOOSER_TYPE_COLUMN">Typ</x:String>
     <x:String x:Key="STRING_CHOOSER_SIZE_COLUMN">Größe</x:String>
     <x:String x:Key="STRING_CHOOSER_PROMPT_FILE_ALREADY_EXISTS">Die Datei {0} existiert bereits. Möchten Sie sie ersetzen?</x:String>
-</ResourceDictionary>
\ No newline at end of file
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Locale/en-gb.axaml b/src/Semi.Avalonia/Locale/en-gb.axaml
index fb01705..5ebfb77 100644
--- a/src/Semi.Avalonia/Locale/en-gb.axaml
+++ b/src/Semi.Avalonia/Locale/en-gb.axaml
@@ -14,6 +14,8 @@
     <x:String x:Key="STRING_MENU_CUT">Cut</x:String>
     <x:String x:Key="STRING_MENU_COPY">Copy</x:String>
     <x:String x:Key="STRING_MENU_PASTE">Paste</x:String>
+    <!--  DrawerPage  -->
+    <x:String x:Key="STRING_DRAWERPAGE_TOGGLE_NAVIGATION_DRAWER">Toggle navigation drawer</x:String>
     <!--  ManagedFileChooser  -->
     <x:String x:Key="STRING_CHOOSER_FILE_NAME">File name</x:String>
     <x:String x:Key="STRING_CHOOSER_SHOW_HIDDEN_FILES">Show hidden files</x:String>
@@ -24,4 +26,4 @@
     <x:String x:Key="STRING_CHOOSER_TYPE_COLUMN">Type</x:String>
     <x:String x:Key="STRING_CHOOSER_SIZE_COLUMN">Size</x:String>
     <x:String x:Key="STRING_CHOOSER_PROMPT_FILE_ALREADY_EXISTS">{0} already exists. Do you want to replace it?</x:String>
-</ResourceDictionary>
\ No newline at end of file
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Locale/en-us.axaml b/src/Semi.Avalonia/Locale/en-us.axaml
index 8d7d9ba..359770e 100644
--- a/src/Semi.Avalonia/Locale/en-us.axaml
+++ b/src/Semi.Avalonia/Locale/en-us.axaml
@@ -14,6 +14,8 @@
     <x:String x:Key="STRING_MENU_CUT">Cut</x:String>
     <x:String x:Key="STRING_MENU_COPY">Copy</x:String>
     <x:String x:Key="STRING_MENU_PASTE">Paste</x:String>
+    <!--  DrawerPage  -->
+    <x:String x:Key="STRING_DRAWERPAGE_TOGGLE_NAVIGATION_DRAWER">Toggle navigation drawer</x:String>
     <!--  ManagedFileChooser  -->
     <x:String x:Key="STRING_CHOOSER_FILE_NAME">File name</x:String>
     <x:String x:Key="STRING_CHOOSER_SHOW_HIDDEN_FILES">Show hidden files</x:String>
@@ -24,4 +26,4 @@
     <x:String x:Key="STRING_CHOOSER_TYPE_COLUMN">Type</x:String>
     <x:String x:Key="STRING_CHOOSER_SIZE_COLUMN">Size</x:String>
     <x:String x:Key="STRING_CHOOSER_PROMPT_FILE_ALREADY_EXISTS">{0} already exists. Do you want to replace it?</x:String>
-</ResourceDictionary>
\ No newline at end of file
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Locale/es-es.axaml b/src/Semi.Avalonia/Locale/es-es.axaml
index 16367f7..fd6d3cf 100644
--- a/src/Semi.Avalonia/Locale/es-es.axaml
+++ b/src/Semi.Avalonia/Locale/es-es.axaml
@@ -14,6 +14,8 @@
     <x:String x:Key="STRING_MENU_CUT">Cortar</x:String>
     <x:String x:Key="STRING_MENU_COPY">Copiar</x:String>
     <x:String x:Key="STRING_MENU_PASTE">Pegar</x:String>
+    <!--  DrawerPage  -->
+    <x:String x:Key="STRING_DRAWERPAGE_TOGGLE_NAVIGATION_DRAWER">Alternar panel de navegación</x:String>
     <!--  ManagedFileChooser  -->
     <x:String x:Key="STRING_CHOOSER_FILE_NAME">Nombre de fichero</x:String>
     <x:String x:Key="STRING_CHOOSER_SHOW_HIDDEN_FILES">Mostrar ficheros ocultos</x:String>
@@ -24,4 +26,4 @@
     <x:String x:Key="STRING_CHOOSER_TYPE_COLUMN">Tipo</x:String>
     <x:String x:Key="STRING_CHOOSER_SIZE_COLUMN">Tamaño</x:String>
     <x:String x:Key="STRING_CHOOSER_PROMPT_FILE_ALREADY_EXISTS">{0} ya existe. Quieres reemplazarlo?</x:String>
-</ResourceDictionary>
\ No newline at end of file
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Locale/fr-fr.axaml b/src/Semi.Avalonia/Locale/fr-fr.axaml
index 5a3b207..87c744b 100644
--- a/src/Semi.Avalonia/Locale/fr-fr.axaml
+++ b/src/Semi.Avalonia/Locale/fr-fr.axaml
@@ -14,6 +14,8 @@
     <x:String x:Key="STRING_MENU_CUT">Couper</x:String>
     <x:String x:Key="STRING_MENU_COPY">Copier</x:String>
     <x:String x:Key="STRING_MENU_PASTE">Coller</x:String>
+    <!--  DrawerPage  -->
+    <x:String x:Key="STRING_DRAWERPAGE_TOGGLE_NAVIGATION_DRAWER">Basculer le volet de navigation</x:String>
     <!--  ManagedFileChooser  -->
     <x:String x:Key="STRING_CHOOSER_FILE_NAME">Nom du fichier</x:String>
     <x:String x:Key="STRING_CHOOSER_SHOW_HIDDEN_FILES">Afficher les fichiers cachés</x:String>
diff --git a/src/Semi.Avalonia/Locale/it-ch.axaml b/src/Semi.Avalonia/Locale/it-ch.axaml
index cedcb1b..d93efa3 100644
--- a/src/Semi.Avalonia/Locale/it-ch.axaml
+++ b/src/Semi.Avalonia/Locale/it-ch.axaml
@@ -14,6 +14,8 @@
     <x:String x:Key="STRING_MENU_CUT">Taglia</x:String>
     <x:String x:Key="STRING_MENU_COPY">Copia</x:String>
     <x:String x:Key="STRING_MENU_PASTE">Incolla</x:String>
+    <!--  DrawerPage  -->
+    <x:String x:Key="STRING_DRAWERPAGE_TOGGLE_NAVIGATION_DRAWER">Attiva/disattiva riquadro di navigazione</x:String>
     <!--  ManagedFileChooser  -->
     <x:String x:Key="STRING_CHOOSER_FILE_NAME">Nome file</x:String>
     <x:String x:Key="STRING_CHOOSER_SHOW_HIDDEN_FILES">Mostra file nascosti</x:String>
@@ -24,4 +26,4 @@
     <x:String x:Key="STRING_CHOOSER_TYPE_COLUMN">Tipo</x:String>
     <x:String x:Key="STRING_CHOOSER_SIZE_COLUMN">Dimensione</x:String>
     <x:String x:Key="STRING_CHOOSER_PROMPT_FILE_ALREADY_EXISTS">{0} è già esistente. Sovrascriverlo?</x:String>
-</ResourceDictionary>
\ No newline at end of file
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Locale/it-it.axaml b/src/Semi.Avalonia/Locale/it-it.axaml
index dc7ef63..6a4a9bf 100644
--- a/src/Semi.Avalonia/Locale/it-it.axaml
+++ b/src/Semi.Avalonia/Locale/it-it.axaml
@@ -14,6 +14,8 @@
     <x:String x:Key="STRING_MENU_CUT">Taglia</x:String>
     <x:String x:Key="STRING_MENU_COPY">Copia</x:String>
     <x:String x:Key="STRING_MENU_PASTE">Incolla</x:String>
+    <!--  DrawerPage  -->
+    <x:String x:Key="STRING_DRAWERPAGE_TOGGLE_NAVIGATION_DRAWER">Attiva/disattiva riquadro di navigazione</x:String>
     <!--  ManagedFileChooser  -->
     <x:String x:Key="STRING_CHOOSER_FILE_NAME">Nome file</x:String>
     <x:String x:Key="STRING_CHOOSER_SHOW_HIDDEN_FILES">Mostra file nascosti</x:String>
@@ -24,4 +26,4 @@
     <x:String x:Key="STRING_CHOOSER_TYPE_COLUMN">Tipo</x:String>
     <x:String x:Key="STRING_CHOOSER_SIZE_COLUMN">Dimensione</x:String>
     <x:String x:Key="STRING_CHOOSER_PROMPT_FILE_ALREADY_EXISTS">{0} è già esistente. Sovrascriverlo?</x:String>
-</ResourceDictionary>
\ No newline at end of file
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Locale/ja-jp.axaml b/src/Semi.Avalonia/Locale/ja-jp.axaml
index c9dbd6b..1f14ff5 100644
--- a/src/Semi.Avalonia/Locale/ja-jp.axaml
+++ b/src/Semi.Avalonia/Locale/ja-jp.axaml
@@ -14,6 +14,8 @@
     <x:String x:Key="STRING_MENU_CUT">切り取り</x:String>
     <x:String x:Key="STRING_MENU_COPY">コピー</x:String>
     <x:String x:Key="STRING_MENU_PASTE">貼り付け</x:String>
+    <!--  DrawerPage  -->
+    <x:String x:Key="STRING_DRAWERPAGE_TOGGLE_NAVIGATION_DRAWER">ナビゲーション ドロワーを切り替える</x:String>
     <!--  ManagedFileChooser  -->
     <x:String x:Key="STRING_CHOOSER_FILE_NAME">ファイル名</x:String>
     <x:String x:Key="STRING_CHOOSER_SHOW_HIDDEN_FILES">隠しファイルを表示</x:String>
@@ -24,4 +26,4 @@
     <x:String x:Key="STRING_CHOOSER_TYPE_COLUMN">種類</x:String>
     <x:String x:Key="STRING_CHOOSER_SIZE_COLUMN">サイズ</x:String>
     <x:String x:Key="STRING_CHOOSER_PROMPT_FILE_ALREADY_EXISTS">{0} はすでに存在します。置き換えますか？</x:String>
-</ResourceDictionary>
\ No newline at end of file
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Locale/ko-kr.axaml b/src/Semi.Avalonia/Locale/ko-kr.axaml
index 2592013..e288ab6 100644
--- a/src/Semi.Avalonia/Locale/ko-kr.axaml
+++ b/src/Semi.Avalonia/Locale/ko-kr.axaml
@@ -14,6 +14,8 @@
     <x:String x:Key="STRING_MENU_CUT">잘라내기</x:String>
     <x:String x:Key="STRING_MENU_COPY">복사</x:String>
     <x:String x:Key="STRING_MENU_PASTE">붙여넣기</x:String>
+    <!--  DrawerPage  -->
+    <x:String x:Key="STRING_DRAWERPAGE_TOGGLE_NAVIGATION_DRAWER">탐색 창 전환</x:String>
     <!-- ManagedFileChooser -->
     <x:String x:Key="STRING_CHOOSER_FILE_NAME">파일 이름</x:String>
     <x:String x:Key="STRING_CHOOSER_SHOW_HIDDEN_FILES">숨긴 파일 표시</x:String>
@@ -24,4 +26,4 @@
     <x:String x:Key="STRING_CHOOSER_TYPE_COLUMN">유형</x:String>
     <x:String x:Key="STRING_CHOOSER_SIZE_COLUMN">크기</x:String>
     <x:String x:Key="STRING_CHOOSER_PROMPT_FILE_ALREADY_EXISTS">{0}이(가) 이미 있습니다. 바꾸시겠습니까?</x:String>
-</ResourceDictionary>
\ No newline at end of file
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Locale/nl-be.axaml b/src/Semi.Avalonia/Locale/nl-be.axaml
index 2eed872..9106f63 100644
--- a/src/Semi.Avalonia/Locale/nl-be.axaml
+++ b/src/Semi.Avalonia/Locale/nl-be.axaml
@@ -14,6 +14,8 @@
     <x:String x:Key="STRING_MENU_CUT">Knippen</x:String>
     <x:String x:Key="STRING_MENU_COPY">Kopiëren</x:String>
     <x:String x:Key="STRING_MENU_PASTE">Plakken</x:String>
+    <!--  DrawerPage  -->
+    <x:String x:Key="STRING_DRAWERPAGE_TOGGLE_NAVIGATION_DRAWER">Navigatievenster openen of sluiten</x:String>
     <!-- ManagedFileChooser -->
     <x:String x:Key="STRING_CHOOSER_FILE_NAME">Bestandsnaam</x:String>
     <x:String x:Key="STRING_CHOOSER_SHOW_HIDDEN_FILES">Toon verborgen bestanden</x:String>
@@ -24,4 +26,4 @@
     <x:String x:Key="STRING_CHOOSER_TYPE_COLUMN">Type</x:String>
     <x:String x:Key="STRING_CHOOSER_SIZE_COLUMN">Grootte</x:String>
     <x:String x:Key="STRING_CHOOSER_PROMPT_FILE_ALREADY_EXISTS">{0} bestaat al. Wilt u het vervangen?</x:String>
-</ResourceDictionary>
\ No newline at end of file
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Locale/nl-nl.axaml b/src/Semi.Avalonia/Locale/nl-nl.axaml
index 1ff8571..863836d 100644
--- a/src/Semi.Avalonia/Locale/nl-nl.axaml
+++ b/src/Semi.Avalonia/Locale/nl-nl.axaml
@@ -14,6 +14,8 @@
     <x:String x:Key="STRING_MENU_CUT">Knippen</x:String>
     <x:String x:Key="STRING_MENU_COPY">Kopiëren</x:String>
     <x:String x:Key="STRING_MENU_PASTE">Plakken</x:String>
+    <!--  DrawerPage  -->
+    <x:String x:Key="STRING_DRAWERPAGE_TOGGLE_NAVIGATION_DRAWER">Navigatievenster openen of sluiten</x:String>
     <!-- ManagedFileChooser -->
     <x:String x:Key="STRING_CHOOSER_FILE_NAME">Bestandsnaam</x:String>
     <x:String x:Key="STRING_CHOOSER_SHOW_HIDDEN_FILES">Toon verborgen bestanden</x:String>
@@ -24,4 +26,4 @@
     <x:String x:Key="STRING_CHOOSER_TYPE_COLUMN">Type</x:String>
     <x:String x:Key="STRING_CHOOSER_SIZE_COLUMN">Grootte</x:String>
     <x:String x:Key="STRING_CHOOSER_PROMPT_FILE_ALREADY_EXISTS">{0} bestaat al. Wilt u het vervangen?</x:String>
-</ResourceDictionary>
\ No newline at end of file
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Locale/pl-pl.axaml b/src/Semi.Avalonia/Locale/pl-pl.axaml
index 57310c5..b152bef 100644
--- a/src/Semi.Avalonia/Locale/pl-pl.axaml
+++ b/src/Semi.Avalonia/Locale/pl-pl.axaml
@@ -14,6 +14,8 @@
     <x:String x:Key="STRING_MENU_CUT">Wytnij</x:String>
     <x:String x:Key="STRING_MENU_COPY">Kopiuj</x:String>
     <x:String x:Key="STRING_MENU_PASTE">Wklej</x:String>
+    <!--  DrawerPage  -->
+    <x:String x:Key="STRING_DRAWERPAGE_TOGGLE_NAVIGATION_DRAWER">Przełącz panel nawigacyjny</x:String>
     <!--  ManagedFileChooser  -->
     <x:String x:Key="STRING_CHOOSER_FILE_NAME">Nazwa pliku</x:String>
     <x:String x:Key="STRING_CHOOSER_SHOW_HIDDEN_FILES">Pokaż ukryte pliki</x:String>
@@ -24,4 +26,4 @@
     <x:String x:Key="STRING_CHOOSER_TYPE_COLUMN">Typ</x:String>
     <x:String x:Key="STRING_CHOOSER_SIZE_COLUMN">Rozmiar</x:String>
     <x:String x:Key="STRING_CHOOSER_PROMPT_FILE_ALREADY_EXISTS">{0} już istnieje. Czy zamienić istniejący plik?</x:String>
-</ResourceDictionary>
\ No newline at end of file
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Locale/ru-ru.axaml b/src/Semi.Avalonia/Locale/ru-ru.axaml
index b6388f8..1f6fcd1 100644
--- a/src/Semi.Avalonia/Locale/ru-ru.axaml
+++ b/src/Semi.Avalonia/Locale/ru-ru.axaml
@@ -14,6 +14,8 @@
     <x:String x:Key="STRING_MENU_CUT">Вырезать</x:String>
     <x:String x:Key="STRING_MENU_COPY">Копировать</x:String>
     <x:String x:Key="STRING_MENU_PASTE">Вставить</x:String>
+    <!--  DrawerPage  -->
+    <x:String x:Key="STRING_DRAWERPAGE_TOGGLE_NAVIGATION_DRAWER">Переключить панель навигации</x:String>
     <!--  ManagedFileChooser  -->
     <x:String x:Key="STRING_CHOOSER_FILE_NAME">Имя файла</x:String>
     <x:String x:Key="STRING_CHOOSER_SHOW_HIDDEN_FILES">Показать скрытые файлы</x:String>
@@ -24,4 +26,4 @@
     <x:String x:Key="STRING_CHOOSER_TYPE_COLUMN">Тип</x:String>
     <x:String x:Key="STRING_CHOOSER_SIZE_COLUMN">Размер</x:String>
     <x:String x:Key="STRING_CHOOSER_PROMPT_FILE_ALREADY_EXISTS">{0} уже существует. Вы хотите заменить его?</x:String>
-</ResourceDictionary>
\ No newline at end of file
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Locale/uk-ua.axaml b/src/Semi.Avalonia/Locale/uk-ua.axaml
index b1cd2e5..ea2ed24 100644
--- a/src/Semi.Avalonia/Locale/uk-ua.axaml
+++ b/src/Semi.Avalonia/Locale/uk-ua.axaml
@@ -14,6 +14,8 @@
     <x:String x:Key="STRING_MENU_CUT">Вирізати</x:String>
     <x:String x:Key="STRING_MENU_COPY">Копіювати</x:String>
     <x:String x:Key="STRING_MENU_PASTE">Вставити</x:String>
+    <!--  DrawerPage  -->
+    <x:String x:Key="STRING_DRAWERPAGE_TOGGLE_NAVIGATION_DRAWER">Перемкнути панель навігації</x:String>
     <!--  ManagedFileChooser  -->
     <x:String x:Key="STRING_CHOOSER_FILE_NAME">Ім'я файлу</x:String>
     <x:String x:Key="STRING_CHOOSER_SHOW_HIDDEN_FILES">Показати приховані папки</x:String>
@@ -24,4 +26,4 @@
     <x:String x:Key="STRING_CHOOSER_TYPE_COLUMN">Тип</x:String>
     <x:String x:Key="STRING_CHOOSER_SIZE_COLUMN">Розмір</x:String>
     <x:String x:Key="STRING_CHOOSER_PROMPT_FILE_ALREADY_EXISTS">{0} уже існує. Ви бажаєте замінити його?</x:String>
-</ResourceDictionary>
\ No newline at end of file
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Locale/zh-cn.axaml b/src/Semi.Avalonia/Locale/zh-cn.axaml
index e2489ab..32127c5 100644
--- a/src/Semi.Avalonia/Locale/zh-cn.axaml
+++ b/src/Semi.Avalonia/Locale/zh-cn.axaml
@@ -14,6 +14,8 @@
     <x:String x:Key="STRING_MENU_CUT">剪切</x:String>
     <x:String x:Key="STRING_MENU_COPY">复制</x:String>
     <x:String x:Key="STRING_MENU_PASTE">粘贴</x:String>
+    <!--  DrawerPage  -->
+    <x:String x:Key="STRING_DRAWERPAGE_TOGGLE_NAVIGATION_DRAWER">切换导航抽屉</x:String>
     <!--  ManagedFileChooser  -->
     <x:String x:Key="STRING_CHOOSER_FILE_NAME">文件名</x:String>
     <x:String x:Key="STRING_CHOOSER_SHOW_HIDDEN_FILES">显示隐藏文件</x:String>
@@ -24,4 +26,4 @@
     <x:String x:Key="STRING_CHOOSER_TYPE_COLUMN">类型</x:String>
     <x:String x:Key="STRING_CHOOSER_SIZE_COLUMN">大小</x:String>
     <x:String x:Key="STRING_CHOOSER_PROMPT_FILE_ALREADY_EXISTS">{0} 已经存在。您要替换它吗？</x:String>
-</ResourceDictionary>
\ No newline at end of file
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Locale/zh-tw.axaml b/src/Semi.Avalonia/Locale/zh-tw.axaml
index dd1c99c..3f80fe4 100644
--- a/src/Semi.Avalonia/Locale/zh-tw.axaml
+++ b/src/Semi.Avalonia/Locale/zh-tw.axaml
@@ -14,6 +14,8 @@
     <x:String x:Key="STRING_MENU_CUT">剪下</x:String>
     <x:String x:Key="STRING_MENU_COPY">複製</x:String>
     <x:String x:Key="STRING_MENU_PASTE">貼上</x:String>
+    <!--  DrawerPage  -->
+    <x:String x:Key="STRING_DRAWERPAGE_TOGGLE_NAVIGATION_DRAWER">切換導覽抽屜</x:String>
     <!--  ManagedFileChooser  -->
     <x:String x:Key="STRING_CHOOSER_FILE_NAME">檔案名</x:String>
     <x:String x:Key="STRING_CHOOSER_SHOW_HIDDEN_FILES">顯示隱藏檔案</x:String>
@@ -24,4 +26,4 @@
     <x:String x:Key="STRING_CHOOSER_TYPE_COLUMN">類型</x:String>
     <x:String x:Key="STRING_CHOOSER_SIZE_COLUMN">大小</x:String>
     <x:String x:Key="STRING_CHOOSER_PROMPT_FILE_ALREADY_EXISTS">{0} 已經存在。您要取代它嗎？</x:String>
-</ResourceDictionary>
\ No newline at end of file
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Light/DrawerPage.axaml b/src/Semi.Avalonia/Themes/Light/DrawerPage.axaml
index 518a63f..1a5dc4a 100644
--- a/src/Semi.Avalonia/Themes/Light/DrawerPage.axaml
+++ b/src/Semi.Avalonia/Themes/Light/DrawerPage.axaml
@@ -6,4 +6,4 @@
     <StaticResource x:Key="DrawerPageTopBarBackground" ResourceKey="SemiColorBackground1" />
     <!--  Pane button  -->
     <StaticResource x:Key="DrawerPagePaneButtonForeground" ResourceKey="SemiColorText0" />
-</ResourceDictionary>
\ No newline at end of file
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Shared/DrawerPage.axaml b/src/Semi.Avalonia/Themes/Shared/DrawerPage.axaml
index e637290..0dc29cc 100644
--- a/src/Semi.Avalonia/Themes/Shared/DrawerPage.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/DrawerPage.axaml
@@ -4,4 +4,8 @@
 
     <!--  DrawerPage pane button  -->
     <StaticResource x:Key="DrawerPageMenuGlyph" ResourceKey="SemiIconMenu" />
+
+    <StaticResource x:Key="DrawerPageTitleFontSize" ResourceKey="SemiFontSizeHeader6" />
+    <StaticResource x:Key="DrawerPageTitleFontWeight" ResourceKey="SemiFontWeightBold" />
+    <Thickness x:Key="DrawerPageTitleMargin">8 0 0 0</Thickness>
 </ResourceDictionary>