0.7.5.3

设置界面动画优化

LanMountainDesktop/App.axaml

@@ -25,6 +25,7 @@
         <StyleInclude Source="avares://LanMountainDesktop/Styles/GlassModule.axaml" />
         <StyleInclude Source="avares://LanMountainDesktop/Styles/SettingsAnimations.axaml" />
         <StyleInclude Source="avares://LanMountainDesktop/Styles/SettingsCardStyles.axaml" />
+        <StyleInclude Source="avares://LanMountainDesktop/Styles/NavigationStyles.axaml" />
 
         <Style Selector="Window">
             <Setter Property="FontFamily" Value="{DynamicResource AppFontFamily}" />

LanMountainDesktop/Styles/FluttermotionToken.axaml

@@ -2,10 +2,10 @@
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <Styles.Resources>
         <x:TimeSpan x:Key="FluttermotionToken.Duration.Fast">0:0:0.12</x:TimeSpan>
-        <x:TimeSpan x:Key="FluttermotionToken.Duration.Standard">0:0:0.16</x:TimeSpan>
+        <x:TimeSpan x:Key="FluttermotionToken.Duration.Standard">0:0:0.20</x:TimeSpan>
-        <x:TimeSpan x:Key="FluttermotionToken.Duration.Slow">0:0:0.20</x:TimeSpan>
+        <x:TimeSpan x:Key="FluttermotionToken.Duration.Slow">0:0:0.28</x:TimeSpan>
-        <x:TimeSpan x:Key="FluttermotionToken.Duration.Page">0:0:0.24</x:TimeSpan>
+        <x:TimeSpan x:Key="FluttermotionToken.Duration.Page">0:0:0.32</x:TimeSpan>
-        <x:TimeSpan x:Key="FluttermotionToken.Duration.Intro">0:0:0.32</x:TimeSpan>
+        <x:TimeSpan x:Key="FluttermotionToken.Duration.Intro">0:0:0.40</x:TimeSpan>
 
         <x:Double x:Key="FluttermotionToken.BackdropBlurRadiusStrong">30</x:Double>
     </Styles.Resources>

LanMountainDesktop/Styles/NavigationStyles.axaml

