From 65e32a66cc54fd74afdfe4013253e150091717b6 Mon Sep 17 00:00:00 2001
From: Bin <realybin@outlook.com>
Date: Tue, 18 Feb 2025 16:53:06 +0800
Subject: [PATCH] feat(settings): update settings management and UI
 enhancements (#39)

- Updated `LangVersion` to `preview` in `Directory.Build.props`.
- Upgraded NuGet packages including `Microsoft.Extensions.DependencyInjection`, `Microsoft.Extensions.Hosting`, and `System.Text.Json` to version `9.0.2`.
- Added a new `<connectionStrings />` section in `App.config` and renamed settings to include the "Is" prefix.
- Introduced `CreateHostBuilder` method in `App.xaml.cs` for improved dependency injection.
- Refactored `MainWindow.xaml` and `MainWindow.xaml.cs` to enhance UI and settings handling.
- Added `Settings.cs` for managing application settings with `CommunityToolkit.Mvvm`.
- Updated resource files for localization, including a new "Visibility" string.
- Refactored `MainWindowViewModel.cs` to use `ObservableRecipient` for messaging.
- Introduced `SettingsViewModel.cs` to manage settings view and commands.
- Improved UI layout and bindings in `PageNavigationView.xaml`, `SettingsView.xaml`, and `ToolBarView.xaml`.
---
 Directory.Build.props                       |   2 +-
 Directory.Packages.props                    |   6 +-
 SketchNow/App.config                        |  10 +-
 SketchNow/App.xaml.cs                       |  15 +-
 SketchNow/{Views => }/MainWindow.xaml       |  30 +--
 SketchNow/{Views => }/MainWindow.xaml.cs    |  15 +-
 SketchNow/Models/CustomCursors.cs           |   2 +-
 SketchNow/Models/Settings.cs                |  48 +++++
 SketchNow/Properties/Resource.Designer.cs   |   9 +
 SketchNow/Properties/Resource.resx          |   3 +
 SketchNow/Properties/Resource.zh-CN.resx    |   9 +-
 SketchNow/Properties/Settings.Designer.cs   |  44 ++++-
 SketchNow/Properties/Settings.settings      |  12 +-
 SketchNow/SketchNow.csproj                  |   9 +-
 SketchNow/ViewModels/MainWindowViewModel.cs | 170 +++++------------
 SketchNow/ViewModels/SettingsViewModel.cs   | 119 ++++++++++++
 SketchNow/Views/PageNavigationView.xaml     |   1 +
 SketchNow/Views/SettingsView.xaml           | 192 +++++++++++---------
 SketchNow/Views/SettingsView.xaml.cs        |   2 +-
 SketchNow/Views/ToolBarView.xaml            |  95 +++++-----
 20 files changed, 482 insertions(+), 311 deletions(-)
 rename SketchNow/{Views => }/MainWindow.xaml (84%)
 rename SketchNow/{Views => }/MainWindow.xaml.cs (51%)
 create mode 100644 SketchNow/Models/Settings.cs
 create mode 100644 SketchNow/ViewModels/SettingsViewModel.cs

diff --git a/Directory.Build.props b/Directory.Build.props
index 6a38982..5858395 100644
--- a/Directory.Build.props
+++ b/Directory.Build.props
@@ -11,7 +11,7 @@ See: https://learn.microsoft.com/visualstudio/msbuild/customize-your-build
   <PropertyGroup>
     <ImplicitUsings>enable</ImplicitUsings>
     <Nullable>enable</Nullable>
-    <LangVersion>12</LangVersion>
+    <LangVersion>preview</LangVersion>
     <AccelerateBuildsInVisualStudio>true</AccelerateBuildsInVisualStudio>
     <!-- 
     If you you like to see source generated files saved to disk you can enable the following:
diff --git a/Directory.Packages.props b/Directory.Packages.props
index 54cb897..b5c49a4 100644
--- a/Directory.Packages.props
+++ b/Directory.Packages.props
@@ -25,13 +25,13 @@
       <PrivateAssets>all</PrivateAssets>
     </PackageVersion>
     <PackageVersion Include="MaterialDesignThemes" Version="5.2.1" />
-    <PackageVersion Include="Microsoft.Extensions.DependencyInjection" Version="9.0.1" />
-    <PackageVersion Include="Microsoft.Extensions.Hosting" Version="9.0.1" />
+    <PackageVersion Include="Microsoft.Extensions.DependencyInjection" Version="9.0.2" />
+    <PackageVersion Include="Microsoft.Extensions.Hosting" Version="9.0.2" />
     <PackageVersion Include="Microsoft.NET.Test.Sdk" Version="17.12.0" />
     <PackageVersion Include="Moq" Version="4.20.72" />
     <PackageVersion Include="Moq.AutoMock" Version="3.5.0" />
     <PackageVersion Include="SingleInstanceCore" Version="2.2.2" />
-    <PackageVersion Include="System.Text.Json" Version="9.0.1" />
+    <PackageVersion Include="System.Text.Json" Version="9.0.2" />
     <PackageVersion Include="ValueConverters" Version="3.1.22" />
     <PackageVersion Include="Velopack" Version="0.0.1053" />
     <PackageVersion Include="WPF.JoshSmith.Controls.DragCanvas" Version="2.0.3" />
diff --git a/SketchNow/App.config b/SketchNow/App.config
index a1eab41..04fac46 100644
--- a/SketchNow/App.config
+++ b/SketchNow/App.config
@@ -5,17 +5,21 @@
             <section name="SketchNow.Properties.Settings" type="System.Configuration.ClientSettingsSection, System, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" allowExeDefinition="MachineToLocalUser" requirePermission="false" />
         </sectionGroup>
     </configSections>
+    <connectionStrings />
     <userSettings>
         <SketchNow.Properties.Settings>
-            <setting name="FitToCurve" serializeAs="String">
+            <setting name="IsFitToCurve" serializeAs="String">
                 <value>True</value>
             </setting>
-            <setting name="IgnorePressure" serializeAs="String">
+            <setting name="IsIgnorePressure" serializeAs="String">
                 <value>False</value>
             </setting>
-            <setting name="EraseByStroke" serializeAs="String">
+            <setting name="IsEraseByStroke" serializeAs="String">
                 <value>True</value>
             </setting>
+            <setting name="StrokeSize" serializeAs="String">
+                <value>5</value>
+            </setting>
         </SketchNow.Properties.Settings>
     </userSettings>
 </configuration>
\ No newline at end of file
diff --git a/SketchNow/App.xaml.cs b/SketchNow/App.xaml.cs
index c10524e..616189e 100644
--- a/SketchNow/App.xaml.cs
+++ b/SketchNow/App.xaml.cs
@@ -1,4 +1,8 @@
-using System.Text;
+using System.Reflection;
+using System.Text;
+using System.Windows;
+using System.Windows.Media;
+using System.Windows.Threading;
 
 using CommunityToolkit.Mvvm.Messaging;
 
@@ -8,14 +12,11 @@
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.Extensions.Hosting;
 
+using SingleInstanceCore;
+
 using SketchNow.ViewModels;
 using SketchNow.Views;
 
-using System.Windows;
-using System.Windows.Threading;
-
-using SingleInstanceCore;
-
 using Velopack;
 using Velopack.Sources;
 
@@ -51,6 +52,7 @@ private static async Task MainAsync(string[] args)
         //to suppress the CA2007 warning https://learn.microsoft.com/en-us/dotnet/fundamentals/code-analysis/quality-rules/ca2007
         await host.StopAsync().ConfigureAwait(true);
     }
+
     public static IHostBuilder CreateHostBuilder(string[] args) =>
         Host.CreateDefaultBuilder(args)
             .ConfigureAppConfiguration((hostBuilderContext, configurationBuilder)
@@ -59,6 +61,7 @@ public static IHostBuilder CreateHostBuilder(string[] args) =>
             {
                 services.AddSingleton<MainWindow>();
                 services.AddSingleton<MainWindowViewModel>();
+                services.AddSingleton<SettingsViewModel>();
 
                 services.AddSingleton<WeakReferenceMessenger>();
                 services.AddSingleton<IMessenger, WeakReferenceMessenger>(provider =>
diff --git a/SketchNow/Views/MainWindow.xaml b/SketchNow/MainWindow.xaml
similarity index 84%
rename from SketchNow/Views/MainWindow.xaml
rename to SketchNow/MainWindow.xaml
index c5b056c..50245d2 100644
--- a/SketchNow/Views/MainWindow.xaml
+++ b/SketchNow/MainWindow.xaml
@@ -1,4 +1,4 @@
-<Window x:Class="SketchNow.Views.MainWindow"
+<Window x:Class="SketchNow.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:controls="clr-namespace:SketchNow.Controls"
@@ -80,13 +80,13 @@
   <Window.Resources>
     <valueConverters:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
   </Window.Resources>
-  <Window.CacheMode>
-    <BitmapCache 
+  <Grid>
+    <Grid.CacheMode>
+      <BitmapCache 
             EnableClearType="True"
             RenderAtScale="1"
             SnapsToDevicePixels="True" />
-  </Window.CacheMode>
-  <Grid>
+    </Grid.CacheMode>
     <materialDesign:DialogHost ApplyBlurBackground="True">
       <materialDesign:DialogHost.DialogContent>
         <Grid Margin="16">
@@ -97,7 +97,7 @@
           <ScrollViewer Grid.Row="0"
                       HorizontalScrollBarVisibility="Auto"
                       VerticalScrollBarVisibility="Auto">
-            <views:SettingsView />
+            <views:SettingsView x:Name="SettingsView"/>
           </ScrollViewer>
           <StackPanel Grid.Row="1"
                     HorizontalAlignment="Right"
@@ -112,13 +112,7 @@
         </Grid>
       </materialDesign:DialogHost.DialogContent>
       <Grid>
-        <Grid.CacheMode>
-          <BitmapCache 
-            EnableClearType="True"
-            RenderAtScale="1"
-            SnapsToDevicePixels="True" />
-        </Grid.CacheMode>
-        <Canvas Background="{Binding SelectedBrush}" Visibility="{Binding IsMultiPageMode, Converter={StaticResource BoolToVisibilityConverter}}" />
+        <Canvas Background="{Binding SelectedBackground}" Visibility="{Binding IsMultiPageMode, Converter={StaticResource BoolToVisibilityConverter}}" />
         <controls:CustomInkCanvas Background="Transparent"
                                 Cursor="{Binding InkCanvasCursor}"
                                 DefaultDrawingAttributes="{Binding CurrentDrawingAttributes}"
@@ -136,15 +130,5 @@
         <views:ToolBarView />
       </Grid>
     </materialDesign:DialogHost>
-    
-    <materialDesign:Snackbar HorizontalAlignment="Center"
-                         VerticalAlignment="Bottom"
-                         MessageQueue="{Binding MessageQueue}" />
-    <ProgressBar Height="10"
-             Margin="0,0,0,6"
-             VerticalAlignment="Bottom"
-             IsIndeterminate="{Binding Progress.IsIndeterminate}"
-             Visibility="{Binding Progress.IsVisible, Converter={StaticResource BoolToVisibilityConverter}}"
-             Value="{Binding Progress.Value}" />
   </Grid>
 </Window>
\ No newline at end of file
diff --git a/SketchNow/Views/MainWindow.xaml.cs b/SketchNow/MainWindow.xaml.cs
similarity index 51%
rename from SketchNow/Views/MainWindow.xaml.cs
rename to SketchNow/MainWindow.xaml.cs
index 37ecdac..cd3c840 100644
--- a/SketchNow/Views/MainWindow.xaml.cs
+++ b/SketchNow/MainWindow.xaml.cs
@@ -1,19 +1,26 @@
-using System.Windows.Input;
+using System.Diagnostics;
+using System.Windows.Input;
 
 using SketchNow.ViewModels;
+using SketchNow.Views;
 
-namespace SketchNow.Views;
+namespace SketchNow;
 
 /// <summary>
 /// Interaction logic for MainWindow.xaml
 /// </summary>
 public partial class MainWindow
 {
-    public MainWindow(MainWindowViewModel viewModel)
+    public MainWindow(
+        MainWindowViewModel mainViewModel,
+        SettingsViewModel settingsViewModel)
     {
-        DataContext = viewModel;
         InitializeComponent();
+        Debug.WriteLine("Ctor=============");
         
+        DataContext = mainViewModel;
+        SettingsView.DataContext = settingsViewModel;
+
         CommandBindings.Add(new CommandBinding(ApplicationCommands.Close, OnClose));
     }
 
diff --git a/SketchNow/Models/CustomCursors.cs b/SketchNow/Models/CustomCursors.cs
index cd188c2..5fd1da3 100644
--- a/SketchNow/Models/CustomCursors.cs
+++ b/SketchNow/Models/CustomCursors.cs
@@ -13,7 +13,7 @@ public interface ICustomCursors
 public class CustomCursors : ICustomCursors
 {
     /// <summary>
-    /// 
+    /// Load a cursor from the resources
     /// </summary>
     /// <param name="resourcePath"></param>
     /// <returns></returns>
diff --git a/SketchNow/Models/Settings.cs b/SketchNow/Models/Settings.cs
new file mode 100644
index 0000000..2cf6312
--- /dev/null
+++ b/SketchNow/Models/Settings.cs
@@ -0,0 +1,48 @@
+using System.Windows;
+using System.Windows.Media;
+
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
+
+namespace SketchNow.Models;
+
+public partial class Settings : ObservableObject
+{
+    [ObservableProperty]
+    private bool _isFitToCurve;
+
+    [ObservableProperty]
+    private bool _isIgnorePressure;
+
+    [ObservableProperty]
+    private bool _isEraseByStroke;
+
+    [ObservableProperty]
+    private Brush _selectedBackground;
+
+    public Settings()
+    {
+        IsFitToCurve = Properties.Settings.Default.IsFitToCurve;
+        IsIgnorePressure = Properties.Settings.Default.IsIgnorePressure;
+        IsEraseByStroke = Properties.Settings.Default.IsEraseByStroke;
+        SelectedBackground = Properties.Settings.Default.SelectedBackground;
+    }
+
+    public Settings(bool isFitToCurve, bool isIgnorePressure, bool isEraseByStroke, Brush selectedBackground)
+    {
+        IsFitToCurve = isFitToCurve;
+        IsIgnorePressure = isIgnorePressure;
+        IsEraseByStroke = isEraseByStroke;
+        SelectedBackground = selectedBackground;
+    }
+
+    [RelayCommand]
+    private void SaveSettings()
+    {
+        Properties.Settings.Default.IsFitToCurve = IsFitToCurve;
+        Properties.Settings.Default.IsIgnorePressure = IsIgnorePressure;
+        Properties.Settings.Default.IsEraseByStroke = IsEraseByStroke;
+        Properties.Settings.Default.SelectedBackground = SelectedBackground;
+        Properties.Settings.Default.Save();
+    }
+}
\ No newline at end of file
diff --git a/SketchNow/Properties/Resource.Designer.cs b/SketchNow/Properties/Resource.Designer.cs
index 0421553..4e4d8f9 100644
--- a/SketchNow/Properties/Resource.Designer.cs
+++ b/SketchNow/Properties/Resource.Designer.cs
@@ -302,5 +302,14 @@ public static string UpdatesAreNotAvailable {
                 return ResourceManager.GetString("UpdatesAreNotAvailable", resourceCulture);
             }
         }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Visibility.
+        /// </summary>
+        public static string Visibility {
+            get {
+                return ResourceManager.GetString("Visibility", resourceCulture);
+            }
+        }
     }
 }
diff --git a/SketchNow/Properties/Resource.resx b/SketchNow/Properties/Resource.resx
index 774055f..25595d1 100644
--- a/SketchNow/Properties/Resource.resx
+++ b/SketchNow/Properties/Resource.resx
@@ -198,4 +198,7 @@
   <data name="DownloadedUpdatesPleaseWait" xml:space="preserve">
     <value>Downloaded updates. Please wait...</value>
   </data>
+  <data name="Visibility" xml:space="preserve">
+    <value>Visibility</value>
+  </data>
 </root>
\ No newline at end of file
diff --git a/SketchNow/Properties/Resource.zh-CN.resx b/SketchNow/Properties/Resource.zh-CN.resx
index 6eb2676..ee1e0d8 100644
--- a/SketchNow/Properties/Resource.zh-CN.resx
+++ b/SketchNow/Properties/Resource.zh-CN.resx
@@ -189,13 +189,16 @@
   <data name="InstallAndUpdate" xml:space="preserve">
     <value>安装并更新</value>
   </data>
-  <data name="DownloadingUpdatesPleaseWait" xml:space="preserve">
-    <value>下载更新中，请稍等...</value>
-  </data>
   <data name="UpdatesAreNotAvailable" xml:space="preserve">
     <value>更新不可用。</value>
   </data>
+  <data name="DownloadingUpdatesPleaseWait" xml:space="preserve">
+    <value>下载更新中，请稍等...</value>
+  </data>
   <data name="DownloadedUpdatesPleaseWait" xml:space="preserve">
     <value>更新下载完成，请稍等...</value>
   </data>
+  <data name="Visibility" xml:space="preserve">
+    <value>可见性</value>
+  </data>
 </root>
\ No newline at end of file
diff --git a/SketchNow/Properties/Settings.Designer.cs b/SketchNow/Properties/Settings.Designer.cs
index 70d7f97..fb9a09e 100644
--- a/SketchNow/Properties/Settings.Designer.cs
+++ b/SketchNow/Properties/Settings.Designer.cs
@@ -12,7 +12,7 @@ namespace SketchNow.Properties {
     
     
     [global::System.Runtime.CompilerServices.CompilerGeneratedAttribute()]
-    [global::System.CodeDom.Compiler.GeneratedCodeAttribute("Microsoft.VisualStudio.Editors.SettingsDesigner.SettingsSingleFileGenerator", "17.12.0.0")]
+    [global::System.CodeDom.Compiler.GeneratedCodeAttribute("Microsoft.VisualStudio.Editors.SettingsDesigner.SettingsSingleFileGenerator", "17.13.0.0")]
     internal sealed partial class Settings : global::System.Configuration.ApplicationSettingsBase {
         
         private static Settings defaultInstance = ((Settings)(global::System.Configuration.ApplicationSettingsBase.Synchronized(new Settings())));
@@ -26,36 +26,60 @@ public static Settings Default {
         [global::System.Configuration.UserScopedSettingAttribute()]
         [global::System.Diagnostics.DebuggerNonUserCodeAttribute()]
         [global::System.Configuration.DefaultSettingValueAttribute("True")]
-        public bool FitToCurve {
+        public bool IsFitToCurve {
             get {
-                return ((bool)(this["FitToCurve"]));
+                return ((bool)(this["IsFitToCurve"]));
             }
             set {
-                this["FitToCurve"] = value;
+                this["IsFitToCurve"] = value;
             }
         }
         
         [global::System.Configuration.UserScopedSettingAttribute()]
         [global::System.Diagnostics.DebuggerNonUserCodeAttribute()]
         [global::System.Configuration.DefaultSettingValueAttribute("False")]
-        public bool IgnorePressure {
+        public bool IsIgnorePressure {
             get {
-                return ((bool)(this["IgnorePressure"]));
+                return ((bool)(this["IsIgnorePressure"]));
             }
             set {
-                this["IgnorePressure"] = value;
+                this["IsIgnorePressure"] = value;
             }
         }
         
         [global::System.Configuration.UserScopedSettingAttribute()]
         [global::System.Diagnostics.DebuggerNonUserCodeAttribute()]
         [global::System.Configuration.DefaultSettingValueAttribute("True")]
-        public bool EraseByStroke {
+        public bool IsEraseByStroke {
             get {
-                return ((bool)(this["EraseByStroke"]));
+                return ((bool)(this["IsEraseByStroke"]));
             }
             set {
-                this["EraseByStroke"] = value;
+                this["IsEraseByStroke"] = value;
+            }
+        }
+        
+        [global::System.Configuration.UserScopedSettingAttribute()]
+        [global::System.Diagnostics.DebuggerNonUserCodeAttribute()]
+        [global::System.Configuration.DefaultSettingValueAttribute("#FFFFFFFF")]
+        public global::System.Windows.Media.Brush SelectedBackground {
+            get {
+                return ((global::System.Windows.Media.Brush)(this["SelectedBackground"]));
+            }
+            set {
+                this["SelectedBackground"] = value;
+            }
+        }
+        
+        [global::System.Configuration.UserScopedSettingAttribute()]
+        [global::System.Diagnostics.DebuggerNonUserCodeAttribute()]
+        [global::System.Configuration.DefaultSettingValueAttribute("5")]
+        public int StrokeSize {
+            get {
+                return ((int)(this["StrokeSize"]));
+            }
+            set {
+                this["StrokeSize"] = value;
             }
         }
     }
diff --git a/SketchNow/Properties/Settings.settings b/SketchNow/Properties/Settings.settings
index 67bf637..6760129 100644
--- a/SketchNow/Properties/Settings.settings
+++ b/SketchNow/Properties/Settings.settings
@@ -2,14 +2,20 @@
 <SettingsFile xmlns="http://schemas.microsoft.com/VisualStudio/2004/01/settings" CurrentProfile="(Default)" GeneratedClassNamespace="SketchNow.Properties" GeneratedClassName="Settings">
   <Profiles />
   <Settings>
-    <Setting Name="FitToCurve" Type="System.Boolean" Scope="User">
+    <Setting Name="IsFitToCurve" Type="System.Boolean" Scope="User">
       <Value Profile="(Default)">True</Value>
     </Setting>
-    <Setting Name="IgnorePressure" Type="System.Boolean" Scope="User">
+    <Setting Name="IsIgnorePressure" Type="System.Boolean" Scope="User">
       <Value Profile="(Default)">False</Value>
     </Setting>
-    <Setting Name="EraseByStroke" Type="System.Boolean" Scope="User">
+    <Setting Name="IsEraseByStroke" Type="System.Boolean" Scope="User">
       <Value Profile="(Default)">True</Value>
     </Setting>
+    <Setting Name="SelectedBackground" Type="System.Windows.Media.Brush" Scope="User">
+      <Value Profile="(Default)">#FFFFFFFF</Value>
+    </Setting>
+    <Setting Name="StrokeSize" Type="System.Int32" Scope="User">
+      <Value Profile="(Default)">5</Value>
+    </Setting>
   </Settings>
 </SettingsFile>
\ No newline at end of file
diff --git a/SketchNow/SketchNow.csproj b/SketchNow/SketchNow.csproj
index 7235f07..990cc0d 100644
--- a/SketchNow/SketchNow.csproj
+++ b/SketchNow/SketchNow.csproj
@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk">
+<Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
     <OutputType>WinExe</OutputType>
@@ -8,6 +8,9 @@
     <StartupObject>SketchNow.App</StartupObject>
     <ApplicationIcon>Resources\AppIcon.ico</ApplicationIcon>
     <Version>1.0.1</Version>
+    <RepositoryUrl>https://github.com/SketchNow/SketchNow.WPF</RepositoryUrl>
+
+    <IncludeMaterialDesignFont>False</IncludeMaterialDesignFont>
   </PropertyGroup>
 
   <!--
@@ -34,6 +37,10 @@
     <None Remove="Resources\Circle.cur" />
     <None Remove="Resources\Remove.cur" />
     <None Remove="Resources\Select.cur" />
+    <None Include="..\..\..\..\source\templates\Avalonia\AvaloniaDesktop\README.md">
+      <Pack>True</Pack>
+      <PackagePath>\</PackagePath>
+    </None>
     <Page Include="App.xaml" />
   </ItemGroup>
 
diff --git a/SketchNow/ViewModels/MainWindowViewModel.cs b/SketchNow/ViewModels/MainWindowViewModel.cs
index a261b9b..ddeff3d 100644
--- a/SketchNow/ViewModels/MainWindowViewModel.cs
+++ b/SketchNow/ViewModels/MainWindowViewModel.cs
@@ -1,5 +1,4 @@
 using System.Collections.ObjectModel;
-using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Ink;
 using System.Windows.Input;
@@ -7,42 +6,30 @@
 
 using CommunityToolkit.Mvvm.ComponentModel;
 using CommunityToolkit.Mvvm.Input;
-
-using MaterialDesignThemes.Wpf;
+using CommunityToolkit.Mvvm.Messaging;
+using CommunityToolkit.Mvvm.Messaging.Messages;
 
 using SketchNow.Models;
 using SketchNow.Models.Enums;
-using SketchNow.Properties;
-
-using Velopack;
-using Velopack.Sources;
 
 namespace SketchNow.ViewModels;
 
-public partial class MainWindowViewModel : ObservableObject
+public partial class MainWindowViewModel : ObservableRecipient, IRecipient<ValueChangedMessage<Settings>>
 {
-    [ObservableProperty] private ISnackbarMessageQueue _messageQueue;
-
-    public MainWindowViewModel(ISnackbarMessageQueue messageQueue)
+    public MainWindowViewModel(IMessenger messenger)
     {
-        ArgumentNullException.ThrowIfNull(messageQueue);
-        MessageQueue = messageQueue;
-
-        CurrentDrawingAttributes.AttributeChanged += (_, _) =>
-        {
-            Settings.Default.FitToCurve = CurrentDrawingAttributes.FitToCurve;
-            Settings.Default.IgnorePressure = CurrentDrawingAttributes.IgnorePressure;
-            Settings.Default.Save();
-        };
-        
+        messenger.RegisterAll(this);
     }
 
     private readonly CustomCursors _customCursors = new();
-    [ObservableProperty] private Cursor _inkCanvasCursor = Cursors.Arrow;
-    [ObservableProperty] private CanvasPages _canvasPages = new();
+    [ObservableProperty] public partial Cursor InkCanvasCursor { get; set; } = Cursors.Arrow;
+
+
+    [ObservableProperty] public partial CanvasPages CanvasPages { get; set; } = new();
     private int _previousPageIndex;
 
-    [ObservableProperty] private ObservableCollection<Color> _colorList =
+    [ObservableProperty]
+    public partial ObservableCollection<Color> ColorList { get; set; } =
     [
         Color.FromRgb(28, 27, 31),
         Colors.White,
@@ -54,78 +41,42 @@ public MainWindowViewModel(ISnackbarMessageQueue messageQueue)
         Color.FromRgb(234, 43, 180)
     ];
 
-    [ObservableProperty] private Color _selectedColor = Colors.Black;
+    [ObservableProperty] public partial Color SelectedColor { get; set; } = Colors.Black;
 
     partial void OnSelectedColorChanged(Color value) => CurrentDrawingAttributes.Color = value;
-    [ObservableProperty] private ObservableCollection<double> _strokeSizeList = [5, 7, 9, 11, 13, 20];
-    [ObservableProperty] private double _selectedStrokeSize;
+    [ObservableProperty] public partial ObservableCollection<double> StrokeSizeList { get; set; } = [5, 7, 9, 11, 13, 20];
+    [ObservableProperty] public partial double SelectedStrokeSize { get; set; }
 
     partial void OnSelectedStrokeSizeChanged(double value) =>
         CurrentDrawingAttributes.Width = CurrentDrawingAttributes.Height = value;
 
-    [ObservableProperty] private DrawingAttributes _currentDrawingAttributes = new()
+    [ObservableProperty]
+    public partial DrawingAttributes CurrentDrawingAttributes { get; set; } = new()
     {
         Color = Colors.Black,
-        IgnorePressure = Settings.Default.IgnorePressure,
-        FitToCurve = Settings.Default.FitToCurve,
+        IgnorePressure = Properties.Settings.Default.IsIgnorePressure,
+        FitToCurve = Properties.Settings.Default.IsFitToCurve,
         Height = 5,
         Width = 5,
         IsHighlighter = false
     };
 
-    [ObservableProperty] private InkCanvasEditingMode _selectedEditingMode = InkCanvasEditingMode.None;
-    
-    [ObservableProperty] private int _selectedToolIndex;
-    [ObservableProperty] private WhiteBoardMode _selectedWhiteBoardMode = WhiteBoardMode.Screen;
-    [ObservableProperty] private bool _isMultiPageMode;
-    [ObservableProperty] private bool _useEraseByStroke = Settings.Default.EraseByStroke;
+    [ObservableProperty] public partial InkCanvasEditingMode SelectedEditingMode { get; set; } = InkCanvasEditingMode.None;
 
-    partial void OnUseEraseByStrokeChanged(bool value)
-    {
-        Settings.Default.EraseByStroke = value;
-        Settings.Default.Save();
-        OnSelectedToolIndexChanged(SelectedToolIndex);
-    }
+    [ObservableProperty] public partial int SelectedToolIndex { get; set; }
+    [ObservableProperty] public partial WhiteBoardMode SelectedWhiteBoardMode { get; set; } = WhiteBoardMode.Screen;
+    [ObservableProperty] public partial bool IsMultiPageMode { get; set; }
 
-    [ObservableProperty] private ObservableCollection<Brush> _backGroundBrushes =
-    [
-        new SolidColorBrush(Colors.White),
-        new SolidColorBrush(Color.FromRgb(255, 253, 209)),
-        new SolidColorBrush(Color.FromRgb(1, 71, 54)),
-        new SolidColorBrush(Color.FromRgb(25, 25, 25)),
-        new DrawingBrush
-        {
-            Viewport = new Rect(0, 0, 80, 80),
-            ViewportUnits = BrushMappingMode.Absolute,
-            TileMode = TileMode.Tile,
-            Drawing = new DrawingGroup
-            {
-                Children =
-                {
-                    new GeometryDrawing
-                    {
-                        Brush = Brushes.White, Geometry = new RectangleGeometry(new Rect(0, 0, 1, 1))
-                    },
-                    new GeometryDrawing
-                    {
-                        Brush = new SolidColorBrush(Color.FromArgb(76, 0, 0, 0)),
-                        Geometry = Geometry.Parse("M 0,0 L 0,1 0.1,1 0.1,0.1 1,0.1 1,0 Z")
-                    }
-                }
-            }
-        }
-    ];
-
-    [ObservableProperty] private Brush _selectedBrush = new SolidColorBrush(Colors.White);
-    [ObservableProperty] private Brush _windowBackgroundBrush = new SolidColorBrush(Color.FromArgb(0, 0, 0, 0));
 
+    [RelayCommand]
+    private void ToggleEditMode(int value) => SelectedToolIndex = value;
     partial void OnSelectedToolIndexChanged(int value)
     {
         SelectedEditingMode = value switch
         {
             0 => InkCanvasEditingMode.None,
             1 => InkCanvasEditingMode.Ink,
-            2 => UseEraseByStroke ? InkCanvasEditingMode.EraseByStroke : InkCanvasEditingMode.EraseByPoint,
+            2 => IsEraseByStroke ? InkCanvasEditingMode.EraseByStroke : InkCanvasEditingMode.EraseByPoint,
             3 => InkCanvasEditingMode.Select,
             _ => InkCanvasEditingMode.None
         };
@@ -145,9 +96,6 @@ partial void OnSelectedToolIndexChanged(int value)
         };
     }
 
-    [RelayCommand]
-    private void ToggleEditMode(int value) => SelectedToolIndex = value;
-
     partial void OnSelectedWhiteBoardModeChanged(WhiteBoardMode value)
     {
         IsMultiPageMode = value == WhiteBoardMode.MultiPages;
@@ -168,60 +116,40 @@ partial void OnSelectedWhiteBoardModeChanged(WhiteBoardMode value)
         }
     }
 
-    [RelayCommand]
-    private static void Close()
-    {
-        Application.Current.Shutdown();
-    }
-
     [RelayCommand]
     private void ToggleMultiPageMode(bool value) => SelectedWhiteBoardMode =
         value ? WhiteBoardMode.MultiPages : WhiteBoardMode.Screen;
 
 
-    
-    [ObservableProperty] private Progress _progress = new();
-    readonly UpdateManager _mgr = new(new GithubSource(@"https://github.com/SketchNow/SketchNow.WPF", null, false));
+    [ObservableProperty] public partial Brush WindowBackgroundBrush { get; set; } = new SolidColorBrush(Color.FromArgb(0, 0, 0, 0));
 
-    [RelayCommand]
-    private async Task CheckForUpdates()
+    public void Receive(ValueChangedMessage<Settings> message)
     {
-        UpdateInfo? newVersion = null;
+        CurrentDrawingAttributes.FitToCurve = message.Value.IsFitToCurve;
+        CurrentDrawingAttributes.IgnorePressure = message.Value.IsIgnorePressure;
+        IsEraseByStroke = message.Value.IsEraseByStroke;
+        SelectedBackground = message.Value.SelectedBackground;
+    }
 
-        try
-        {
-            newVersion = await _mgr.CheckForUpdatesAsync();
-        }
-        catch (Exception e)
+
+    /// <summary>
+    /// Synchronize with <see cref="Settings.IsEraseByStroke"/>
+    /// </summary>
+    [ObservableProperty] public partial bool IsEraseByStroke { get; set; } = Properties.Settings.Default.IsEraseByStroke;
+    partial void OnIsEraseByStrokeChanged(bool value)
+    {
+        switch (SelectedEditingMode)
         {
-            MessageQueue.Enqueue(e.Message);
+            case InkCanvasEditingMode.EraseByStroke:
+            case InkCanvasEditingMode.EraseByPoint:
+                SelectedEditingMode = value ? InkCanvasEditingMode.EraseByStroke : InkCanvasEditingMode.EraseByPoint;
+                break;
         }
-        if (newVersion != null)
-            MessageQueue.Enqueue(SketchNow.Properties.Resource.NewVersionFound, SketchNow.Properties.Resource.InstallAndUpdate,
-                _ => UpdateAppCommand.ExecuteAsync(newVersion),
-                null,
-                false,
-                true,
-                TimeSpan.FromSeconds(10));
-        else
-            MessageQueue.Enqueue(SketchNow.Properties.Resource.UpdatesAreNotAvailable);
     }
 
-    [RelayCommand]
-    private async Task UpdateApp(UpdateInfo newVersion)
-    {
-        Progress.IsVisible = true;
-        Progress.IsIndeterminate = true;
-
-        MessageQueue.Enqueue(SketchNow.Properties.Resource.DownloadingUpdatesPleaseWait);
-
-        await Task.Delay(5);
-
-        Progress.IsIndeterminate = false;
-
-        await _mgr.DownloadUpdatesAsync(newVersion, i => Progress.Value = i);
-        MessageQueue.Enqueue(SketchNow.Properties.Resource.DownloadedUpdatesPleaseWait);
-        Progress.IsIndeterminate = true;
-        _mgr.ApplyUpdatesAndRestart(newVersion);
-    }
+    /// <summary>
+    /// Synchronize with <see cref="Settings.IsFitToCurve"/>
+    /// </summary>
+    [ObservableProperty]
+    private Brush _selectedBackground = Properties.Settings.Default.SelectedBackground;
 }
\ No newline at end of file
diff --git a/SketchNow/ViewModels/SettingsViewModel.cs b/SketchNow/ViewModels/SettingsViewModel.cs
new file mode 100644
index 0000000..ee72157
--- /dev/null
+++ b/SketchNow/ViewModels/SettingsViewModel.cs
@@ -0,0 +1,119 @@
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Messaging.Messages;
+using CommunityToolkit.Mvvm.Messaging;
+using CommunityToolkit.Mvvm.Input;
+using Velopack;
+using MaterialDesignThemes.Wpf;
+using SketchNow.Models;
+using Velopack.Sources;
+using System.Windows;
+using System.Collections.ObjectModel;
+using System.Windows.Media;
+
+namespace SketchNow.ViewModels;
+
+public partial class SettingsViewModel : ObservableRecipient
+{
+    [ObservableProperty]
+    public partial ObservableCollection<Brush> BackGroundBrushes { get; set; } =
+    [
+        new SolidColorBrush(Colors.White),
+        new SolidColorBrush(Color.FromRgb(255, 253, 209)),
+        new SolidColorBrush(Color.FromRgb(1, 71, 54)),
+        new SolidColorBrush(Color.FromRgb(25, 25, 25)),
+        new DrawingBrush
+        {
+            Viewport = new Rect(0, 0, 80, 80),
+            ViewportUnits = BrushMappingMode.Absolute,
+            TileMode = TileMode.Tile,
+            Drawing = new DrawingGroup
+            {
+                Children =
+                {
+                    new GeometryDrawing
+                    {
+                        Brush = Brushes.White, Geometry = new RectangleGeometry(new Rect(0, 0, 1, 1))
+                    },
+                    new GeometryDrawing
+                    {
+                        Brush = new SolidColorBrush(Color.FromArgb(76, 0, 0, 0)),
+                        Geometry = Geometry.Parse("M 0,0 L 0,1 0.1,1 0.1,0.1 1,0.1 1,0 Z")
+                    }
+                }
+            }
+        }
+    ];
+
+    public SettingsViewModel(IMessenger messenger, ISnackbarMessageQueue messageQueue)
+    {
+        MessageQueue = messageQueue ?? throw new ArgumentNullException(nameof(messageQueue));
+        IsActive = true;
+
+        Settings.PropertyChanged += (_, _) =>
+        {
+            Settings.SaveSettingsCommand.Execute(null);
+            messenger.Send(
+                new ValueChangedMessage<Settings>(Settings)
+            );
+        };
+    }
+
+    [ObservableProperty]
+    [NotifyPropertyChangedRecipients]
+    public partial Settings Settings { get; set; } = new();
+
+    [ObservableProperty] public partial ISnackbarMessageQueue MessageQueue { get; set; }
+
+    [RelayCommand]
+    private static void Close()
+    {
+        Application.Current.Shutdown();
+    }
+
+    [ObservableProperty] public partial Progress Progress { get; set; } = new();
+    readonly UpdateManager _mgr = new(new GithubSource(@"https://github.com/SketchNow/SketchNow.WPF", null, false));
+
+    [RelayCommand]
+    private async Task CheckForUpdates()
+    {
+        UpdateInfo? newVersion = null;
+
+        try
+        {
+            newVersion = await _mgr.CheckForUpdatesAsync();
+        }
+        catch (Exception e)
+        {
+            MessageQueue.Enqueue(e.Message);
+        }
+        if (newVersion != null)
+            MessageQueue.Enqueue(Properties.Resource.NewVersionFound, Properties.Resource.InstallAndUpdate,
+                _ => UpdateAppCommand.ExecuteAsync(newVersion),
+                null,
+                false,
+                true,
+                TimeSpan.FromSeconds(10));
+        else
+            MessageQueue.Enqueue(Properties.Resource.UpdatesAreNotAvailable);
+    }
+
+    [RelayCommand]
+    private async Task UpdateApp(UpdateInfo newVersion)
+    {
+        Progress.IsVisible = true;
+        Progress.IsIndeterminate = true;
+        MessageQueue.Enqueue(Properties.Resource.DownloadingUpdatesPleaseWait);
+
+        await Task.Delay(5);
+
+        Progress.IsIndeterminate = false;
+
+        await _mgr.DownloadUpdatesAsync(newVersion, i => Progress.Value = i);
+        MessageQueue.Enqueue(Properties.Resource.DownloadedUpdatesPleaseWait);
+        Progress.IsIndeterminate = true;
+        _mgr.ApplyUpdatesAndRestart(newVersion);
+    }
+
+}
+
+
diff --git a/SketchNow/Views/PageNavigationView.xaml b/SketchNow/Views/PageNavigationView.xaml
index a5d3ea7..757fcd1 100644
--- a/SketchNow/Views/PageNavigationView.xaml
+++ b/SketchNow/Views/PageNavigationView.xaml
@@ -11,6 +11,7 @@
                                               Type={x:Type vms:MainWindowViewModel}}"
              d:DesignHeight="300"
              d:DesignWidth="800"
+             FontFamily="Segoe UI, Arial, Microsoft YaHei UI, SimSun"
              mc:Ignorable="d">
   <UserControl.Resources>
     <valueConverters:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
diff --git a/SketchNow/Views/SettingsView.xaml b/SketchNow/Views/SettingsView.xaml
index 39f55b1..1174841 100644
--- a/SketchNow/Views/SettingsView.xaml
+++ b/SketchNow/Views/SettingsView.xaml
@@ -2,105 +2,119 @@
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             xmlns:local="clr-namespace:SketchNow.Views"
              xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:properties="clr-namespace:SketchNow.Properties"
+             xmlns:valueConverters="http://schemas.superdev.ch/valueconverters/2016/xaml"
              xmlns:vms="clr-namespace:SketchNow.ViewModels"
              d:DataContext="{d:DesignInstance IsDesignTimeCreatable=False,
-                                              Type={x:Type vms:MainWindowViewModel}}"
+                                              Type={x:Type vms:SettingsViewModel}}"
              d:DesignHeight="500"
              d:DesignWidth="800"
+             FontFamily="Segoe UI, Arial, Microsoft YaHei UI, SimSun"
              mc:Ignorable="d">
+  <UserControl.Resources>
+    <valueConverters:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
+  </UserControl.Resources>
   <Grid>
-    <Grid.ColumnDefinitions>
-      <ColumnDefinition Width="Auto" />
-      <ColumnDefinition Width="*" />
-    </Grid.ColumnDefinitions>
-    <StackPanel Grid.Column="0">
-      <GroupBox Margin="5" Header="{x:Static properties:Resource.General}">
-        <StackPanel>
-          <Button Command="{Binding CloseCommand}" Content="{x:Static properties:Resource.ExitProgram}" />
-          <Button Margin="0,8,0,0"
-                  Command="{Binding CheckForUpdatesCommand}"
-                  Content="{x:Static properties:Resource.CheckUpdates}" />
-        </StackPanel>
+    <Grid>
+      <Grid.ColumnDefinitions>
+        <ColumnDefinition Width="Auto" />
+        <ColumnDefinition Width="*" />
+      </Grid.ColumnDefinitions>
+      <StackPanel Grid.Column="0">
+        <GroupBox Margin="5" Header="{x:Static properties:Resource.General}">
+          <StackPanel>
+            <Button Command="{Binding CloseCommand}" Content="{x:Static properties:Resource.ExitProgram}" />
+            <Button Margin="0,8,0,0"
+                    Command="{Binding CheckForUpdatesCommand}"
+                    Content="{x:Static properties:Resource.CheckUpdates}" />
+          </StackPanel>
 
-      </GroupBox>
-      <GroupBox Margin="5" Header="{x:Static properties:Resource.Ink}">
-        <Grid VerticalAlignment="Center">
-          <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="*" />
-            <ColumnDefinition Width="Auto" />
-          </Grid.ColumnDefinitions>
-          <Grid.RowDefinitions>
-            <RowDefinition Height="Auto" />
-            <RowDefinition Height="Auto" />
-          </Grid.RowDefinitions>
-          <TextBlock Grid.Row="0"
-                     Grid.Column="0"
-                     Text="{x:Static properties:Resource.InkSmooth}" />
-          <ToggleButton Grid.Row="0"
-                        Grid.Column="1"
-                        IsChecked="{Binding CurrentDrawingAttributes.FitToCurve}"
-                        Style="{StaticResource MaterialDesignSwitchToggleButton}" />
-          <TextBlock Grid.Row="1"
-                     Grid.Column="0"
-                     Margin="0,5,0,0"
-                     Text="{x:Static properties:Resource.IgnorePressure}" />
-          <ToggleButton Grid.Row="1"
-                        Grid.Column="1"
-                        Margin="0,5,0,0"
-                        IsChecked="{Binding CurrentDrawingAttributes.IgnorePressure}"
-                        Style="{StaticResource MaterialDesignSwitchToggleButton}" />
-        </Grid>
-      </GroupBox>
-      <GroupBox Margin="5" Header="{x:Static properties:Resource.Eraser}">
-        <Grid VerticalAlignment="Center">
-          <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="*" />
-            <ColumnDefinition Width="Auto" />
-          </Grid.ColumnDefinitions>
-          <TextBlock Grid.Column="0" Text="{x:Static properties:Resource.EraseByStroke}" />
-          <ToggleButton Grid.Column="1"
-                        IsChecked="{Binding UseEraseByStroke}"
-                        Style="{StaticResource MaterialDesignSwitchToggleButton}">
-            <materialDesign:PackIcon Kind="VectorPoint" />
-            <materialDesign:ToggleButtonAssist.OnContent>
-              <materialDesign:PackIcon Kind="VectorLine" />
-            </materialDesign:ToggleButtonAssist.OnContent>
-          </ToggleButton>
-        </Grid>
-      </GroupBox>
-      <StackPanel Margin="12">
-        <TextBlock>
-          <Hyperlink IsEnabled="False" Style="{StaticResource MaterialDesignSubtitle1Hyperlink}">
-            SketchNow is licensed under the
-          </Hyperlink>
-        </TextBlock>
-        <TextBlock Style="{StaticResource MaterialDesignHeadline6TextBlock}" Text="MIT License" />
-        <TextBlock Style="{StaticResource MaterialDesignButtonTextBlock}">
-          <Hyperlink NavigateUri="https://github.com/SketchNow/SketchNow.WPF" RequestNavigate="Hyperlink_OnRequestNavigate">Visit our Github Repository</Hyperlink>
-        </TextBlock>
+        </GroupBox>
+        <GroupBox Margin="5" Header="{x:Static properties:Resource.Ink}">
+          <Grid VerticalAlignment="Center">
+            <Grid.ColumnDefinitions>
+              <ColumnDefinition Width="*" />
+              <ColumnDefinition Width="Auto" />
+            </Grid.ColumnDefinitions>
+            <Grid.RowDefinitions>
+              <RowDefinition Height="Auto" />
+              <RowDefinition Height="Auto" />
+            </Grid.RowDefinitions>
+            <TextBlock Grid.Row="0"
+                       Grid.Column="0"
+                       Text="{x:Static properties:Resource.InkSmooth}" />
+            <ToggleButton Grid.Row="0"
+                          Grid.Column="1"
+                          IsChecked="{Binding Settings.IsFitToCurve}"
+                          Style="{StaticResource MaterialDesignSwitchToggleButton}" />
+            <TextBlock Grid.Row="1"
+                       Grid.Column="0"
+                       Margin="0,5,0,0"
+                       Text="{x:Static properties:Resource.IgnorePressure}" />
+            <ToggleButton Grid.Row="1"
+                          Grid.Column="1"
+                          Margin="0,5,0,0"
+                          IsChecked="{Binding Settings.IsIgnorePressure}"
+                          Style="{StaticResource MaterialDesignSwitchToggleButton}" />
+          </Grid>
+        </GroupBox>
+        <GroupBox Margin="5" Header="{x:Static properties:Resource.Eraser}">
+          <Grid VerticalAlignment="Center">
+            <Grid.ColumnDefinitions>
+              <ColumnDefinition Width="*" />
+              <ColumnDefinition Width="Auto" />
+            </Grid.ColumnDefinitions>
+            <TextBlock Grid.Column="0" Text="{x:Static properties:Resource.EraseByStroke}" />
+            <ToggleButton Grid.Column="1"
+                          IsChecked="{Binding Settings.IsEraseByStroke}"
+                          Style="{StaticResource MaterialDesignSwitchToggleButton}">
+              <materialDesign:PackIcon Kind="VectorPoint" />
+              <materialDesign:ToggleButtonAssist.OnContent>
+                <materialDesign:PackIcon Kind="VectorLine" />
+              </materialDesign:ToggleButtonAssist.OnContent>
+            </ToggleButton>
+          </Grid>
+        </GroupBox>
+        <StackPanel Margin="12">
+          <TextBlock>
+            <Hyperlink IsEnabled="False" Style="{StaticResource MaterialDesignSubtitle1Hyperlink}">
+              SketchNow is licensed under the
+            </Hyperlink>
+          </TextBlock>
+          <TextBlock Style="{StaticResource MaterialDesignHeadline6TextBlock}" Text="MIT License" />
+          <TextBlock Style="{StaticResource MaterialDesignButtonTextBlock}">
+            <Hyperlink NavigateUri="https://github.com/SketchNow/SketchNow.WPF" RequestNavigate="Hyperlink_OnRequestNavigate">Visit our Github Repository</Hyperlink>
+          </TextBlock>
+        </StackPanel>
       </StackPanel>
-    </StackPanel>
-    <GroupBox Grid.Column="1"
-              Margin="5"
-              Header="{x:Static properties:Resource.Background}">
-      <ListBox ItemsSource="{Binding BackGroundBrushes}" SelectedItem="{Binding SelectedBrush}">
-        <ListBox.ItemsPanel>
-          <ItemsPanelTemplate>
-            <WrapPanel />
-          </ItemsPanelTemplate>
-        </ListBox.ItemsPanel>
-        <ListBox.ItemTemplate>
-          <DataTemplate>
-            <Border Width="50"
-                    Height="50"
-                    Background="{Binding}" />
-          </DataTemplate>
-        </ListBox.ItemTemplate>
-      </ListBox>
-    </GroupBox>
+      <GroupBox Grid.Column="1"
+                Margin="5"
+                Header="{x:Static properties:Resource.Background}">
+        <ListBox ItemsSource="{Binding BackGroundBrushes}" SelectedItem="{Binding Settings.SelectedBackground}">
+          <ListBox.ItemsPanel>
+            <ItemsPanelTemplate>
+              <WrapPanel />
+            </ItemsPanelTemplate>
+          </ListBox.ItemsPanel>
+          <ListBox.ItemTemplate>
+            <DataTemplate>
+              <Border Width="50"
+                      Height="50"
+                      Background="{Binding}" />
+            </DataTemplate>
+          </ListBox.ItemTemplate>
+        </ListBox>
+      </GroupBox>
+    </Grid>
+    <ProgressBar Height="10"
+                 VerticalAlignment="Bottom"
+                 IsIndeterminate="{Binding Progress.IsIndeterminate}"
+                 Visibility="{Binding Progress.IsVisible, Converter={StaticResource BoolToVisibilityConverter}}"
+                 Value="{Binding Progress.Value}" />
+    <materialDesign:Snackbar HorizontalAlignment="Right"
+                             VerticalAlignment="Top"
+                             MessageQueue="{Binding MessageQueue}" />
   </Grid>
 </UserControl>
diff --git a/SketchNow/Views/SettingsView.xaml.cs b/SketchNow/Views/SettingsView.xaml.cs
index 7d34b32..45d42cc 100644
--- a/SketchNow/Views/SettingsView.xaml.cs
+++ b/SketchNow/Views/SettingsView.xaml.cs
@@ -22,5 +22,5 @@ private void Hyperlink_OnRequestNavigate(object sender, RequestNavigateEventArgs
             e.Handled = true;
         }
 
-    }
+}
 }