@@ -0,0 +1,151 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:ui="using:FluentAvalonia.UI.Controls"
+        xmlns:fi="using:FluentIcons.Avalonia.Fluent">
+
+    <Styles.Resources>
+        <x:Double x:Key="PaneToggleButtonWidth">40</x:Double>
+        <x:Double x:Key="PaneToggleButtonHeight">40</x:Double>
+        <x:Double x:Key="NavigationViewItemIconBoxHeight">20</x:Double>
+        <GridLength x:Key="PaneToggleButtonHeightGridLength">40</GridLength>
+    </Styles.Resources>
+
+    <Style Selector="Button.pane-toggle-button">
+        <Setter Property="Width" Value="{DynamicResource PaneToggleButtonWidth}" />
+        <Setter Property="Height" Value="{DynamicResource PaneToggleButtonHeight}" />
+        <Setter Property="Padding" Value="0" />
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="BorderThickness" Value="0" />
+        <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="HorizontalAlignment" Value="Center" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border x:Name="LayoutRoot"
+                        Background="{TemplateBinding Background}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                    <Border.Transitions>
+                        <Transitions>
+                            <BrushTransition Property="Background" Duration="0:0:0.083" Easing="0.05,0.75,0.10,1.00" />
+                        </Transitions>
+                    </Border.Transitions>
+                    <Grid x:Name="ContentRoot"
+                          ColumnDefinitions="Auto,*">
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="{DynamicResource PaneToggleButtonHeightGridLength}" />
+                        </Grid.RowDefinitions>
+
+                        <Border Width="{TemplateBinding Width}">
+                            <ContentPresenter x:Name="IconPresenter"
+                                              HorizontalAlignment="Center"
+                                              VerticalAlignment="Center"
+                                              Content="{TemplateBinding Content}" />
+                        </Border>
+
+                        <ContentPresenter x:Name="ContentPresenter"
+                                          VerticalContentAlignment="Center"
+                                          Content="{TemplateBinding Tag}"
+                                          FontSize="{TemplateBinding FontSize}"
+                                          Padding="4,0,0,0"
+                                          Grid.Column="1" />
+                    </Grid>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </Style>
+
+    <Style Selector="Button.pane-toggle-button:pointerover /template/ Border#LayoutRoot">
+        <Setter Property="Background" Value="{DynamicResource SubtleFillColorSecondaryBrush}" />
+    </Style>
+
+    <Style Selector="Button.pane-toggle-button:pressed /template/ Border#LayoutRoot">
+        <Setter Property="Background" Value="{DynamicResource SubtleFillColorTertiaryBrush}" />
+    </Style>
+
+    <Style Selector="Button.nav-back">
+        <Setter Property="Width" Value="{DynamicResource PaneToggleButtonWidth}" />
+        <Setter Property="Height" Value="{DynamicResource PaneToggleButtonHeight}" />
+        <Setter Property="Padding" Value="0" />
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="BorderThickness" Value="0" />
+        <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="HorizontalAlignment" Value="Center" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border x:Name="LayoutRoot"
+                        Background="{TemplateBinding Background}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                    <Border.Transitions>
+                        <Transitions>
+                            <BrushTransition Property="Background" Duration="0:0:0.083" Easing="0.05,0.75,0.10,1.00" />
+                        </Transitions>
+                    </Border.Transitions>
+                    <Grid x:Name="ContentRoot"
+                          ColumnDefinitions="Auto,*">
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="{DynamicResource PaneToggleButtonHeightGridLength}" />
+                        </Grid.RowDefinitions>
+
+                        <Border Width="{TemplateBinding Width}">
+                            <fi:FluentIcon Icon="ChevronLeft"
+                                           IconVariant="Regular"
+                                           FontSize="16"
+                                           HorizontalAlignment="Center"
+                                           VerticalAlignment="Center" />
+                        </Border>
+
+                        <ContentPresenter x:Name="ContentPresenter"
+                                          VerticalContentAlignment="Center"
+                                          Content="{TemplateBinding Content}"
+                                          FontSize="{TemplateBinding FontSize}"
+                                          Padding="4,0,0,0"
+                                          Grid.Column="1" />
+                    </Grid>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </Style>
+
+    <Style Selector="Button.nav-back:pointerover /template/ Border#LayoutRoot">
+        <Setter Property="Background" Value="{DynamicResource SubtleFillColorSecondaryBrush}" />
+    </Style>
+
+    <Style Selector="Button.nav-back:pressed /template/ Border#LayoutRoot">
+        <Setter Property="Background" Value="{DynamicResource SubtleFillColorTertiaryBrush}" />
+    </Style>
+
+    <Style Selector="ui|NavigationView.settings-navigation-view">
+        <Setter Property="Transitions">
+            <Transitions>
+                <DoubleTransition Property="Opacity" Duration="0:0:0.2" Easing="0.05,0.75,0.10,1.00" />
+            </Transitions>
+        </Setter>
+    </Style>
+
+    <Style Selector="ui|NavigationView.settings-navigation-view /template/ Border#NavigationViewBorder">
+        <Setter Property="Transitions">
+            <Transitions>
+                <BrushTransition Property="Background" Duration="0:0:0.167" Easing="0.05,0.75,0.10,1.00" />
+            </Transitions>
+        </Setter>
+    </Style>
+
+    <Style Selector="ui|NavigationViewItem.settings-nav-item">
+        <Setter Property="Transitions">
+            <Transitions>
+                <BrushTransition Property="Background" Duration="0:0:0.083" Easing="0.05,0.75,0.10,1.00" />
+                <TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.083" Easing="0.05,0.75,0.10,1.00" />
+            </Transitions>
+        </Setter>
+    </Style>
+
+    <Style Selector="ui|NavigationViewItem.settings-nav-item:pointerover">
+        <Setter Property="RenderTransform" Value="scale(1.01)" />
+    </Style>
+
+    <Style Selector="ui|NavigationViewItem.settings-nav-item:pressed">
+        <Setter Property="RenderTransform" Value="scale(0.99)" />
+    </Style>
+
+</Styles>

LanMountainDesktop/Styles/SettingsAnimations.axaml

@@ -1,4 +1,4 @@
-<Styles xmlns="https://github.com/avaloniaui"
+<Styles xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:behaviors="using:LanMountainDesktop.Behaviors">
 
@@ -16,17 +16,17 @@
             <Setter Property="Opacity" Value="0" />
             <Setter Property="RenderTransform">
                 <Setter.Value>