\ No newline at end of file
diff --git a/SketchNow/Views/ToolBarView.xaml b/SketchNow/Views/ToolBarView.xaml
index 53f3026..acd3344 100644
--- a/SketchNow/Views/ToolBarView.xaml
+++ b/SketchNow/Views/ToolBarView.xaml
@@ -16,6 +16,7 @@
                                               Type={x:Type vms:MainWindowViewModel}}"
              d:DesignHeight="300"
              d:DesignWidth="800"
+             FontFamily="Segoe UI, Arial, Microsoft YaHei UI, SimSun"
              mc:Ignorable="d">
   <UserControl.Resources>
     <valueConverters:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
@@ -24,19 +25,26 @@
     <converters:DivisionMathConverter x:Key="DivisionMathConverter" />
   </UserControl.Resources>
   <jas:DragCanvas>
-    <StackPanel Canvas.Left="{Binding (Canvas.Left), ElementName=ToolBar, ConverterParameter=81, Converter={StaticResource MathAddConverter}}"
+    <StackPanel Canvas.Left="{Binding (Canvas.Left), ElementName=ToolBar, ConverterParameter=0, Converter={StaticResource MathAddConverter}}"
                 Canvas.Top="{Binding (Canvas.Top), ElementName=ToolBar, ConverterParameter=65, Converter={StaticResource MathAddConverter}}"
                 jas:DragCanvas.CanBeDragged="False"
                 Orientation="Horizontal">