-                    <TranslateTransform Y="14" />
+                    <TranslateTransform Y="24" />
                 </Setter.Value>
             </Setter>
             <Style Selector="^[(behaviors|PanelIntroAnimationBehavior.IsAnimationPlayed)=True]">
                 <Style.Animations>
-                    <Animation Duration="{StaticResource FluttermotionToken.Duration.Intro}"
+                    <Animation Duration="0:0:0.65"
                                FillMode="Both"
-                               Easing="0.22,1,0.36,1">
+                               Easing="0.05, 0.75, 0.10, 1.00">
                         <KeyFrame Cue="0%">
                             <Setter Property="Opacity" Value="0" />
-                            <Setter Property="TranslateTransform.Y" Value="14" />
+                            <Setter Property="TranslateTransform.Y" Value="24" />
                         </KeyFrame>
                         <KeyFrame Cue="100%">
                             <Setter Property="Opacity" Value="1" />
@@ -53,9 +53,9 @@
         <Setter Property="MinHeight" Value="34" />
         <Setter Property="Transitions">
             <Transitions>
-                <BrushTransition Property="Background" Duration="{StaticResource FluttermotionToken.Duration.Standard}" Easing="0.22,1,0.36,1" />
+                <BrushTransition Property="Background" Duration="{StaticResource FluttermotionToken.Duration.Standard}" Easing="0.05,0.75,0.10,1.00" />
-                <BrushTransition Property="BorderBrush" Duration="{StaticResource FluttermotionToken.Duration.Standard}" Easing="0.22,1,0.36,1" />
+                <BrushTransition Property="BorderBrush" Duration="{StaticResource FluttermotionToken.Duration.Standard}" Easing="0.05,0.75,0.10,1.00" />
-                <TransformOperationsTransition Property="RenderTransform" Duration="{StaticResource FluttermotionToken.Duration.Standard}" Easing="0.22,1,0.36,1" />
+                <TransformOperationsTransition Property="RenderTransform" Duration="{StaticResource FluttermotionToken.Duration.Standard}" Easing="0.05,0.75,0.10,1.00" />
             </Transitions>
         </Setter>
     </Style>
@@ -74,8 +74,8 @@
     <Style Selector=".settings-scope ComboBox">
         <Setter Property="Transitions">
             <Transitions>
-                <BrushTransition Property="Background" Duration="{StaticResource FluttermotionToken.Duration.Fast}" Easing="0.22,1,0.36,1" />
+                <BrushTransition Property="Background" Duration="{StaticResource FluttermotionToken.Duration.Fast}" Easing="0.05,0.75,0.10,1.00" />
-                <TransformOperationsTransition Property="RenderTransform" Duration="{StaticResource FluttermotionToken.Duration.Fast}" Easing="0.22,1,0.36,1" />
+                <TransformOperationsTransition Property="RenderTransform" Duration="{StaticResource FluttermotionToken.Duration.Fast}" Easing="0.05,0.75,0.10,1.00" />
             </Transitions>
         </Setter>
     </Style>
@@ -87,8 +87,8 @@
     <Style Selector=".settings-scope ToggleSwitch">
         <Setter Property="Transitions">
             <Transitions>
-                <DoubleTransition Property="Opacity" Duration="{StaticResource FluttermotionToken.Duration.Standard}" Easing="0.22,1,0.36,1" />
+                <DoubleTransition Property="Opacity" Duration="{StaticResource FluttermotionToken.Duration.Standard}" Easing="0.05,0.75,0.10,1.00" />
-                <TransformOperationsTransition Property="RenderTransform" Duration="{StaticResource FluttermotionToken.Duration.Standard}" Easing="0.22,1,0.36,1" />
+                <TransformOperationsTransition Property="RenderTransform" Duration="{StaticResource FluttermotionToken.Duration.Standard}" Easing="0.05,0.75,0.10,1.00" />
             </Transitions>
         </Setter>
     </Style>

LanMountainDesktop/Styles/SettingsCardStyles.axaml

@@ -1,7 +1,8 @@
 <Styles xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:ui="using:FluentAvalonia.UI.Controls"
-        xmlns:fi="using:FluentIcons.Avalonia.Fluent">
+        xmlns:fi="using:FluentIcons.Avalonia.Fluent"
+        xmlns:behaviors="using:LanMountainDesktop.Behaviors">
 
     <Style Selector="StackPanel.settings-page-container">
         <Setter Property="Spacing" Value="0" />
@@ -9,6 +10,34 @@
         <Setter Property="MaxWidth" Value="{DynamicResource SettingsContainerMaxWidth}" />
     </Style>
 
+    <Style Selector="StackPanel.settings-page-animated">
+        <Setter Property="behaviors:PanelIntroAnimationBehavior.IsEnabled" Value="True" />
+        <Style Selector="^ > :is(Control)[(behaviors|PanelIntroAnimationBehavior.CanPlayAnimation)=True]">
+            <Setter Property="Opacity" Value="0" />
+            <Setter Property="RenderTransform">
+                <Setter.Value>
+                    <TranslateTransform Y="20" />
+                </Setter.Value>
+            </Setter>
+            <Style Selector="^[(behaviors|PanelIntroAnimationBehavior.IsAnimationPlayed)=True]">
+                <Style.Animations>
+                    <Animation Duration="0:0:0.55"
+                               FillMode="Both"
+                               Easing="0.05, 0.75, 0.10, 1.00">
+                        <KeyFrame Cue="0%">
+                            <Setter Property="Opacity" Value="0" />
+                            <Setter Property="TranslateTransform.Y" Value="20" />
+                        </KeyFrame>
+                        <KeyFrame Cue="100%">
+                            <Setter Property="Opacity" Value="1" />
+                            <Setter Property="TranslateTransform.Y" Value="0" />
+                        </KeyFrame>
+                    </Animation>
+                </Style.Animations>
+            </Style>
+        </Style>
+    </Style>
+
     <Style Selector="TextBlock.settings-section-title">
         <Setter Property="FontSize" Value="30" />
         <Setter Property="FontWeight" Value="SemiBold" />
@@ -39,10 +68,10 @@
             <Transitions>
                 <BrushTransition Property="Background"
                                  Duration="{StaticResource FluttermotionToken.Duration.Standard}"
-                                 Easing="0.22,1,0.36,1" />
+                                 Easing="0.05,0.75,0.10,1.00" />
                 <BoxShadowsTransition Property="BoxShadow"
                                       Duration="{StaticResource FluttermotionToken.Duration.Fast}"
-                                      Easing="0.22,1,0.36,1" />
+                                      Easing="0.05,0.75,0.10,1.00" />
             </Transitions>
         </Setter>
     </Style>

LanMountainDesktop/Theme/FluttermotionToken.cs

@@ -5,13 +5,15 @@ namespace LanMountainDesktop.Theme;
 public static class FluttermotionToken
 {
     public static readonly TimeSpan Fast = TimeSpan.FromMilliseconds(120);
-    public static readonly TimeSpan Standard = TimeSpan.FromMilliseconds(160);
+    public static readonly TimeSpan Standard = TimeSpan.FromMilliseconds(200);
-    public static readonly TimeSpan Slow = TimeSpan.FromMilliseconds(200);
+    public static readonly TimeSpan Slow = TimeSpan.FromMilliseconds(280);
-    public static readonly TimeSpan Page = TimeSpan.FromMilliseconds(240);
+    public static readonly TimeSpan Page = TimeSpan.FromMilliseconds(320);
-    public static readonly TimeSpan Intro = TimeSpan.FromMilliseconds(320);
+    public static readonly TimeSpan Intro = TimeSpan.FromMilliseconds(400);
 
-    public static readonly TimeSpan StaggerStepInterval = TimeSpan.FromMilliseconds(24);
+    public static readonly TimeSpan StaggerStepInterval = TimeSpan.FromMilliseconds(32);
     public static readonly TimeSpan WeatherAnimationFrameInterval = TimeSpan.FromMilliseconds(64);
 
-    public const string StandardBezier = "0.22, 1, 0.36, 1";
+    public const string StandardBezier = "0.05, 0.75, 0.10, 1.00";
+    public const string DecelerateBezier = "0.05, 0.75, 0.10, 1.00";
+    public const string AccelerateBezier = "0.30, 0.00, 0.60, 0.00";
 }

LanMountainDesktop/Views/SettingsPages/AppearanceSettingsPage.axaml

@@ -7,7 +7,7 @@
              x:Class="LanMountainDesktop.Views.SettingsPages.AppearanceSettingsPage"
              x:DataType="vm:AppearanceSettingsPageViewModel">
     <ScrollViewer VerticalScrollBarVisibility="Auto">