-      <Button Command="{Binding CanvasPages.SelectedPage.UndoCommand}"
-              Content="{materialDesign:PackIcon Kind=Undo}"
-              Style="{StaticResource MaterialDesignPaperDarkButton}" />
-      <Button Command="{Binding CanvasPages.SelectedPage.RedoCommand}"
-              Content="{materialDesign:PackIcon Kind=Redo}"
-              Style="{StaticResource MaterialDesignPaperDarkButton}" />
-      <Button Command="{Binding CanvasPages.SelectedPage.ClearCommand}"
-              Content="{materialDesign:PackIcon Kind=Delete}"
-              Style="{StaticResource MaterialDesignPaperDarkButton}" />
+      <CheckBox x:Name="ToggleToolBarVisibility"
+                Content="{x:Static properties:Resource.Visibility}"
+                IsChecked="True"
+                Style="{StaticResource MaterialDesignFilterChipCheckBox}" />
+      <StackPanel Orientation="Horizontal" Visibility="{Binding IsChecked, ElementName=ToggleToolBarVisibility, Converter={StaticResource BoolToVisibilityConverter}}">
+        <Button Command="{Binding CanvasPages.SelectedPage.UndoCommand}"
+                Content="{materialDesign:PackIcon Kind=Undo}"
+                Style="{StaticResource MaterialDesignPaperDarkButton}" />
+        <Button Command="{Binding CanvasPages.SelectedPage.RedoCommand}"
+                Content="{materialDesign:PackIcon Kind=Redo}"
+                Style="{StaticResource MaterialDesignPaperDarkButton}" />
+        <Button Command="{Binding CanvasPages.SelectedPage.ClearCommand}"
+                Content="{materialDesign:PackIcon Kind=Delete}"
+                Style="{StaticResource MaterialDesignPaperDarkButton}" />
+      </StackPanel>
+
     </StackPanel>
     <StackPanel x:Name="ToolBar"
                 Canvas.Left="{Binding ActualWidth, ElementName=TooBarControl, Converter={StaticResource DivisionMathConverter}, ConverterParameter=1.75}"