-        <StackPanel Classes="settings-page-container">
+        <StackPanel Classes="settings-page-container settings-page-animated">
 
             <controls:IconText Icon="Color"
                                Text="{Binding ThemeHeader}"

LanMountainDesktop/Views/SettingsPages/ComponentsSettingsPage.axaml

@@ -7,7 +7,7 @@
              x:Class="LanMountainDesktop.Views.SettingsPages.ComponentsSettingsPage"
              x:DataType="vm:ComponentsSettingsPageViewModel">
     <ScrollViewer VerticalScrollBarVisibility="Auto">
-        <StackPanel Classes="settings-page-container">
+        <StackPanel Classes="settings-page-container settings-page-animated">
             <controls:IconText Icon="Apps"
                                Text="{Binding ComponentsHeader}"
                                Margin="0,0,0,4" />

LanMountainDesktop/Views/SettingsPages/GeneralSettingsPage.axaml

@@ -7,7 +7,7 @@
              x:Class="LanMountainDesktop.Views.SettingsPages.GeneralSettingsPage"
              x:DataType="vm:GeneralSettingsPageViewModel">
     <ScrollViewer VerticalScrollBarVisibility="Auto">
-        <StackPanel Classes="settings-page-container">
+        <StackPanel Classes="settings-page-container settings-page-animated">
 
             <!-- 区域设置分组 -->
             <controls:IconText Icon="Globe"

LanMountainDesktop/Views/SettingsPages/GeneratedPluginSettingsPage.axaml

@@ -4,7 +4,7 @@
              x:Class="LanMountainDesktop.Views.SettingsPages.GeneratedPluginSettingsPage"
              x:DataType="vm:PluginGeneratedSettingsPageViewModel">
     <ScrollViewer VerticalScrollBarVisibility="Auto">
-        <StackPanel Classes="settings-page-container">
+        <StackPanel Classes="settings-page-container settings-page-animated">
             <TextBlock Classes="settings-section-title"
                        Text="{Binding Title}" />
             <TextBlock x:Name="DescriptionTextBlock"

LanMountainDesktop/Views/SettingsPages/LauncherSettingsPage.axaml

@@ -7,7 +7,7 @@
              x:Class="LanMountainDesktop.Views.SettingsPages.LauncherSettingsPage"
              x:DataType="vm:LauncherSettingsPageViewModel">
     <ScrollViewer VerticalScrollBarVisibility="Auto">
-        <StackPanel Classes="settings-page-container">
+        <StackPanel Classes="settings-page-container settings-page-animated">
 
             <Border Classes="settings-section-card">
                 <Grid ColumnDefinitions="Auto,*,Auto"

LanMountainDesktop/Views/SettingsPages/PluginMarketSettingsPage.axaml

@@ -7,7 +7,7 @@
              x:Name="Root"
              x:DataType="vm:PluginMarketSettingsPageViewModel">
     <ScrollViewer VerticalScrollBarVisibility="Auto">
-        <StackPanel Classes="settings-page-container">
+        <StackPanel Classes="settings-page-container settings-page-animated">
             <ui:SettingsExpander Header="{Binding RefreshButtonText}"
                                  Description="{Binding StatusMessage}">
                 <ui:SettingsExpander.IconSource>

LanMountainDesktop/Views/SettingsPages/PluginsSettingsPage.axaml

@@ -8,7 +8,7 @@
              x:Name="Root"
              x:DataType="vm:PluginsSettingsPageViewModel">
     <ScrollViewer VerticalScrollBarVisibility="Auto">
-        <StackPanel Classes="settings-page-container">
+        <StackPanel Classes="settings-page-container settings-page-animated">
             <ui:SettingsExpander Header="{Binding RefreshButtonText}"
                                  Description="{Binding StatusMessage}">
                 <ui:SettingsExpander.IconSource>

LanMountainDesktop/Views/SettingsPages/PrivacySettingsPage.axaml

@@ -7,7 +7,7 @@
              x:Class="LanMountainDesktop.Views.SettingsPages.PrivacySettingsPage"
              x:DataType="vm:PrivacySettingsPageViewModel">
     <ScrollViewer VerticalScrollBarVisibility="Auto">
-        <StackPanel Classes="settings-page-container">
+        <StackPanel Classes="settings-page-container settings-page-animated">
             <controls:IconText Icon="Info"
                                Text="{Binding PrivacyHeader}"
                                Margin="0,0,0,4" />

LanMountainDesktop/Views/SettingsPages/StatusBarSettingsPage.axaml

@@ -7,7 +7,7 @@
              x:Class="LanMountainDesktop.Views.SettingsPages.StatusBarSettingsPage"
              x:DataType="vm:StatusBarSettingsPageViewModel">
     <ScrollViewer VerticalScrollBarVisibility="Auto">
-        <StackPanel Classes="settings-page-container">
+        <StackPanel Classes="settings-page-container settings-page-animated">
             <controls:IconText Icon="Apps"
                                Text="{Binding ComponentsHeader}"
                                Margin="0,0,0,4" />

LanMountainDesktop/Views/SettingsPages/UpdateSettingsPage.axaml

@@ -36,7 +36,7 @@
     </UserControl.Styles>
 
     <ScrollViewer VerticalScrollBarVisibility="Auto">
-        <StackPanel Classes="settings-page-container">
+        <StackPanel Classes="settings-page-container settings-page-animated">
             <TextBlock Classes="settings-section-title"
                        Text="{Binding PageTitle}" />
             <TextBlock Classes="settings-section-description"

LanMountainDesktop/Views/SettingsPages/WallpaperSettingsPage.axaml

@@ -7,7 +7,7 @@
              x:Class="LanMountainDesktop.Views.SettingsPages.WallpaperSettingsPage"
              x:DataType="vm:WallpaperSettingsPageViewModel">
     <ScrollViewer VerticalScrollBarVisibility="Auto">
-        <StackPanel Classes="settings-page-container">
+        <StackPanel Classes="settings-page-container settings-page-animated">
 
             <!-- 预览与颜色选择区域 -->
             <Grid ColumnDefinitions="*,*" ColumnSpacing="32" Margin="0,0,0,32">

LanMountainDesktop/Views/SettingsPages/WeatherSettingsPage.axaml

@@ -8,7 +8,7 @@
              x:Class="LanMountainDesktop.Views.SettingsPages.WeatherSettingsPage"
              x:DataType="vm:WeatherSettingsPageViewModel">
     <ScrollViewer VerticalScrollBarVisibility="Auto">
-        <StackPanel Classes="settings-page-container">
+        <StackPanel Classes="settings-page-container settings-page-animated">
 
             <Border Classes="settings-section-card">
                 <Grid ColumnDefinitions="Auto,*,Auto" ColumnSpacing="18">

LanMountainDesktop/Views/SettingsWindow.axaml

@@ -2,7 +2,7 @@
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:vm="using:LanMountainDesktop.ViewModels"
         xmlns:ui="using:FluentAvalonia.UI.Controls"
-        xmlns:fi="using:FluentIcons.Avalonia"
+        xmlns:fi="using:FluentIcons.Avalonia.Fluent"
         x:Class="LanMountainDesktop.Views.SettingsWindow"
         x:DataType="vm:SettingsWindowViewModel"
         Width="1120"
@@ -50,15 +50,14 @@
                   ColumnSpacing="8"
                   VerticalAlignment="Center">
                 <Button x:Name="TogglePaneButton"
-                        Width="40"
+                        Classes="pane-toggle-button"
-                        Height="32"
-                        Padding="0"
-                        Background="Transparent"
-                        BorderThickness="0"
                         Click="OnTogglePaneButtonClick">
-                    <fi:FluentIcon x:Name="TogglePaneButtonIcon"
+                    <Grid>
-                                   Icon="PanelLeftExpand"
+                        <fi:FluentIcon x:Name="TogglePaneButtonIcon"
-                                   IconVariant="Regular" />
+                                       Icon="Navigation"
+                                       IconVariant="Regular"
+                                       FontSize="16" />
+                    </Grid>
                 </Button>
 
                 <fi:FluentIcon x:Name="WindowBrandIcon"

LanMountainDesktop/Views/SettingsWindow.axaml.cs

@@ -563,10 +563,6 @@ public partial class SettingsWindow : Window, ISettingsPageHostContext
         {
             return;
         }
-
-        TogglePaneButtonIcon.Icon = RootNavigationView.IsPaneOpen
-            ? FluentIcons.Common.Icon.PanelLeftContract
-            : FluentIcons.Common.Icon.PanelLeftExpand;
     }
 
     private void UpdateChromeMetrics()