@@ -53,7 +61,8 @@
       </ListBox>
       <ListBox Margin="2"
                SelectedIndex="{Binding SelectedToolIndex}"
-               Style="{StaticResource MaterialDesignToolToggleListBox}">
+               Style="{StaticResource MaterialDesignToolToggleListBox}"
+               Visibility="{Binding IsChecked, ElementName=ToggleToolBarVisibility, Converter={StaticResource BoolToVisibilityConverter}}">
         <ListBoxItem>
           <controls:IconWithText Kind="CursorDefault"
                                  Text="{x:Static properties:Resource.Cursor}"
@@ -90,36 +99,38 @@
         </ListBoxItem>
       </ListBox>
     </StackPanel>
-    <StackPanel Canvas.Left="{Binding (Canvas.Left), Converter={StaticResource MathAddConverter}, ElementName=ToolBar, ConverterParameter=80}"
-                Canvas.Top="{Binding (Canvas.Top), ConverterParameter=-36, Converter={StaticResource MathAddConverter}, ElementName=ToolBar}"
-                jas:DragCanvas.CanBeDragged="False"
-                Orientation="Horizontal"
-                Visibility="{Binding IsSelected, Converter={StaticResource BoolToVisibilityConverter}, ElementName=ToolBarPen}">
-      <ListBox x:Name="ColorList"
-               Margin="1"
-               ItemsSource="{Binding ColorList}"
-               SelectedIndex="0"
-               SelectedItem="{Binding SelectedColor, Mode=TwoWay}"
-               Style="{StaticResource MaterialDesignToolToggleListBox}">
-        <ListBox.ItemTemplate>
-          <DataTemplate DataType="materialDesign:PackIcon">
-            <materialDesign:PackIcon Foreground="{Binding Converter={StaticResource ColorToBrushConverter}}" Kind="Circle" />
-          </DataTemplate>
-        </ListBox.ItemTemplate>
-      </ListBox>
-      <ListBox Margin="1"
-               ItemsSource="{Binding StrokeSizeList}"
-               SelectedIndex="0"
-               SelectedItem="{Binding SelectedStrokeSize}"
-               Style="{StaticResource MaterialDesignToolToggleListBox}">
-        <ListBox.ItemTemplate>
-          <DataTemplate DataType="materialDesign:PackIcon">
-            <materialDesign:PackIcon Width="{Binding}"
-                                     Foreground="{Binding SelectedItem, ElementName=ColorList, Converter={StaticResource ColorToBrushConverter}}"
-                                     Kind="Circle" />
-          </DataTemplate>
-        </ListBox.ItemTemplate>
-      </ListBox>
-    </StackPanel>
+    <Grid Canvas.Left="{Binding (Canvas.Left), Converter={StaticResource MathAddConverter}, ElementName=ToolBar, ConverterParameter=80}"
+          Canvas.Top="{Binding (Canvas.Top), ConverterParameter=-36, Converter={StaticResource MathAddConverter}, ElementName=ToolBar}"
+          jas:DragCanvas.CanBeDragged="False"
+          Visibility="{Binding IsChecked, ElementName=ToggleToolBarVisibility, Converter={StaticResource BoolToVisibilityConverter}}">
+      <StackPanel Orientation="Horizontal" Visibility="{Binding IsSelected, Converter={StaticResource BoolToVisibilityConverter}, ElementName=ToolBarPen}">
+        <ListBox x:Name="ColorList"
+                 Margin="1"
+                 ItemsSource="{Binding ColorList}"
+                 SelectedIndex="0"
+                 SelectedItem="{Binding SelectedColor, Mode=TwoWay}"
+                 Style="{StaticResource MaterialDesignToolToggleListBox}">
+          <ListBox.ItemTemplate>
+            <DataTemplate DataType="materialDesign:PackIcon">
+              <materialDesign:PackIcon Foreground="{Binding Converter={StaticResource ColorToBrushConverter}}" Kind="Circle" />
+            </DataTemplate>
+          </ListBox.ItemTemplate>
+        </ListBox>
+        <ListBox Margin="1"
+                 ItemsSource="{Binding StrokeSizeList}"
+                 SelectedIndex="0"
+                 SelectedItem="{Binding SelectedStrokeSize}"
+                 Style="{StaticResource MaterialDesignToolToggleListBox}">
+          <ListBox.ItemTemplate>
+            <DataTemplate DataType="materialDesign:PackIcon">
+              <materialDesign:PackIcon Width="{Binding}"
+                                       Foreground="{Binding SelectedItem, ElementName=ColorList, Converter={StaticResource ColorToBrushConverter}}"
+                                       Kind="Circle" />
+            </DataTemplate>
+          </ListBox.ItemTemplate>
+        </ListBox>
+      </StackPanel>
+    </Grid>
+
   </jas:DragCanvas>
 </UserControl>