Merge pull request #5 from jayfunc/dev

Add dock mode, improve glow effect, fix bugs ...

.gitignore

@@ -404,4 +404,5 @@ FodyWeavers.xsd
 *.msp
 
 # JetBrains Rider
-*.sln.iml
+*.sln.iml
+/BetterLyrics.WinUI3/BetterLyrics.WinUI3 (Package)/BetterLyrics.WinUI3 (Package)_TemporaryKey.pfx

BetterLyrics.WinUI3/BetterLyrics.WinUI3 (Package)/Package.appxmanifest

@@ -10,8 +10,8 @@
 
   <Identity
     Name="37412.BetterLyrics"
-    Publisher="CN=E1428B0E-DC1D-4EA4-ACB1-4556569D5BA9"
-    Version="1.0.1.0" />
+    Publisher="CN=Zhe"
+    Version="1.0.3.0" />
 
   <mp:PhoneIdentity PhoneProductId="ca4a4830-fc19-40d9-b823-53e2bff3d816" PhonePublisherId="00000000-0000-0000-0000-000000000000"/>
 

BetterLyrics.WinUI3/BetterLyrics.WinUI3/App.xaml

@@ -5,7 +5,8 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:converter="using:BetterLyrics.WinUI3.Converter"
     xmlns:converters="using:CommunityToolkit.WinUI.Converters"
-    xmlns:local="using:BetterLyrics.WinUI3">
+    xmlns:local="using:BetterLyrics.WinUI3"
+    xmlns:media="using:CommunityToolkit.WinUI.Media">
     <Application.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
@@ -40,8 +41,10 @@
             <ExponentialEase x:Key="EaseIn" EasingMode="EaseIn" />
 
             <!--  Converter  -->
-            <converter:ThemeTypeToElementThemeConverter x:Key="ThemeTypeToElementThemeConverter" />
+            <converter:EnumToIntConverter x:Key="EnumToIntConverter" />
             <converter:ColorToBrushConverter x:Key="ColorToBrushConverter" />
+            <converter:MatchedLocalFilesPathToVisibilityConverter x:Key="MatchedLocalFilesPathToVisibilityConverter" />
+            <converter:IntToCornerRadius x:Key="IntToCornerRadius" />
             <converters:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
             <converters:BoolNegationConverter x:Key="BoolNegationConverter" />
             <converters:ColorToDisplayNameConverter x:Key="ColorToDisplayNameConverter" />
@@ -57,6 +60,34 @@
                     <Setter Property="Margin" Value="1,30,0,6" />
                 </Style.Setters>
             </Style>
+            <Style x:Key="TitleBarButtonStyle" TargetType="Button">
+                <Setter Property="VerticalAlignment" Value="Stretch" />
+                <Setter Property="CornerRadius" Value="4" />
+                <Setter Property="BorderThickness" Value="0" />
+                <Setter Property="Padding" Value="16,0" />
+                <Setter Property="Background" Value="Transparent" />
+            </Style>
+            <Style x:Key="GhostButtonStyle" TargetType="Button">
+                <Setter Property="VerticalAlignment" Value="Stretch" />
+                <Setter Property="CornerRadius" Value="4" />
+                <Setter Property="BorderThickness" Value="0" />
+                <Setter Property="Background" Value="Transparent" />
+            </Style>
+            <Style x:Key="TitleBarToggleButtonStyle" TargetType="ToggleButton">
+                <Setter Property="CornerRadius" Value="4" />
+                <Setter Property="VerticalAlignment" Value="Stretch" />
+                <Setter Property="BorderThickness" Value="0" />
+                <Setter Property="Padding" Value="16,0" />
+                <Setter Property="Background" Value="Transparent" />
+            </Style>
+            <Style x:Key="GhostToggleButtonStyle" TargetType="ToggleButton">
+                <Setter Property="CornerRadius" Value="4" />
+                <Setter Property="VerticalAlignment" Value="Stretch" />
+                <Setter Property="BorderThickness" Value="0" />
+                <Setter Property="Background" Value="Transparent" />
+            </Style>
+
+            <!--  Dimensions  -->
 
         </ResourceDictionary>
     </Application.Resources>

BetterLyrics.WinUI3/BetterLyrics.WinUI3/App.xaml.cs

@@ -1,9 +1,9 @@
-using System;
-using System.Collections.Generic;
-using System.IO;
-using System.Text;
-using BetterLyrics.WinUI3.Models;
+using System.Text;
+using BetterInAppLyrics.WinUI3.ViewModels;
+using BetterLyrics.WinUI3.Helper;
+using BetterLyrics.WinUI3.Rendering;
 using BetterLyrics.WinUI3.Services.Database;
+using BetterLyrics.WinUI3.Services.Playback;
 using BetterLyrics.WinUI3.Services.Settings;
 using BetterLyrics.WinUI3.ViewModels;
 using BetterLyrics.WinUI3.Views;
@@ -13,11 +13,8 @@ using Microsoft.Extensions.Logging;
 using Microsoft.UI.Dispatching;
 using Microsoft.UI.Xaml;
 using Microsoft.Windows.ApplicationModel.Resources;
-using Microsoft.Windows.AppLifecycle;
-using Newtonsoft.Json;
 using Serilog;
-using Serilog.Core;
-using Windows.ApplicationModel.Core;
+using WinUIEx;
 
 // To learn more about WinUI, the WinUI project structure,
 // and more about our project templates, see: http://aka.ms/winui-project-info.
@@ -32,12 +29,11 @@ namespace BetterLyrics.WinUI3
         private readonly ILogger<App> _logger;
 
         public static new App Current => (App)Application.Current;
-        public MainWindow? MainWindow { get; private set; }
-        public MainWindow? SettingsWindow { get; set; }
 
         public static ResourceLoader? ResourceLoader { get; private set; }
 
-        public static DispatcherQueue DispatcherQueue => DispatcherQueue.GetForCurrentThread();
+        public static DispatcherQueue? DispatcherQueue { get; private set; }
+        public static DispatcherQueueTimer? DispatcherQueueTimer { get; private set; }
 
         /// <summary>
         /// Initializes the singleton application object.  This is the first line of authored code
@@ -47,8 +43,11 @@ namespace BetterLyrics.WinUI3
         {
             this.InitializeComponent();
 
-            App.ResourceLoader = new ResourceLoader();
+            DispatcherQueue = DispatcherQueue.GetForCurrentThread();
+            DispatcherQueueTimer = DispatcherQueue.CreateTimer();
+            ResourceLoader = new ResourceLoader();
 
+            Encoding.RegisterProvider(CodePagesEncodingProvider.Instance);
             Helper.AppInfo.EnsureDirectories();
             ConfigureServices();
 
@@ -67,18 +66,21 @@ namespace BetterLyrics.WinUI3
             // Register services
             Ioc.Default.ConfigureServices(
                 new ServiceCollection()
-                    .AddSingleton(DispatcherQueue.GetForCurrentThread())
                     .AddLogging(loggingBuilder =>
                     {
                         loggingBuilder.ClearProviders();
                         loggingBuilder.AddSerilog();
                     })
-                    // Services
-                    .AddSingleton<SettingsService>()
-                    .AddSingleton<DatabaseService>()
-                    // ViewModels
-                    .AddSingleton<MainViewModel>()
+                    // Services (Singleton)
+                    .AddSingleton<ISettingsService, SettingsService>()
+                    .AddSingleton<IDatabaseService, DatabaseService>()
+                    .AddSingleton<IPlaybackService, PlaybackService>()
+                    // ViewModels (Singleton)
+                    .AddSingleton<HostWindowViewModel>()
                     .AddSingleton<SettingsViewModel>()
+                    .AddSingleton<LyricsPageViewModel>()
+                    .AddSingleton<LyricsRendererViewModel>()
+                    .AddSingleton<LyricsSettingsControlViewModel>()
                     .BuildServiceProvider()
             );
         }
@@ -96,14 +98,9 @@ namespace BetterLyrics.WinUI3
         /// Invoked when the application is launched.
         /// </summary>
         /// <param name="args">Details about the launch request and process.</param>
-        protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs args)
+        protected override void OnLaunched(LaunchActivatedEventArgs args)
         {
-            Encoding.RegisterProvider(CodePagesEncodingProvider.Instance);
-
-            // Activate the window
-            MainWindow = new MainWindow();
-            MainWindow!.Navigate(typeof(MainPage));
-            MainWindow.Activate();
+            WindowHelper.OpenLyricsWindow();
         }
     }
 }

BetterLyrics.WinUI3/BetterLyrics.WinUI3/BetterLyrics.WinUI3.csproj

@@ -8,6 +8,7 @@
     <RuntimeIdentifiers>win-x86;win-x64;win-arm64</RuntimeIdentifiers>
     <UseWinUI>true</UseWinUI>
     <Nullable>enable</Nullable>
+    <LangVersion>preview</LangVersion>
   </PropertyGroup>
   <ItemGroup>
     <Content Include="Logo.ico" />
@@ -17,40 +18,52 @@
   </ItemGroup>
   <ItemGroup>
     <PackageReference Include="CommunityToolkit.Labs.WinUI.MarqueeText" Version="0.1.230830" />
-    <PackageReference
-      Include="CommunityToolkit.Labs.WinUI.OpacityMaskView"
-      Version="0.1.250513-build.2126"
-    />
+    <PackageReference Include="CommunityToolkit.Labs.WinUI.OpacityMaskView" Version="0.1.250513-build.2126" />
     <PackageReference Include="CommunityToolkit.Mvvm" Version="8.4.0" />
     <PackageReference Include="CommunityToolkit.WinUI.Behaviors" Version="8.2.250402" />
-    <PackageReference
-      Include="CommunityToolkit.WinUI.Controls.SettingsControls"
-      Version="8.2.250402"
-    />
+    <PackageReference Include="CommunityToolkit.WinUI.Controls.Primitives" Version="8.2.250402" />
+    <PackageReference Include="CommunityToolkit.WinUI.Controls.Segmented" Version="8.2.250402" />
+    <PackageReference Include="CommunityToolkit.WinUI.Controls.SettingsControls" Version="8.2.250402" />
     <PackageReference Include="CommunityToolkit.WinUI.Converters" Version="8.2.250402" />
     <PackageReference Include="CommunityToolkit.WinUI.Extensions" Version="8.2.250402" />
     <PackageReference Include="CommunityToolkit.WinUI.Helpers" Version="8.2.250402" />
     <PackageReference Include="CommunityToolkit.WinUI.Media" Version="8.2.250402" />
-    <PackageReference Include="DevWinUI" Version="8.2.0" />
-    <PackageReference Include="Microsoft.Extensions.DependencyInjection" Version="9.0.5" />
-    <PackageReference Include="Microsoft.Extensions.Logging" Version="9.0.5" />
+    <PackageReference Include="H.NotifyIcon.WinUI" Version="2.3.0" />
+    <PackageReference Include="Microsoft.Extensions.DependencyInjection" Version="9.0.6" />
+    <PackageReference Include="Microsoft.Extensions.Logging" Version="9.0.6" />
     <PackageReference Include="Microsoft.Graphics.Win2D" Version="1.3.2" />
     <PackageReference Include="Microsoft.Windows.SDK.BuildTools" Version="10.0.26100.4188" />
-    <PackageReference Include="Microsoft.WindowsAppSDK" Version="1.7.250513003" />
+    <PackageReference Include="Microsoft.WindowsAppSDK" Version="1.7.250606001" />
     <PackageReference Include="Microsoft.Xaml.Behaviors.WinUI.Managed" Version="3.0.0" />
     <PackageReference Include="Newtonsoft.Json" Version="13.0.3" />
     <PackageReference Include="Serilog.Extensions.Logging" Version="9.0.2" />
     <PackageReference Include="Serilog.Sinks.File" Version="7.0.0" />
     <PackageReference Include="sqlite-net-pcl" Version="1.9.172" />
-    <PackageReference Include="System.Text.Encoding.CodePages" Version="9.0.5" />
+    <PackageReference Include="System.Drawing.Common" Version="9.0.6" />
+    <PackageReference Include="System.Text.Encoding.CodePages" Version="9.0.6" />
     <PackageReference Include="Ude.NetStandard" Version="1.2.0" />
-    <PackageReference Include="z440.atl.core" Version="6.24.0" />
+    <PackageReference Include="WinUIEx" Version="2.5.1" />
+    <PackageReference Include="z440.atl.core" Version="6.25.0" />
   </ItemGroup>
   <ItemGroup>
     <Content Update="Assets\AI - 甜度爆表.mp3">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Content>
   </ItemGroup>
+  <ItemGroup>
+    <Page Update="Rendering\InAppLyricsRenderer.xaml">
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+  </ItemGroup>
+  <ItemGroup>
+    <Page Update="Rendering\DesktopLyricsRenderer.xaml">
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+  </ItemGroup>
+  <ItemGroup>
+    <Folder Include="Controls\" />
+    <Folder Include="ViewModels\Lyrics\" />
+  </ItemGroup>
   <!-- Publish Properties -->
   <PropertyGroup>
     <PublishReadyToRun Condition="'$(Configuration)' == 'Debug'">False</PublishReadyToRun>
@@ -60,8 +73,21 @@
     <SupportedOSPlatformVersion>10.0.19041.0</SupportedOSPlatformVersion>
   </PropertyGroup>
   <PropertyGroup>
-    <DefineConstants>$(DefineConstants);DISABLE_XAML_GENERATED_MAIN</DefineConstants>
+    <DefineConstants>$(DefineConstants)</DefineConstants>
     <ApplicationManifest>app.manifest</ApplicationManifest>
     <ApplicationIcon>Logo.ico</ApplicationIcon>
+    <AllowUnsafeBlocks>true</AllowUnsafeBlocks>
+    <ShouldCreateLogs>True</ShouldCreateLogs>
+    <AdvancedSettingsExpanded>True</AdvancedSettingsExpanded>
+    <UpdateAssemblyVersion>False</UpdateAssemblyVersion>
+    <UpdateAssemblyFileVersion>False</UpdateAssemblyFileVersion>
+    <UpdateAssemblyInfoVersion>False</UpdateAssemblyInfoVersion>
+    <UpdatePackageVersion>True</UpdatePackageVersion>
+    <AssemblyInfoVersionType>SettingsVersion</AssemblyInfoVersionType>
+    <InheritWinAppVersionFrom>AssemblyVersion</InheritWinAppVersionFrom>
+    <PackageVersionSettings>AssemblyVersion.None.None</PackageVersionSettings>
+    <Version>2025.6.0</Version>
+    <AssemblyVersion>2025.6.18.0110</AssemblyVersion>
+    <FileVersion>2025.6.18.0110</FileVersion>
   </PropertyGroup>
 </Project>

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Converter/EnumToIntConverter.cs

@@ -8,20 +8,24 @@ using Microsoft.UI.Xaml.Data;
 
 namespace BetterLyrics.WinUI3.Converter
 {
-    internal class ThemeTypeToElementThemeConverter : IValueConverter
+    internal class EnumToIntConverter : IValueConverter
     {
         public object Convert(object value, Type targetType, object parameter, string language)
         {
-            if (value is int themeType)
+            if (value is Enum)
             {
-                return (ElementTheme)themeType;
+                return System.Convert.ToInt32(value);
             }
-            return ElementTheme.Default;
+            return 0;
         }
 
         public object ConvertBack(object value, Type targetType, object parameter, string language)
         {
-            return 0;
+            if (value is int && targetType.IsEnum)
+            {
+                return Enum.ToObject(targetType, value);
+            }
+            return Enum.ToObject(targetType, 0);
         }
     }
 }

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Converter/IntToCornerRadius.cs

@@ -0,0 +1,27 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using BetterLyrics.WinUI3.ViewModels;
+using Microsoft.UI.Xaml.Data;
+
+namespace BetterLyrics.WinUI3.Converter
+{
+    public class IntToCornerRadius : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, string language)
+        {
+            if (value is int intValue && parameter is double controlHeight)
+            {
+                return new Microsoft.UI.Xaml.CornerRadius(intValue / 100f * controlHeight / 2);
+            }
+            return new Microsoft.UI.Xaml.CornerRadius(0);
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, string language)
+        {
+            throw new NotImplementedException();
+        }
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Converter/MatchedLocalFilesPathToVisibilityConverter.cs

@@ -0,0 +1,30 @@
+using System;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Data;
+
+namespace BetterLyrics.WinUI3.Converter
+{
+    public class MatchedLocalFilesPathToVisibilityConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, string language)
+        {
+            if (value is string path)
+            {
+                if (path == App.ResourceLoader!.GetString("MainPageNoLocalFilesMatched"))
+                {
+                    return Visibility.Collapsed;
+                }
+                else
+                {
+                    return Visibility.Visible;
+                }
+            }
+            return Visibility.Collapsed;
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, string language)
+        {
+            throw new NotImplementedException();
+        }
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Enums/AutoStartWindowType.cs

@@ -0,0 +1,14 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace BetterLyrics.WinUI3.Enums
+{
+    public enum AutoStartWindowType
+    {
+        StandardMode,
+        DockMode,
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Enums/BackdropType.cs

@@ -0,0 +1,17 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace BetterLyrics.WinUI3.Enums
+{
+    public enum BackdropType
+    {
+        None = 0,
+        Mica = 1,
+        MicaAlt = 2,
+        DesktopAcrylic = 3,
+        Transparent = 4,
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Enums/Language.cs

@@ -4,7 +4,7 @@ using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
 
-namespace BetterLyrics.WinUI3.Models
+namespace BetterLyrics.WinUI3.Enums
 {
     public enum Language
     {

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Enums/LyricsAlignmentType.cs

@@ -4,7 +4,7 @@ using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
 
-namespace BetterLyrics.WinUI3.Models
+namespace BetterLyrics.WinUI3.Enums
 {
     public enum LyricsAlignmentType
     {

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Enums/LyricsDisplayType.cs

@@ -0,0 +1,10 @@
+namespace BetterLyrics.WinUI3.Enums
+{
+    public enum LyricsDisplayType
+    {
+        AlbumArtOnly,
+        LyricsOnly,
+        SplitView,
+        PlaceholderOnly,
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Enums/LyricsFontColorType.cs

@@ -4,7 +4,7 @@ using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
 
-namespace BetterLyrics.WinUI3.Models
+namespace BetterLyrics.WinUI3.Enums
 {
     public enum LyricsFontColorType
     {

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Enums/LyricsFontWeight.cs

@@ -0,0 +1,51 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using Microsoft.UI.Text;
+using Windows.UI.Text;
+
+namespace BetterLyrics.WinUI3.Enums
+{
+    public enum LyricsFontWeight
+    {
+        Thin,
+        ExtraLight,
+        Light,
+        SemiLight,
+        Normal,
+        Medium,
+        SemiBold,
+        Bold,
+        ExtraBold,
+        Black,
+        ExtraBlack,
+    }
+
+    public static class LyricsFontWeightExtensions
+    {
+        public static FontWeight ToFontWeight(this LyricsFontWeight weight)
+        {
+            return weight switch
+            {
+                LyricsFontWeight.Thin => FontWeights.Thin,
+                LyricsFontWeight.ExtraLight => FontWeights.ExtraLight,
+                LyricsFontWeight.Light => FontWeights.Light,
+                LyricsFontWeight.SemiLight => FontWeights.SemiLight,
+                LyricsFontWeight.Normal => FontWeights.Normal,
+                LyricsFontWeight.Medium => FontWeights.Medium,
+                LyricsFontWeight.SemiBold => FontWeights.SemiBold,
+                LyricsFontWeight.Bold => FontWeights.Bold,
+                LyricsFontWeight.ExtraBold => FontWeights.ExtraBold,
+                LyricsFontWeight.Black => FontWeights.Black,
+                LyricsFontWeight.ExtraBlack => FontWeights.ExtraBlack,
+                LyricsFontWeight _ => throw new ArgumentOutOfRangeException(
+                    nameof(weight),
+                    weight,
+                    null
+                ),
+            };
+        }
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Enums/LyricsGlowEffectScope.cs

@@ -0,0 +1,15 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace BetterLyrics.WinUI3.Enums
+{
+    public enum LyricsGlowEffectScope
+    {
+        WholeLyrics,
+        CurrentLine,
+        CurrentChar,
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Enums/LyricsHighlightType.cs

@@ -0,0 +1,8 @@
+namespace BetterLyrics.WinUI3.Enums
+{
+    public enum LyricsHighlightType
+    {
+        LineByLine,
+        CharByChar,
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Enums/LyricsPlayingState.cs

@@ -4,7 +4,7 @@ using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
 
-namespace BetterLyrics.WinUI3.Models
+namespace BetterLyrics.WinUI3.Enums
 {
     public enum LyricsPlayingState
     {

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Enums/LyricsType.cs

@@ -0,0 +1,14 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace BetterLyrics.WinUI3.Enums
+{
+    public enum LyricsType
+    {
+        InAppLyrics,
+        DesktopLyrics,
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Enums/TitleBarType.cs

@@ -0,0 +1,31 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace BetterLyrics.WinUI3.Enums
+{
+    public enum TitleBarType
+    {
+        Compact,
+        Extended,
+    }
+
+    public static class TitleBarTypeExtensions
+    {
+        public static double GetHeight(this TitleBarType titleBarType)
+        {
+            return titleBarType switch
+            {
+                TitleBarType.Compact => 32.0,
+                TitleBarType.Extended => 48.0,
+                _ => throw new ArgumentOutOfRangeException(
+                    nameof(titleBarType),
+                    titleBarType,
+                    null
+                ),
+            };
+        }
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Events/IsPlayingChangedEventArgs.cs

@@ -0,0 +1,13 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace BetterLyrics.WinUI3.Events
+{
+    public class IsPlayingChangedEventArgs(bool isPlaying) : EventArgs
+    {
+        public bool IsPlaying { get; set; } = isPlaying;
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Events/PositionChangedEventArgs.cs

@@ -0,0 +1,13 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace BetterLyrics.WinUI3.Events
+{
+    public class PositionChangedEventArgs(TimeSpan position) : EventArgs()
+    {
+        public TimeSpan Position { get; set; } = position;
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Events/SongInfoChangedEventArgs.cs

@@ -0,0 +1,14 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using BetterLyrics.WinUI3.Models;
+
+namespace BetterLyrics.WinUI3.Events
+{
+    public class SongInfoChangedEventArgs(SongInfo? songInfo) : EventArgs
+    {
+        public SongInfo? SongInfo { get; set; } = songInfo;
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Helper/ColorHelper.cs

@@ -1,14 +1,32 @@
-namespace BetterLyrics.WinUI3.Helper
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using Windows.UI;
+
+namespace BetterLyrics.WinUI3.Helper
 {
-    public class ColorHelper
+    public static class ColorHelper
     {
-        public static Windows.UI.Color LerpColor(Windows.UI.Color a, Windows.UI.Color b, double t)
+        public static Windows.UI.Color ToWindowsUIColor(this System.Drawing.Color color)
         {
-            byte A = (byte)(a.A + (b.A - a.A) * t);
-            byte R = (byte)(a.R + (b.R - a.R) * t);
-            byte G = (byte)(a.G + (b.G - a.G) * t);
-            byte B = (byte)(a.B + (b.B - a.B) * t);
-            return Windows.UI.Color.FromArgb(A, R, G, B);
+            return Windows.UI.Color.FromArgb(color.A, color.R, color.G, color.B);
+        }
+
+        public static Color GetInterpolatedColor(
+            float progress,
+            Color startColor,
+            Color targetColor
+        )
+        {
+            byte Lerp(byte a, byte b) => (byte)(a + (progress * (b - a)));
+            return Color.FromArgb(
+                Lerp(startColor.A, targetColor.A),
+                Lerp(startColor.R, targetColor.R),
+                Lerp(startColor.G, targetColor.G),
+                Lerp(startColor.B, targetColor.B)
+            );
         }
     }
 }

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Helper/DockHelper.cs

@@ -0,0 +1,182 @@
+using System;
+using System.Collections.Generic;
+using System.Drawing;
+using System.Linq;
+using System.Runtime.InteropServices;
+using System.Text;
+using System.Threading.Tasks;
+using Microsoft.UI.Xaml;
+using WinRT.Interop;
+using WinUIEx;
+
+namespace BetterLyrics.WinUI3.Helper
+{
+    public static class DockHelper
+    {
+        private static readonly HashSet<IntPtr> _registered = [];
+
+        private static readonly Dictionary<IntPtr, RECT> _originalPositions = [];
+
+        private static readonly Dictionary<IntPtr, WindowStyle> _originalWindowStyle = [];
+
+        public static void Disable(Window window)
+        {
+            window.SetIsShownInSwitchers(true);
+            window.ExtendsContentIntoTitleBar = true;
+
+            IntPtr hwnd = WindowNative.GetWindowHandle(window);
+
+            window.SetWindowStyle(_originalWindowStyle[hwnd]);
+            _originalWindowStyle.Remove(hwnd);
+
+            if (_originalPositions.TryGetValue(hwnd, out var rect))
+            {
+                SetWindowPos(
+                    hwnd,
+                    IntPtr.Zero,
+                    rect.left,
+                    rect.top,
+                    rect.right - rect.left,
+                    rect.bottom - rect.top,
+                    SWP_NOACTIVATE | SWP_NOOWNERZORDER | SWP_SHOWWINDOW
+                );
+                _originalPositions.Remove(hwnd);
+            }
+
+            window.SetIsAlwaysOnTop(false);
+
+            UnregisterAppBar(hwnd);
+        }
+
+        public static void Enable(Window window, int appBarHeight)
+        {
+            window.SetIsShownInSwitchers(false);
+            window.ExtendsContentIntoTitleBar = false;
+
+            IntPtr hwnd = WindowNative.GetWindowHandle(window);
+
+            if (!_originalWindowStyle.ContainsKey(hwnd))
+            {
+                _originalWindowStyle[hwnd] = window.GetWindowStyle();
+            }
+            window.SetWindowStyle(WindowStyle.Popup | WindowStyle.Visible);
+
+            if (!_originalPositions.ContainsKey(hwnd))
+            {
+                if (GetWindowRect(hwnd, out var rect))
+                {
+                    _originalPositions[hwnd] = rect;
+                }
+            }
+
+            RegisterAppBar(hwnd, appBarHeight);
+
+            int screenWidth = GetSystemMetrics(SM_CXSCREEN);
+            int screenHeight = GetSystemMetrics(SM_CYSCREEN);
+            SetWindowPos(
+                hwnd,
+                IntPtr.Zero,
+                0,
+                0,
+                screenWidth,
+                appBarHeight,
+                SWP_NOACTIVATE | SWP_NOOWNERZORDER | SWP_SHOWWINDOW
+            );
+
+            window.SetIsAlwaysOnTop(true);
+        }
+
+        [DllImport("user32.dll", SetLastError = true)]
+        private static extern bool GetWindowRect(IntPtr hWnd, out RECT lpRect);
+
+        #region AppBar registration
+        private const uint ABM_NEW = 0x00000000;
+        private const uint ABM_REMOVE = 0x00000001;
+        private const uint ABM_SETPOS = 0x00000003;
+        private const int ABE_TOP = 1;
+
+        [StructLayout(LayoutKind.Sequential)]
+        private struct APPBARDATA
+        {
+            public int cbSize;
+            public IntPtr hWnd;
+            public uint uCallbackMessage;
+            public uint uEdge;
+            public RECT rc;
+            public int lParam;
+        }
+
+        [StructLayout(LayoutKind.Sequential)]
+        private struct RECT
+        {
+            public int left,
+                top,
+                right,
+                bottom;
+        }
+
+        [DllImport("shell32.dll", SetLastError = true)]
+        private static extern uint SHAppBarMessage(uint dwMessage, ref APPBARDATA pData);
+
+        private static void RegisterAppBar(IntPtr hwnd, int height)
+        {
+            if (_registered.Contains(hwnd))
+                return;
+
+            APPBARDATA abd = new()
+            {
+                cbSize = Marshal.SizeOf<APPBARDATA>(),
+                hWnd = hwnd,
+                uEdge = ABE_TOP,
+                rc = new RECT
+                {
+                    left = 0,
+                    top = 0,
+                    right = GetSystemMetrics(SM_CXSCREEN),
+                    bottom = height,
+                },
+            };
+
+            SHAppBarMessage(ABM_NEW, ref abd);
+            SHAppBarMessage(ABM_SETPOS, ref abd);
+
+            _registered.Add(hwnd);
+        }
+
+        private static void UnregisterAppBar(IntPtr hwnd)
+        {
+            if (!_registered.Contains(hwnd))
+                return;
+
+            APPBARDATA abd = new() { cbSize = Marshal.SizeOf<APPBARDATA>(), hWnd = hwnd };
+
+            SHAppBarMessage(ABM_REMOVE, ref abd);
+            _registered.Remove(hwnd);
+        }
+        #endregion
+
+        #region Win32 Helper and Constants
+
+        private const int SWP_NOACTIVATE = 0x0010;
+        private const int SWP_NOOWNERZORDER = 0x0200;
+        private const int SWP_SHOWWINDOW = 0x0040;
+
+        private const int SM_CXSCREEN = 0;
+        private const int SM_CYSCREEN = 0;
+
+        [DllImport("user32.dll")]
+        private static extern int GetSystemMetrics(int nIndex);
+
+        [DllImport("user32.dll", SetLastError = true)]
+        private static extern bool SetWindowPos(
+            IntPtr hWnd,
+            IntPtr hWndInsertAfter,
+            int X,
+            int Y,
+            int cx,
+            int cy,
+            uint uFlags
+        );
+        #endregion
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Helper/ForegroundWindowWatcherHelper.cs

@@ -0,0 +1,142 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Runtime.InteropServices;
+using System.Text;
+using System.Threading.Tasks;
+using Microsoft.UI.Xaml;
+
+namespace BetterLyrics.WinUI3.Helper
+{
+    public class ForegroundWindowWatcherHelper
+    {
+        private readonly WinEventDelegate _winEventDelegate;
+        private readonly List<IntPtr> _hooks = new();
+        private IntPtr _currentForeground = IntPtr.Zero;
+        private readonly IntPtr _selfHwnd;
+        private readonly DispatcherTimer _pollingTimer;
+        private DateTime _lastEventTime = DateTime.MinValue;
+        private const int ThrottleIntervalMs = 100;
+
+        public delegate void WindowChangedHandler(IntPtr hwnd);
+        private readonly WindowChangedHandler _onWindowChanged;
+
+        private const uint EVENT_SYSTEM_FOREGROUND = 0x0003;
+        private const uint EVENT_SYSTEM_MINIMIZEEND = 0x0017;
+        private const uint EVENT_OBJECT_LOCATIONCHANGE = 0x800B;
+        private const uint WINEVENT_OUTOFCONTEXT = 0x0000;
+
+        public ForegroundWindowWatcherHelper(IntPtr selfHwnd, WindowChangedHandler onWindowChanged)
+        {
+            _selfHwnd = selfHwnd;
+            _onWindowChanged = onWindowChanged;
+            _winEventDelegate = new WinEventDelegate(WinEventProc);
+
+            _pollingTimer = new DispatcherTimer { Interval = TimeSpan.FromMilliseconds(200) };
+            _pollingTimer.Tick += (_, _) =>
+            {
+                if (_currentForeground != IntPtr.Zero && _currentForeground != _selfHwnd)
+                    _onWindowChanged?.Invoke(_currentForeground);
+            };
+        }
+
+        public void Start()
+        {
+            // Hook: foreground changes and minimize end
+            _hooks.Add(
+                SetWinEventHook(
+                    EVENT_SYSTEM_FOREGROUND,
+                    EVENT_SYSTEM_MINIMIZEEND,
+                    IntPtr.Zero,
+                    _winEventDelegate,
+                    0,
+                    0,
+                    WINEVENT_OUTOFCONTEXT
+                )
+            );
+
+            // Hook: window move/resize (location change)
+            _hooks.Add(
+                SetWinEventHook(
+                    EVENT_OBJECT_LOCATIONCHANGE,
+                    EVENT_OBJECT_LOCATIONCHANGE,
+                    IntPtr.Zero,
+                    _winEventDelegate,
+                    0,
+                    0,
+                    WINEVENT_OUTOFCONTEXT
+                )
+            );
+
+            _pollingTimer.Start();
+        }
+
+        public void Stop()
+        {
+            foreach (var hook in _hooks)
+                UnhookWinEvent(hook);
+
+            _hooks.Clear();
+            _pollingTimer.Stop();
+        }
+
+        private void WinEventProc(
+            IntPtr hWinEventHook,
+            uint eventType,
+            IntPtr hwnd,
+            int idObject,
+            int idChild,
+            uint dwEventThread,
+            uint dwmsEventTime
+        )
+        {
+            if (hwnd == IntPtr.Zero || hwnd == _selfHwnd)
+                return;
+
+            var now = DateTime.Now;
+            if ((now - _lastEventTime).TotalMilliseconds < ThrottleIntervalMs)
+                return;
+
+            _lastEventTime = now;
+
+            if (eventType == EVENT_SYSTEM_FOREGROUND)
+            {
+                _currentForeground = hwnd;
+                _onWindowChanged?.Invoke(hwnd);
+            }
+            else if (
+                (eventType == EVENT_OBJECT_LOCATIONCHANGE || eventType == EVENT_SYSTEM_MINIMIZEEND)
+                && hwnd == _currentForeground
+            )
+            {
+                _onWindowChanged?.Invoke(hwnd);
+            }
+        }
+
+        #region WinAPI
+        private delegate void WinEventDelegate(
+            IntPtr hWinEventHook,
+            uint eventType,
+            IntPtr hwnd,
+            int idObject,
+            int idChild,
+            uint dwEventThread,
+            uint dwmsEventTime
+        );
+
+        [DllImport("user32.dll")]
+        private static extern IntPtr SetWinEventHook(
+            uint eventMin,
+            uint eventMax,
+            IntPtr hmodWinEventProc,
+            WinEventDelegate lpfnWinEventProc,
+            uint idProcess,
+            uint idThread,
+            uint dwFlags
+        );
+
+        [DllImport("user32.dll")]
+        private static extern bool UnhookWinEvent(IntPtr hWinEventHook);
+        #endregion
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Helper/ImageHelper.cs

@@ -1,5 +1,7 @@
 using System;
+using System.Collections.Generic;
 using System.IO;
+using System.Linq;
 using System.Runtime.InteropServices.WindowsRuntime;
 using System.Threading.Tasks;
 using Microsoft.UI.Xaml.Media;
@@ -7,11 +9,15 @@ using Microsoft.UI.Xaml.Media.Imaging;
 using Windows.Graphics.Imaging;
 using Windows.Storage;
 using Windows.Storage.Streams;
+using Windows.UI;
 
 namespace BetterLyrics.WinUI3.Helper
 {
     public class ImageHelper
     {
+        private static readonly ColorThief _colorThief = new();
+        public const int AccentColorCount = 3;
+
         public static async Task<InMemoryRandomAccessStream> GetStreamFromBytesAsync(
             byte[] imageBytes
         )
@@ -21,6 +27,26 @@ namespace BetterLyrics.WinUI3.Helper
 
             InMemoryRandomAccessStream stream = new InMemoryRandomAccessStream();
             await stream.WriteAsync(imageBytes.AsBuffer());
+
+            return stream;
+        }
+
+        public static async Task<BitmapImage> GetBitmapImageFromBytesAsync(byte[] imageBytes)
+        {
+            var stream = new InMemoryRandomAccessStream();
+            await stream.WriteAsync(imageBytes.AsBuffer());
+            stream.Seek(0);
+
+            var bitmapImage = new BitmapImage();
+            await bitmapImage.SetSourceAsync(stream);
+
+            return bitmapImage;
+        }
+
+        public static async Task<InMemoryRandomAccessStream> ByteArrayToStream(byte[] bytes)
+        {
+            var stream = new InMemoryRandomAccessStream();
+            await stream.WriteAsync(bytes.AsBuffer());
             stream.Seek(0);
 
             return stream;
@@ -33,5 +59,17 @@ namespace BetterLyrics.WinUI3.Helper
             await stream.AsStreamForRead().CopyToAsync(memoryStream);
             return memoryStream.ToArray();
         }
+
+        public static async Task<List<Color>> GetAccentColorsFromByte(byte[] bytes) =>
+            [
+                .. (
+                    await _colorThief.GetPalette(await GetDecoderFromByte(bytes), AccentColorCount)
+                ).Select(color =>
+                    Color.FromArgb(color.Color.A, color.Color.R, color.Color.G, color.Color.B)
+                ),
+            ];
+
+        public static async Task<BitmapDecoder> GetDecoderFromByte(byte[] bytes) =>
+            await BitmapDecoder.CreateAsync(await ByteArrayToStream(bytes));
     }
 }

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Helper/NativeHelper.cs

@@ -0,0 +1,37 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Runtime.InteropServices;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace BetterLyrics.WinUI3.Helper
+{
+    internal class NativeHelper
+    {
+        public const int ERROR_SUCCESS = 0;
+        public const int ERROR_INSUFFICIENT_BUFFER = 122;
+        public const int APPMODEL_ERROR_NO_PACKAGE = 15700;
+
+        [DllImport("api-ms-win-appmodel-runtime-l1-1-1", SetLastError = true)]
+        [return: MarshalAs(UnmanagedType.U4)]
+        internal static extern uint GetCurrentPackageId(ref int pBufferLength, out byte pBuffer);
+
+        public static bool IsAppPackaged
+        {
+            get
+            {
+                int bufferSize = 0;
+                byte byteBuffer = 0;
+                uint lastError = NativeHelper.GetCurrentPackageId(ref bufferSize, out byteBuffer);
+                bool isPackaged = true;
+
+                if (lastError == NativeHelper.APPMODEL_ERROR_NO_PACKAGE)
+                {
+                    isPackaged = false;
+                }
+                return isPackaged;
+            }
+        }
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Helper/SystemBackdropHelper.cs

@@ -1,4 +1,4 @@
-using DevWinUI;
+using BetterLyrics.WinUI3.Enums;
 using Microsoft.UI.Composition.SystemBackdrops;
 using Microsoft.UI.Xaml.Media;
 
@@ -11,12 +11,10 @@ namespace BetterLyrics.WinUI3.Helper
             return backdropType switch
             {
                 BackdropType.None => null,
-                BackdropType.Mica => new MicaSystemBackdrop(MicaKind.Base),
-                BackdropType.MicaAlt => new MicaSystemBackdrop(MicaKind.BaseAlt),
+                BackdropType.Mica => new MicaBackdrop { Kind = MicaKind.Base },
+                BackdropType.MicaAlt => new MicaBackdrop { Kind = MicaKind.BaseAlt },
                 BackdropType.DesktopAcrylic => new DesktopAcrylicBackdrop(),
-                BackdropType.AcrylicThin => new AcrylicSystemBackdrop(DesktopAcrylicKind.Thin),
-                BackdropType.AcrylicBase => new AcrylicSystemBackdrop(DesktopAcrylicKind.Base),
-                BackdropType.Transparent => new TransparentBackdrop(),
+                BackdropType.Transparent => new WinUIEx.TransparentTintBackdrop(),
                 _ => null,
             };
         }

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Helper/VisualHelper.cs

@@ -1,46 +0,0 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
-using Microsoft.UI.Xaml;
-using Microsoft.UI.Xaml.Media;
-
-namespace BetterLyrics.WinUI3.Helper
-{
-    public class VisualHelper
-    {
-        /// <summary>
-        /// Source: https://stackoverflow.com/a/61626933/11048731
-        /// </summary>
-        /// <typeparam name="T"></typeparam>
-        /// <param name="depObj"></param>
-        /// <returns></returns>
-        public static List<T> FindVisualChildren<T>(DependencyObject depObj)
-            where T : DependencyObject
-        {
-            List<T> list = [];
-            if (depObj != null)
-            {
-                for (int i = 0; i < VisualTreeHelper.GetChildrenCount(depObj); i++)
-                {
-                    DependencyObject child = VisualTreeHelper.GetChild(depObj, i);
-                    if (child != null && child is T t)
-                    {
-                        list.Add(t);
-                    }
-
-                    List<T> childItems = FindVisualChildren<T>(child);
-                    if (childItems != null && childItems.Count > 0)
-                    {
-                        foreach (var item in childItems)
-                        {
-                            list.Add(item);
-                        }
-                    }
-                }
-            }
-            return list;
-        }
-    }
-}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Helper/WindowColorHelper.cs

@@ -0,0 +1,106 @@
+using System;
+using System.Drawing;
+using System.Drawing.Imaging;
+using System.Runtime.InteropServices;
+
+namespace BetterLyrics.WinUI3.Helper
+{
+    public static class WindowColorHelper
+    {
+        public static Color GetDominantColorBelow(IntPtr myHwnd)
+        {
+            if (!GetWindowRect(myHwnd, out RECT myRect))
+                return Color.Transparent;
+
+            int screenWidth = GetSystemMetrics(SystemMetric.SM_CXSCREEN);
+            int sampleHeight = 1;
+            int sampleY = myRect.Bottom + 1;
+
+            return GetAverageColorFromScreenRegion(0, sampleY, screenWidth, sampleHeight);
+        }
+
+        private static Color GetAverageColorFromScreenRegion(int x, int y, int width, int height)
+        {
+            using Bitmap bmp = new(width, height, PixelFormat.Format32bppArgb);
+            using Graphics gDest = Graphics.FromImage(bmp);
+
+            IntPtr hdcDest = gDest.GetHdc();
+            IntPtr hdcSrc = GetDC(IntPtr.Zero); // Entire screen
+
+            BitBlt(hdcDest, 0, 0, width, height, hdcSrc, x, y, SRCCOPY);
+
+            gDest.ReleaseHdc(hdcDest);
+            ReleaseDC(IntPtr.Zero, hdcSrc);
+
+            return ComputeAverageColor(bmp);
+        }
+
+        private static Color ComputeAverageColor(Bitmap bmp)
+        {
+            long r = 0,
+                g = 0,
+                b = 0;
+            int count = 0;
+
+            for (int y = 0; y < bmp.Height; y++)
+            {
+                for (int x = 0; x < bmp.Width; x++)
+                {
+                    Color pixel = bmp.GetPixel(x, y);
+                    r += pixel.R;
+                    g += pixel.G;
+                    b += pixel.B;
+                    count++;
+                }
+            }
+
+            if (count == 0)
+                return Color.Transparent;
+            return Color.FromArgb((int)(r / count), (int)(g / count), (int)(b / count));
+        }
+
+        #region Win32 Imports & Structs
+        private const int SRCCOPY = 0x00CC0020;
+
+        [DllImport("user32.dll")]
+        private static extern bool GetWindowRect(IntPtr hWnd, out RECT lpRect);
+
+        [DllImport("user32.dll")]
+        private static extern IntPtr GetDC(IntPtr hWnd);
+
+        [DllImport("user32.dll")]
+        private static extern int ReleaseDC(IntPtr hWnd, IntPtr hDC);
+
+        [DllImport("gdi32.dll")]
+        private static extern bool BitBlt(
+            IntPtr hdcDest,
+            int nXDest,
+            int nYDest,
+            int nWidth,
+            int nHeight,
+            IntPtr hdcSrc,
+            int nXSrc,
+            int nYSrc,
+            int dwRop
+        );
+
+        [DllImport("user32.dll")]
+        private static extern int GetSystemMetrics(SystemMetric smIndex);
+
+        private enum SystemMetric
+        {
+            SM_CXSCREEN = 0,
+            SM_CYSCREEN = 1,
+        }
+
+        [StructLayout(LayoutKind.Sequential)]
+        private struct RECT
+        {
+            public int Left;
+            public int Top;
+            public int Right;
+            public int Bottom;
+        }
+        #endregion
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Helper/WindowHelper.cs

@@ -0,0 +1,123 @@
+using System;
+using System.Collections.Generic;
+using BetterLyrics.WinUI3.Views;
+using Microsoft.UI.Windowing;
+using Microsoft.UI.Xaml;
+using WinUIEx;
+
+namespace BetterLyrics.WinUI3.Helper
+{
+    public static class WindowHelper
+    {
+        private static readonly Dictionary<Type, Window> _windowCache = new();
+
+        public static void HideSystemTitleBar(this Window window)
+        {
+            window.ExtendsContentIntoTitleBar = true;
+            window.AppWindow.TitleBar.PreferredHeightOption = TitleBarHeightOption.Collapsed;
+        }
+
+        public static void HideSystemTitleBarAndSetCustomTitleBar(
+            this Window window,
+            UIElement titleBar
+        )
+        {
+            window.HideSystemTitleBar();
+            window.SetTitleBar(titleBar);
+        }
+
+        public static void OpenSettingsWindow()
+        {
+            OpenOrShowWindow(typeof(SettingsPage));
+        }
+
+        public static void OpenLyricsWindow()
+        {
+            OpenOrShowWindow(typeof(LyricsPage));
+        }
+
+        private static void OpenOrShowWindow(Type pageType)
+        {
+            if (_windowCache.TryGetValue(pageType, out var window))
+            {
+                if (window is HostWindow hostWindow)
+                {
+                    hostWindow.Navigate(pageType);
+                }
+                window.TryShow();
+            }
+            else
+            {
+                var newWindow = new HostWindow();
+                TrackWindow(newWindow, pageType);
+                newWindow.Navigate(pageType);
+                newWindow.Activate();
+            }
+        }
+
+        public static void TrackWindow(Window window, Type pageType = null)
+        {
+            if (pageType != null)
+            {
+                _windowCache[pageType] = window;
+            }
+
+            if (!_activeWindows.Contains(window))
+                _activeWindows.Add(window);
+        }
+
+        public static Window GetWindowForElement(UIElement element)
+        {
+            if (element.XamlRoot != null)
+            {
+                foreach (Window window in _activeWindows)
+                {
+                    if (element.XamlRoot == window.Content.XamlRoot)
+                    {
+                        return window;
+                    }
+                }
+            }
+            return null;
+        }
+
+        // get dpi for an element
+        static public double GetRasterizationScaleForElement(UIElement element)
+        {
+            if (element.XamlRoot != null)
+            {
+                foreach (Window window in _activeWindows)
+                {
+                    if (element.XamlRoot == window.Content.XamlRoot)
+                    {
+                        return element.XamlRoot.RasterizationScale;
+                    }
+                }
+            }
+            return 0.0;
+        }
+
+        public static List<Window> ActiveWindows
+        {
+            get { return _activeWindows; }
+        }
+
+        private static List<Window> _activeWindows = new List<Window>();
+
+        public static void TryShow(this Window window)
+        {
+            if (window is not null)
+            {
+                window.Activate();
+            }
+        }
+
+        public static void TryHide(this Window window)
+        {
+            if (window is not null)
+            {
+                window.Hide();
+            }
+        }
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/MainWindow.xaml

@@ -1,197 +0,0 @@
-<?xml version="1.0" encoding="utf-8" ?>
-<Window
-    x:Class="BetterLyrics.WinUI3.MainWindow"
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
-    xmlns:local="using:BetterLyrics.WinUI3"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:media="using:CommunityToolkit.WinUI.Media"
-    SizeChanged="Window_SizeChanged"
-    mc:Ignorable="d">
-
-    <Grid x:Name="RootGrid">
-
-        <Frame
-            x:Name="RootFrame"
-            Navigated="RootFrame_Navigated"
-            NavigationFailed="RootFrame_NavigationFailed" />
-
-        <Grid
-            x:Name="TopCommandGrid"
-            Padding="2,0"
-            VerticalAlignment="Top"
-            Background="Transparent"
-            Opacity="0">
-
-            <Grid.Resources>
-
-                <Storyboard x:Name="TopCommandGridFadeInStoryboard">
-                    <DoubleAnimation
-                        Storyboard.TargetName="TopCommandGrid"
-                        Storyboard.TargetProperty="Opacity"
-                        To="1"
-                        Duration="0:0:0.2" />
-                </Storyboard>
-                <Storyboard x:Name="TopCommandGridFadeOutStoryboard">
-                    <DoubleAnimation
-                        Storyboard.TargetName="TopCommandGrid"
-                        Storyboard.TargetProperty="Opacity"
-                        To="0"
-                        Duration="0:0:0.2" />
-                </Storyboard>
-
-            </Grid.Resources>
-
-            <interactivity:Interaction.Behaviors>
-
-                <interactivity:EventTriggerBehavior EventName="PointerEntered">
-                    <interactivity:ControlStoryboardAction Storyboard="{StaticResource TopCommandGridFadeInStoryboard}" />
-                </interactivity:EventTriggerBehavior>
-                <interactivity:EventTriggerBehavior EventName="PointerExited">
-                    <interactivity:ControlStoryboardAction Storyboard="{StaticResource TopCommandGridFadeOutStoryboard}" />
-                </interactivity:EventTriggerBehavior>
-
-            </interactivity:Interaction.Behaviors>
-
-            <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
-
-                <ImageIcon
-                    Height="24"
-                    Margin="16,0"
-                    Source="ms-appx:///Assets/Logo.png" />
-
-                <TextBlock
-                    x:Name="AppTitleTextBlock"
-                    Margin="0,-4,0,0"
-                    VerticalAlignment="Center"
-                    Text="{x:Bind Title}" />
-
-            </StackPanel>
-
-            <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
-                <!--  Always On Top  -->
-                <AppBarButton
-                    x:Name="AOTButton"
-                    Click="AOTButton_Click"
-                    LabelPosition="Collapsed">
-                    <Grid>
-                        <FontIcon FontFamily="Segoe Fluent Icons" Glyph="&#xE840;" />
-                        <FontIcon
-                            x:Name="PinnedFontIcon"
-                            FontFamily="Segoe Fluent Icons"
-                            Glyph="&#xE841;"
-                            Opacity="0">
-                            <FontIcon.Resources>
-                                <Storyboard x:Key="ShowPinnedFontIconStoryboard">
-                                    <DoubleAnimation
-                                        Storyboard.TargetName="PinnedFontIcon"
-                                        Storyboard.TargetProperty="Opacity"
-                                        To="1"
-                                        Duration="0:0:0.3" />
-                                </Storyboard>
-                                <Storyboard x:Key="HidePinnedFontIconStoryboard">
-                                    <DoubleAnimation
-                                        Storyboard.TargetName="PinnedFontIcon"
-                                        Storyboard.TargetProperty="Opacity"
-                                        To="0"
-                                        Duration="0:0:0.3" />
-                                </Storyboard>
-                            </FontIcon.Resources>
-                        </FontIcon>
-                    </Grid>
-                </AppBarButton>
-
-                <!--  Window Mini  -->
-                <AppBarButton
-                    x:Name="MiniButton"
-                    Click="MiniButton_Click"
-                    LabelPosition="Collapsed"
-                    Visibility="Collapsed">
-                    <FontIcon FontFamily="Segoe Fluent Icons" Glyph="&#xEE49;" />
-                </AppBarButton>
-                <!--  Window Unmini  -->
-                <AppBarButton
-                    x:Name="UnminiButton"
-                    Click="UnminiButton_Click"
-                    LabelPosition="Collapsed"
-                    Visibility="Collapsed">
-                    <FontIcon FontFamily="Segoe Fluent Icons" Glyph="&#xEE47;" />
-                </AppBarButton>
-                <!--  Window Minimise  -->
-                <AppBarButton
-                    x:Name="MinimiseButton"
-                    Click="MinimiseButton_Click"
-                    LabelPosition="Collapsed">
-                    <FontIcon FontFamily="Segoe Fluent Icons" Glyph="&#xE921;" />
-                </AppBarButton>
-                <!--  Window Maximise  -->
-                <AppBarButton
-                    x:Name="MaximiseButton"
-                    Click="MaximiseButton_Click"
-                    LabelPosition="Collapsed">
-                    <FontIcon FontFamily="Segoe Fluent Icons" Glyph="&#xE922;" />
-                </AppBarButton>
-                <!--  Window Restore  -->
-                <AppBarButton
-                    x:Name="RestoreButton"
-                    Click="RestoreButton_Click"
-                    LabelPosition="Collapsed"
-                    Visibility="Collapsed">
-                    <FontIcon FontFamily="Segoe Fluent Icons" Glyph="&#xE923;" />
-                </AppBarButton>
-                <!--  Window Close  -->
-                <AppBarButton
-                    x:Name="CloseButton"
-                    Click="CloseButton_Click"
-                    LabelPosition="Collapsed">
-                    <FontIcon FontFamily="Segoe Fluent Icons" Glyph="&#xE8BB;" />
-                </AppBarButton>
-            </StackPanel>
-
-        </Grid>
-
-        <InfoBar
-            x:Name="HostInfoBar"
-            Margin="18"
-            HorizontalAlignment="Center"
-            VerticalAlignment="Bottom"
-            IsClosable="False"
-            Opacity="0">
-            <InfoBar.RenderTransform>
-                <TranslateTransform x:Name="HostInfoBarTransform" Y="20" />
-            </InfoBar.RenderTransform>
-            <InfoBar.Resources>
-                <Storyboard x:Key="InfoBarShowAndHideStoryboard">
-                    <!--  Opacity  -->
-                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="HostInfoBar" Storyboard.TargetProperty="Opacity">
-                        <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0" />
-                        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1" />
-                        <EasingDoubleKeyFrame KeyTime="0:0:3.6" Value="1" />
-                        <EasingDoubleKeyFrame KeyTime="0:0:3.9" Value="0" />
-                    </DoubleAnimationUsingKeyFrames>
-
-                    <!--  Y  -->
-                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="HostInfoBarTransform" Storyboard.TargetProperty="Y">
-                        <EasingDoubleKeyFrame KeyTime="0:0:0" Value="20" />
-                        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0" />
-                        <EasingDoubleKeyFrame KeyTime="0:0:3.6" Value="0" />
-                        <EasingDoubleKeyFrame KeyTime="0:0:3.9" Value="20" />
-                    </DoubleAnimationUsingKeyFrames>
-                </Storyboard>
-            </InfoBar.Resources>
-            <interactivity:Interaction.Behaviors>
-                <behaviors:StackedNotificationsBehavior x:Name="NotificationQueue" />
-                <interactivity:DataTriggerBehavior
-                    Binding="{Binding ElementName=HostInfoBar, Path=IsOpen, Mode=OneWay}"
-                    ComparisonCondition="Equal"
-                    Value="True">
-                    <interactivity:ControlStoryboardAction Storyboard="{StaticResource InfoBarShowAndHideStoryboard}" />
-                </interactivity:DataTriggerBehavior>
-            </interactivity:Interaction.Behaviors>
-        </InfoBar>
-
-    </Grid>
-</Window>

BetterLyrics.WinUI3/BetterLyrics.WinUI3/MainWindow.xaml.cs

@@ -1,178 +0,0 @@
-using System;
-using BetterLyrics.WinUI3.Helper;
-using BetterLyrics.WinUI3.Messages;
-using BetterLyrics.WinUI3.Services.Settings;
-using BetterLyrics.WinUI3.Views;
-using CommunityToolkit.Mvvm.DependencyInjection;
-using CommunityToolkit.Mvvm.Messaging;
-using CommunityToolkit.WinUI.Behaviors;
-using DevWinUI;
-using Microsoft.Graphics.Canvas.UI.Xaml;
-using Microsoft.UI.Windowing;
-using Microsoft.UI.Xaml;
-using Microsoft.UI.Xaml.Controls;
-using Microsoft.UI.Xaml.Media.Animation;
-using Microsoft.UI.Xaml.Navigation;
-
-// To learn more about WinUI, the WinUI project structure,
-// and more about our project templates, see: http://aka.ms/winui-project-info.
-
-namespace BetterLyrics.WinUI3
-{
-    /// <summary>
-    /// An empty window that can be used on its own or navigated to within a Frame.
-    /// </summary>
-    public sealed partial class MainWindow : Window
-    {
-        private readonly OverlappedPresenter _presenter;
-
-        private readonly SettingsService _settingsService;
-
-        public static StackedNotificationsBehavior? StackedNotificationsBehavior
-        {
-            get;
-            private set;
-        }
-
-        public MainWindow()
-        {
-            this.InitializeComponent();
-
-            _settingsService = Ioc.Default.GetService<SettingsService>()!;
-
-            RootGrid.RequestedTheme = (ElementTheme)_settingsService.Theme;
-            SystemBackdrop = SystemBackdropHelper.CreateSystemBackdrop(
-                (BackdropType)_settingsService.BackdropType
-            );
-
-            WeakReferenceMessenger.Default.Register<ThemeChangedMessage>(
-                this,
-                (r, m) =>
-                {
-                    RootGrid.RequestedTheme = m.Value;
-                }
-            );
-
-            WeakReferenceMessenger.Default.Register<SystemBackdropChangedMessage>(
-                this,
-                (r, m) =>
-                {
-                    SystemBackdrop = null;
-                    SystemBackdrop = SystemBackdropHelper.CreateSystemBackdrop(m.Value);
-                }
-            );
-
-            // AppWindow.SetIcon("white_round.ico");
-            StackedNotificationsBehavior = NotificationQueue;
-
-            _presenter = (OverlappedPresenter)AppWindow.Presenter;
-
-            ExtendsContentIntoTitleBar = true;
-            AppWindow.TitleBar.PreferredHeightOption = TitleBarHeightOption.Collapsed;
-            SetTitleBar(TopCommandGrid);
-        }
-
-        public void Navigate(Type type)
-        {
-            RootFrame.Navigate(type);
-        }
-
-        private void RootFrame_NavigationFailed(object sender, NavigationFailedEventArgs e)
-        {
-            throw new Exception("Failed to load Page " + e.SourcePageType.FullName);
-        }
-
-        private void CloseButton_Click(object sender, RoutedEventArgs e)
-        {
-            if (RootFrame.CurrentSourcePageType == typeof(MainPage))
-            {
-                (
-                    (RootFrame.Content as MainPage)!.FindChild("LyricsCanvas")
-                    as CanvasAnimatedControl
-                )!.Paused = true;
-                App.Current.Exit();
-            }
-            else if (RootFrame.CurrentSourcePageType == typeof(SettingsPage))
-            {
-                App.Current.SettingsWindow!.AppWindow.Hide();
-            }
-        }
-
-        private void MaximiseButton_Click(object sender, RoutedEventArgs e)
-        {
-            _presenter.Maximize();
-            //MaximiseButton.Visibility = Visibility.Collapsed;
-            //RestoreButton.Visibility = Visibility.Visible;
-        }
-
-        private void MinimiseButton_Click(object sender, RoutedEventArgs e)
-        {
-            _presenter.Minimize();
-        }
-
-        private void RestoreButton_Click(object sender, RoutedEventArgs e)
-        {
-            _presenter.Restore();
-            //MaximiseButton.Visibility = Visibility.Visible;
-            //RestoreButton.Visibility = Visibility.Collapsed;
-        }
-
-        private void Window_SizeChanged(object sender, WindowSizeChangedEventArgs args)
-        {
-            if (_presenter.State == OverlappedPresenterState.Maximized)
-            {
-                MaximiseButton.Visibility = Visibility.Collapsed;
-                RestoreButton.Visibility = Visibility.Visible;
-            }
-            else if (_presenter.State == OverlappedPresenterState.Restored)
-            {
-                MaximiseButton.Visibility = Visibility.Visible;
-                RestoreButton.Visibility = Visibility.Collapsed;
-            }
-        }
-
-        private void MiniButton_Click(object sender, RoutedEventArgs e)
-        {
-            AppWindow.Resize(new Windows.Graphics.SizeInt32(144, 48));
-            MiniButton.Visibility = Visibility.Collapsed;
-            UnminiButton.Visibility = Visibility.Visible;
-            MinimiseButton.Visibility = Visibility.Collapsed;
-            MaximiseButton.Visibility = Visibility.Collapsed;
-            RestoreButton.Visibility = Visibility.Collapsed;
-            CloseButton.Visibility = Visibility.Collapsed;
-        }
-
-        private void UnminiButton_Click(object sender, RoutedEventArgs e)
-        {
-            AppWindow.Resize(new Windows.Graphics.SizeInt32(800, 600));
-            MiniButton.Visibility = Visibility.Visible;
-            UnminiButton.Visibility = Visibility.Collapsed;
-            MinimiseButton.Visibility = Visibility.Visible;
-            MaximiseButton.Visibility = Visibility.Visible;
-            RestoreButton.Visibility = Visibility.Collapsed;
-            CloseButton.Visibility = Visibility.Visible;
-        }
-
-        private void RootFrame_Navigated(object sender, NavigationEventArgs e)
-        {
-            AppWindow.Title = Title = App.ResourceLoader!.GetString(
-                $"{e.SourcePageType.Name}Title"
-            );
-        }
-
-        private void AOTButton_Click(object sender, RoutedEventArgs e)
-        {
-            _presenter.IsAlwaysOnTop = !_presenter.IsAlwaysOnTop;
-            string prefix;
-            if (_presenter.IsAlwaysOnTop)
-            {
-                prefix = "Show";
-            }
-            else
-            {
-                prefix = "Hide";
-            }
-            (PinnedFontIcon.Resources[$"{prefix}PinnedFontIconStoryboard"] as Storyboard)!.Begin();
-        }
-    }
-}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Messages/ShowNotificatonMessage.cs

@@ -3,11 +3,13 @@ using System.Collections.Generic;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
+using BetterLyrics.WinUI3.Models;
 using CommunityToolkit.Mvvm.Messaging.Messages;
 using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
 
 namespace BetterLyrics.WinUI3.Messages
 {
-    public class ThemeChangedMessage(ElementTheme value)
-        : ValueChangedMessage<ElementTheme>(value) { }
+    public class ShowNotificatonMessage(Notification value)
+        : ValueChangedMessage<Notification>(value) { }
 }

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Messages/SystemBackdropChangedMessage.cs

@@ -1,13 +0,0 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
-using CommunityToolkit.Mvvm.Messaging.Messages;
-using DevWinUI;
-
-namespace BetterLyrics.WinUI3.Messages
-{
-    public class SystemBackdropChangedMessage(BackdropType value)
-        : ValueChangedMessage<BackdropType>(value) { }
-}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Models/LyricsLine.cs

@@ -1,10 +1,6 @@
 using System.Collections.Generic;
-using System.Collections.ObjectModel;
-using System.Linq;
 using System.Numerics;
-using CommunityToolkit.Mvvm.ComponentModel;
-using Microsoft.Graphics.Canvas.Text;
-using Windows.Foundation;
+using BetterLyrics.WinUI3.Enums;
 
 namespace BetterLyrics.WinUI3.Models
 {
@@ -37,6 +33,23 @@ namespace BetterLyrics.WinUI3.Models
 
         public float Opacity { get; set; }
 
-        public CanvasTextLayout TextLayout { get; set; }
+        public LyricsLine Clone()
+        {
+            return new LyricsLine
+            {
+                Texts = new List<string>(this.Texts),
+                LanguageIndex = this.LanguageIndex,
+                StartPlayingTimestampMs = this.StartPlayingTimestampMs,
+                EndPlayingTimestampMs = this.EndPlayingTimestampMs,
+                PlayingState = this.PlayingState,
+                EnteringProgress = this.EnteringProgress,
+                ExitingProgress = this.ExitingProgress,
+                PlayingProgress = this.PlayingProgress,
+                Position = this.Position,
+                CenterPosition = this.CenterPosition,
+                Scale = this.Scale,
+                Opacity = this.Opacity,
+            };
+        }
     }
 }

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Models/Notification.cs

@@ -0,0 +1,43 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using CommunityToolkit.Mvvm.ComponentModel;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+
+namespace BetterLyrics.WinUI3.Models
+{
+    public partial class Notification : ObservableObject
+    {
+        [ObservableProperty]
+        private InfoBarSeverity _severity;
+
+        [ObservableProperty]
+        private string? _message;
+
+        [ObservableProperty]
+        private bool _isForeverDismissable;
+
+        [ObservableProperty]
+        private Visibility _visibility;
+
+        [ObservableProperty]
+        private string? _relatedSettingsKeyName;
+
+        public Notification(
+            string? message = null,
+            InfoBarSeverity severity = InfoBarSeverity.Informational,
+            bool isForeverDismissable = false,
+            string? relatedSettingsKeyName = null
+        )
+        {
+            Message = message;
+            Severity = severity;
+            IsForeverDismissable = isForeverDismissable;
+            Visibility = IsForeverDismissable ? Visibility.Visible : Visibility.Collapsed;
+            RelatedSettingsKeyName = relatedSettingsKeyName;
+        }
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Models/SongInfo.cs

@@ -0,0 +1,106 @@
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Linq;
+using ATL;
+using BetterLyrics.WinUI3.Helper;
+using CommunityToolkit.Mvvm.ComponentModel;
+using Microsoft.UI;
+using Windows.UI;
+using static ATL.LyricsInfo;
+
+namespace BetterLyrics.WinUI3.Models
+{
+    public partial class SongInfo : ObservableObject
+    {
+        [ObservableProperty]
+        public partial string? Title { get; set; }
+
+        [ObservableProperty]
+        public partial string? Artist { get; set; }
+
+        [ObservableProperty]
+        public partial ObservableCollection<string>? FilesFound { get; set; }
+
+        [ObservableProperty]
+        public partial bool IsLyricsExisted { get; set; } = false;
+
+        [ObservableProperty]
+        public partial string? SourceAppUserModelId { get; set; } = null;
+
+        [ObservableProperty]
+        public partial List<LyricsLine>? LyricsLines { get; set; } = null;
+        public byte[]? AlbumArt { get; set; } = null;
+
+        [ObservableProperty]
+        public partial List<Color>? CoverImageDominantColors { get; set; } = null;
+
+        public SongInfo() { }
+
+        /// <summary>
+        /// Try to parse lyrics from the track, optionally override the raw lyrics string.
+        /// </summary>
+        /// <param name="track"></param>
+        /// <param name="overrideRaw"></param>
+        public void ParseLyrics(Track track, string? overrideRaw = null)
+        {
+            List<LyricsLine>? result = null;
+
+            if (overrideRaw != null)
+                track.Lyrics.ParseLRC(overrideRaw);
+
+            var lyricsPhrases = track.Lyrics.SynchronizedLyrics;
+
+            if (lyricsPhrases?.Count > 0)
+            {
+                if (lyricsPhrases[0].TimestampMs > 0)
+                {
+                    var placeholder = new LyricsPhrase(0, $"{track.Artist} - {track.Title}");
+                    lyricsPhrases.Insert(0, placeholder);
+                    lyricsPhrases.Insert(0, placeholder);
+                }
+            }
+
+            LyricsLine? lyricsLine = null;
+
+            for (int i = 0; i < lyricsPhrases?.Count; i++)
+            {
+                var lyricsPhrase = lyricsPhrases[i];
+                int startTimestampMs = lyricsPhrase.TimestampMs;
+                int endTimestampMs;
+
+                if (i + 1 < lyricsPhrases.Count)
+                {
+                    endTimestampMs = lyricsPhrases[i + 1].TimestampMs;
+                }
+                else
+                {
+                    endTimestampMs = (int)track.DurationMs;
+                }
+
+                lyricsLine ??= new LyricsLine { StartPlayingTimestampMs = startTimestampMs };
+
+                lyricsLine.Texts.Add(lyricsPhrase.Text);
+
+                if (endTimestampMs == startTimestampMs)
+                {
+                    continue;
+                }
+                else
+                {
+                    lyricsLine.EndPlayingTimestampMs = endTimestampMs;
+                    result ??= [];
+                    result.Add(lyricsLine);
+                    lyricsLine = null;
+                }
+            }
+
+            if (result != null && result.Count == 0)
+            {
+                result = null;
+            }
+
+            LyricsLines = result;
+            IsLyricsExisted = result != null;
+        }
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Program.cs

@@ -1,116 +0,0 @@
-using System;
-using System.Diagnostics;
-using System.Runtime.InteropServices;
-using System.Threading;
-using System.Threading.Tasks;
-using Microsoft.UI.Dispatching;
-using Microsoft.UI.Xaml;
-using Microsoft.Windows.AppLifecycle;
-
-namespace BetterLyrics.WinUI3
-{
-    public class Program
-    {
-        [STAThread]
-        static int Main(string[] args)
-        {
-            WinRT.ComWrappersSupport.InitializeComWrappers();
-            bool isRedirect = DecideRedirection();
-
-            if (!isRedirect)
-            {
-                Application.Start(
-                    (p) =>
-                    {
-                        var context = new DispatcherQueueSynchronizationContext(
-                            DispatcherQueue.GetForCurrentThread()
-                        );
-                        SynchronizationContext.SetSynchronizationContext(context);
-                        _ = new App();
-                    }
-                );
-            }
-
-            return 0;
-        }
-
-        private static bool DecideRedirection()
-        {
-            bool isRedirect = false;
-            AppActivationArguments args = AppInstance.GetCurrent().GetActivatedEventArgs();
-            ExtendedActivationKind kind = args.Kind;
-            AppInstance keyInstance = AppInstance.FindOrRegisterForKey(Helper.AppInfo.AppName);
-
-            if (keyInstance.IsCurrent)
-            {
-                keyInstance.Activated += OnActivated;
-            }
-            else
-            {
-                isRedirect = true;
-                RedirectActivationTo(args, keyInstance);
-            }
-
-            return isRedirect;
-        }
-
-        [DllImport("kernel32.dll", CharSet = CharSet.Unicode)]
-        private static extern IntPtr CreateEvent(
-            IntPtr lpEventAttributes,
-            bool bManualReset,
-            bool bInitialState,
-            string lpName
-        );
-
-        [DllImport("kernel32.dll")]
-        private static extern bool SetEvent(IntPtr hEvent);
-
-        [DllImport("ole32.dll")]
-        private static extern uint CoWaitForMultipleObjects(
-            uint dwFlags,
-            uint dwMilliseconds,
-            ulong nHandles,
-            IntPtr[] pHandles,
-            out uint dwIndex
-        );
-
-        [DllImport("user32.dll")]
-        static extern bool SetForegroundWindow(IntPtr hWnd);
-
-        private static IntPtr redirectEventHandle = IntPtr.Zero;
-
-        // Do the redirection on another thread, and use a non-blocking
-        // wait method to wait for the redirection to complete.
-        public static void RedirectActivationTo(
-            AppActivationArguments args,
-            AppInstance keyInstance
-        )
-        {
-            redirectEventHandle = CreateEvent(IntPtr.Zero, true, false, null);
-            Task.Run(() =>
-            {
-                keyInstance.RedirectActivationToAsync(args).AsTask().Wait();
-                SetEvent(redirectEventHandle);
-            });
-
-            uint CWMO_DEFAULT = 0;
-            uint INFINITE = 0xFFFFFFFF;
-            _ = CoWaitForMultipleObjects(
-                CWMO_DEFAULT,
-                INFINITE,
-                1,
-                [redirectEventHandle],
-                out uint handleIndex
-            );
-
-            // Bring the window to the foreground
-            Process process = Process.GetProcessById((int)keyInstance.ProcessId);
-            SetForegroundWindow(process.MainWindowHandle);
-        }
-
-        private static void OnActivated(object sender, AppActivationArguments args)
-        {
-            ExtendedActivationKind kind = args.Kind;
-        }
-    }
-}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Properties/PublishProfiles/win-arm64.pubxml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+https://go.microsoft.com/fwlink/?LinkID=208121.
+-->
+<Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <PropertyGroup>
+    <PublishProtocol>FileSystem</PublishProtocol>
+    <Platform>ARM64</Platform>
+    <RuntimeIdentifier>win-arm64</RuntimeIdentifier>
+    <PublishDir>bin\\\win-arm64\publish\</PublishDir>
+    <SelfContained>true</SelfContained>
+    <PublishSingleFile>false</PublishSingleFile>
+    <Configuration>Release</Configuration>
+    <TargetFramework>net8.0-windows10.0.26100.0</TargetFramework>
+  </PropertyGroup>
+</Project>

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Properties/PublishProfiles/win-x64.pubxml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+https://go.microsoft.com/fwlink/?LinkID=208121.
+-->
+<Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <PropertyGroup>
+    <PublishProtocol>FileSystem</PublishProtocol>
+    <Platform>x64</Platform>
+    <RuntimeIdentifier>win-x64</RuntimeIdentifier>
+    <PublishDir>bin\\\win-x64\publish\</PublishDir>
+    <SelfContained>true</SelfContained>
+    <PublishSingleFile>false</PublishSingleFile>
+    <Configuration>Release</Configuration>
+    <TargetFramework>net8.0-windows10.0.26100.0</TargetFramework>
+  </PropertyGroup>
+</Project>

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Properties/PublishProfiles/win-x86.pubxml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+https://go.microsoft.com/fwlink/?LinkID=208121.
+-->
+<Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <PropertyGroup>
+    <PublishProtocol>FileSystem</PublishProtocol>
+    <Platform>x86</Platform>
+    <RuntimeIdentifier>win-x86</RuntimeIdentifier>
+    <PublishDir>bin\\\win-x86\publish\</PublishDir>
+    <SelfContained>true</SelfContained>
+    <PublishSingleFile>false</PublishSingleFile>
+    <Configuration>Release</Configuration>
+    <TargetFramework>net8.0-windows10.0.26100.0</TargetFramework>
+  </PropertyGroup>
+</Project>

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Renderer/LyricsRenderer.xaml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<UserControl
+    x:Class="BetterLyrics.WinUI3.Renderer.LyricsRenderer"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="using:BetterLyrics.WinUI3.Renderer"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d">
+
+    <Grid>
+        <canvas:CanvasAnimatedControl
+            x:Name="LyricsCanvas"
+            Draw="LyricsCanvas_Draw"
+            Loaded="LyricsCanvas_Loaded"
+            Paused="{x:Bind ViewModel.IsPlaying, Mode=OneWay, Converter={StaticResource BoolNegationConverter}}"
+            Update="LyricsCanvas_Update" />
+    </Grid>
+</UserControl>

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Renderer/LyricsRenderer.xaml.cs

@@ -0,0 +1,43 @@
+using System.Diagnostics;
+using BetterLyrics.WinUI3.ViewModels;
+using CommunityToolkit.Mvvm.DependencyInjection;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+
+// To learn more about WinUI, the WinUI project structure,
+// and more about our project templates, see: http://aka.ms/winui-project-info.
+
+namespace BetterLyrics.WinUI3.Renderer
+{
+    public sealed partial class LyricsRenderer : UserControl
+    {
+        public LyricsRendererViewModel ViewModel { get; set; }
+
+        public LyricsRenderer()
+        {
+            InitializeComponent();
+            ViewModel = Ioc.Default.GetRequiredService<LyricsRendererViewModel>();
+        }
+
+        private void LyricsCanvas_Draw(
+            Microsoft.Graphics.Canvas.UI.Xaml.ICanvasAnimatedControl sender,
+            Microsoft.Graphics.Canvas.UI.Xaml.CanvasAnimatedDrawEventArgs args
+        )
+        {
+            ViewModel.Draw(sender, args.DrawingSession);
+        }
+
+        private void LyricsCanvas_Update(
+            Microsoft.Graphics.Canvas.UI.Xaml.ICanvasAnimatedControl sender,
+            Microsoft.Graphics.Canvas.UI.Xaml.CanvasAnimatedUpdateEventArgs args
+        )
+        {
+            ViewModel.Calculate(sender, args);
+        }
+
+        private void LyricsCanvas_Loaded(object sender, RoutedEventArgs e)
+        {
+            ViewModel.RequestRelayout();
+        }
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Services/Database/DatabaseService.cs

@@ -1,21 +1,18 @@
-using System;
-using System.Collections.Generic;
+using System.Collections.Generic;
 using System.IO;
 using System.Text;
 using System.Threading.Tasks;
 using ATL;
-using BetterLyrics.WinUI3.Messages;
+using BetterLyrics.WinUI3.Helper;
 using BetterLyrics.WinUI3.Models;
-using BetterLyrics.WinUI3.Services.Settings;
-using CommunityToolkit.Mvvm.Messaging;
-using Microsoft.UI.Xaml;
 using SQLite;
 using Ude;
 using Windows.Media.Control;
+using Windows.Storage.Streams;
 
 namespace BetterLyrics.WinUI3.Services.Database
 {
-    public class DatabaseService
+    public class DatabaseService : IDatabaseService
     {
         private readonly SQLiteConnection _connection;
 
@@ -23,23 +20,26 @@ namespace BetterLyrics.WinUI3.Services.Database
 
         public DatabaseService()
         {
-            _connection = new SQLiteConnection(Helper.AppInfo.DatabasePath);
+            _connection = new SQLiteConnection(AppInfo.DatabasePath);
             if (_connection.GetTableInfo("MetadataIndex").Count == 0)
             {
                 _connection.CreateTable<MetadataIndex>();
             }
         }
 
-        public async Task RebuildMusicMetadataIndexDatabaseAsync(IList<string> paths)
+        public async Task RebuildDatabaseAsync(IList<string> paths)
         {
             await Task.Run(() =>
             {
                 _connection.DeleteAll<MetadataIndex>();
+
                 foreach (var path in paths)
                 {
                     if (Directory.Exists(path))
                     {
-                        foreach (var file in Directory.GetFiles(path))
+                        foreach (
+                            var file in Directory.GetFiles(path, "*.*", SearchOption.AllDirectories)
+                        )
                         {
                             var fileExtension = Path.GetExtension(file);
                             var track = new Track(file);
@@ -57,13 +57,31 @@ namespace BetterLyrics.WinUI3.Services.Database
             });
         }
 
-        public Track? GetMusicMetadata(
+        public async Task<SongInfo> FindSongInfoAsync(
             GlobalSystemMediaTransportControlsSessionMediaProperties? mediaProps
         )
         {
             if (mediaProps == null || mediaProps.Title == null || mediaProps.Artist == null)
-                return null;
+                return new();
 
+            var songInfo = new SongInfo { Title = mediaProps?.Title, Artist = mediaProps?.Artist };
+
+            // App.ResourceLoader!.GetString("MainPageNoLocalFilesMatched");
+
+            if (mediaProps?.Thumbnail is IRandomAccessStreamReference streamReference)
+            {
+                songInfo.AlbumArt = await ImageHelper.ToByteArrayAsync(streamReference);
+            }
+
+            return await FindSongInfoAsync(songInfo, mediaProps!.Title, mediaProps!.Artist);
+        }
+
+        public async Task<SongInfo> FindSongInfoAsync(
+            SongInfo initSongInfo,
+            string searchTitle,
+            string searchArtist
+        )
+        {
             var founds = _connection
                 .Table<MetadataIndex>()
                 // Look up by Title and Artist (these two props were fetched by reading metadata in music file befoe) first
@@ -73,66 +91,81 @@ namespace BetterLyrics.WinUI3.Services.Database
                     (
                         m.Title != null
                         && m.Artist != null
-                        && m.Title.Contains(mediaProps.Title)
-                        && m.Artist.Contains(mediaProps.Artist)
+                        && m.Title.Contains(searchTitle)
+                        && m.Artist.Contains(searchArtist)
                     )
                     || (
                         m.Path != null
-                        && m.Path.Contains(mediaProps.Title)
-                        && m.Path.Contains(mediaProps.Artist)
+                        && m.Path.Contains(searchTitle)
+                        && m.Path.Contains(searchArtist)
                     )
                 )
                 .ToList();
-            if (founds == null || founds.Count == 0)
+
+            foreach (var found in founds)
             {
-                return null;
+                initSongInfo.FilesFound ??= [];
+                initSongInfo.FilesFound.Add(found.Path!);
+                if (initSongInfo.LyricsLines == null || initSongInfo.AlbumArt == null)
+                {
+                    Track track = new(found.Path);
+                    initSongInfo.ParseLyrics(track);
+                    // Successfully parse lyrics info from metadata in music file
+                    if (initSongInfo.LyricsLines != null)
+                    {
+                        // Used as lyrics source
+                    }
+                    // Find lyrics file
+                    if (initSongInfo.LyricsLines == null && found?.Path?.EndsWith(".lrc") == true)
+                    {
+                        using (FileStream fs = File.OpenRead(found.Path))
+                        {
+                            _charsetDetector.Feed(fs);
+                            _charsetDetector.DataEnd();
+                        }
+
+                        string content;
+                        if (_charsetDetector.Charset != null)
+                        {
+                            Encoding encoding = Encoding.GetEncoding(_charsetDetector.Charset);
+                            content = File.ReadAllText(found.Path, encoding);
+                        }
+                        else
+                        {
+                            content = File.ReadAllText(found.Path, Encoding.UTF8);
+                        }
+                        initSongInfo.ParseLyrics(track, content);
+                        // Used as lyrics source
+                    }
+
+                    // Finf album art
+                    if (initSongInfo.AlbumArt == null)
+                    {
+                        if (track.EmbeddedPictures.Count > 0)
+                        {
+                            initSongInfo.AlbumArt = track.EmbeddedPictures[0].PictureData;
+                            // Used as album art source
+                        }
+                    }
+                }
+                else
+                    break;
+            }
+
+            if (initSongInfo.AlbumArt == null)
+            {
+                initSongInfo.CoverImageDominantColors = null;
             }
             else
             {
-                var first = new Track(founds[0].Path);
-                if (founds.Count == 1)
-                {
-                    return first;
-                }
-                else
-                {
-                    if (first.Lyrics.Exists())
-                    {
-                        return first;
-                    }
-                    else
-                    {
-                        foreach (var found in founds)
-                        {
-                            if (found.Path.EndsWith(".lrc"))
-                            {
-                                using (FileStream fs = File.OpenRead(found.Path))
-                                {
-                                    _charsetDetector.Feed(fs);
-                                    _charsetDetector.DataEnd();
-                                }
-
-                                string content;
-                                if (_charsetDetector.Charset != null)
-                                {
-                                    Encoding encoding = Encoding.GetEncoding(
-                                        _charsetDetector.Charset
-                                    );
-                                    content = File.ReadAllText(found.Path, encoding);
-                                }
-                                else
-                                {
-                                    content = File.ReadAllText(found.Path, Encoding.UTF8);
-                                }
-                                first.Lyrics.ParseLRC(content);
-
-                                return first;
-                            }
-                        }
-                        return first;
-                    }
-                }
+                initSongInfo.CoverImageDominantColors = await ImageHelper.GetAccentColorsFromByte(
+                    initSongInfo.AlbumArt
+                );
             }
+
+            if (initSongInfo.LyricsLines == null) { }
+
+            return initSongInfo;
         }
     }
 }

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Services/Database/IDatabaseService.cs

@@ -0,0 +1,25 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using BetterLyrics.WinUI3.Models;
+using Windows.Media.Control;
+
+namespace BetterLyrics.WinUI3.Services.Database
+{
+    public interface IDatabaseService
+    {
+        Task RebuildDatabaseAsync(IList<string> paths);
+
+        Task<SongInfo> FindSongInfoAsync(
+            GlobalSystemMediaTransportControlsSessionMediaProperties? mediaProps
+        );
+
+        Task<SongInfo> FindSongInfoAsync(
+            SongInfo initSongInfo,
+            string searchTitle,
+            string searchArtist
+        );
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Services/Playback/IPlaybackService.cs

@@ -0,0 +1,18 @@
+using System;
+using BetterLyrics.WinUI3.Events;
+using BetterLyrics.WinUI3.Models;
+
+namespace BetterLyrics.WinUI3.Services.Playback
+{
+    public interface IPlaybackService
+    {
+        event EventHandler<SongInfoChangedEventArgs>? SongInfoChanged;
+        event EventHandler<IsPlayingChangedEventArgs>? IsPlayingChanged;
+        event EventHandler<PositionChangedEventArgs>? PositionChanged;
+
+        void ReSendingMessages();
+        SongInfo? SongInfo { get; }
+        bool IsPlaying { get; }
+        TimeSpan Position { get; }
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Services/Playback/PlaybackService.cs

@@ -0,0 +1,185 @@
+using System;
+using System.Diagnostics;
+using System.Threading.Tasks;
+using BetterLyrics.WinUI3.Events;
+using BetterLyrics.WinUI3.Helper;
+using BetterLyrics.WinUI3.Models;
+using BetterLyrics.WinUI3.Services.Database;
+using CommunityToolkit.WinUI;
+using Microsoft.UI.Dispatching;
+using Windows.Media.Control;
+
+namespace BetterLyrics.WinUI3.Services.Playback
+{
+    public partial class PlaybackService : IPlaybackService
+    {
+        private readonly DispatcherQueue _dispatcherQueue = DispatcherQueue.GetForCurrentThread();
+
+        public event EventHandler<SongInfoChangedEventArgs>? SongInfoChanged;
+        public event EventHandler<IsPlayingChangedEventArgs>? IsPlayingChanged;
+        public event EventHandler<PositionChangedEventArgs>? PositionChanged;
+
+        private GlobalSystemMediaTransportControlsSessionManager? _sessionManager = null;
+        private GlobalSystemMediaTransportControlsSession? _currentSession = null;
+
+        public SongInfo? SongInfo { get; private set; }
+        public bool IsPlaying { get; private set; }
+        public TimeSpan Position { get; private set; }
+
+        private readonly IDatabaseService _databaseService;
+
+        public PlaybackService(IDatabaseService databaseService)
+        {
+            _databaseService = databaseService;
+            InitMediaManager().ConfigureAwait(true);
+        }
+
+        private async Task<SongInfo> GetSongInfoAsync()
+        {
+            var songInfo = await _databaseService.FindSongInfoAsync(
+                await _currentSession?.TryGetMediaPropertiesAsync()
+            );
+            songInfo.SourceAppUserModelId = _currentSession?.SourceAppUserModelId;
+            return songInfo;
+        }
+
+        private async Task InitMediaManager()
+        {
+            _sessionManager = await GlobalSystemMediaTransportControlsSessionManager.RequestAsync();
+            _sessionManager.CurrentSessionChanged += SessionManager_CurrentSessionChanged;
+
+            SessionManager_CurrentSessionChanged(_sessionManager, null);
+        }
+
+        public void ReSendingMessages()
+        {
+            // Re-send messages to update UI
+            CurrentSession_MediaPropertiesChanged(_currentSession, null);
+            CurrentSession_PlaybackInfoChanged(_currentSession, null);
+            CurrentSession_TimelinePropertiesChanged(_currentSession, null);
+        }
+
+        /// <summary>
+        /// Note: Non-UI thread
+        /// </summary>
+        /// <param name="sender"></param>
+        /// <param name="args"></param>
+        private void CurrentSession_PlaybackInfoChanged(
+            GlobalSystemMediaTransportControlsSession? sender,
+            PlaybackInfoChangedEventArgs? args
+        )
+        {
+            if (sender == null)
+            {
+                IsPlaying = false;
+            }
+            else
+            {
+                var playbackState = sender.GetPlaybackInfo().PlaybackStatus;
+                // _logger.LogDebug(playbackState.ToString());
+
+                switch (playbackState)
+                {
+                    case GlobalSystemMediaTransportControlsSessionPlaybackStatus.Closed:
+                    case GlobalSystemMediaTransportControlsSessionPlaybackStatus.Opened:
+                    case GlobalSystemMediaTransportControlsSessionPlaybackStatus.Changing:
+                    case GlobalSystemMediaTransportControlsSessionPlaybackStatus.Stopped:
+                    case GlobalSystemMediaTransportControlsSessionPlaybackStatus.Paused:
+                        IsPlaying = false;
+                        break;
+                    case GlobalSystemMediaTransportControlsSessionPlaybackStatus.Playing:
+                        IsPlaying = true;
+                        break;
+                    default:
+                        break;
+                }
+            }
+            _dispatcherQueue.TryEnqueue(() =>
+            {
+                IsPlayingChanged?.Invoke(this, new IsPlayingChangedEventArgs(IsPlaying));
+            });
+        }
+
+        private void SessionManager_CurrentSessionChanged(
+            GlobalSystemMediaTransportControlsSessionManager sender,
+            CurrentSessionChangedEventArgs? args
+        )
+        {
+            // _logger.LogDebug("SessionManager_CurrentSessionChanged");
+            // Unregister events associated with the previous session
+            if (_currentSession != null)
+            {
+                _currentSession.MediaPropertiesChanged -= CurrentSession_MediaPropertiesChanged;
+                _currentSession.PlaybackInfoChanged -= CurrentSession_PlaybackInfoChanged;
+                _currentSession.TimelinePropertiesChanged -=
+                    CurrentSession_TimelinePropertiesChanged;
+            }
+
+            // Record and register events for current session
+            _currentSession = sender.GetCurrentSession();
+
+            if (_currentSession != null)
+            {
+                _currentSession.MediaPropertiesChanged += CurrentSession_MediaPropertiesChanged;
+                _currentSession.PlaybackInfoChanged += CurrentSession_PlaybackInfoChanged;
+                _currentSession.TimelinePropertiesChanged +=
+                    CurrentSession_TimelinePropertiesChanged;
+            }
+
+            ReSendingMessages();
+        }
+
+        /// <summary>
+        /// Note: this func is invoked by non-UI thread
+        /// </summary>
+        /// <param name="sender"></param>
+        /// <param name="args"></param>
+        private void CurrentSession_MediaPropertiesChanged(
+            GlobalSystemMediaTransportControlsSession? sender,
+            MediaPropertiesChangedEventArgs? args
+        )
+        {
+            App.DispatcherQueueTimer!.Debounce(
+                async () =>
+                {
+                    // _logger.LogDebug("CurrentSession_MediaPropertiesChanged");
+                    if (sender == null)
+                        SongInfo = null;
+                    else
+                    {
+                        try
+                        {
+                            SongInfo = await GetSongInfoAsync();
+                        }
+                        catch (Exception) { }
+                    }
+                    _dispatcherQueue.TryEnqueue(() =>
+                    {
+                        SongInfoChanged?.Invoke(this, new SongInfoChangedEventArgs(SongInfo));
+                    });
+                },
+                TimeSpan.FromMilliseconds(AnimationHelper.DebounceDefaultDuration)
+            );
+        }
+
+        private void CurrentSession_TimelinePropertiesChanged(
+            GlobalSystemMediaTransportControlsSession? sender,
+            TimelinePropertiesChangedEventArgs? args
+        )
+        {
+            if (sender == null)
+            {
+                Position = TimeSpan.Zero;
+            }
+            else
+            {
+                Position = sender.GetTimelineProperties().Position;
+            }
+            _dispatcherQueue.TryEnqueue(() =>
+            {
+                PositionChanged?.Invoke(this, new PositionChangedEventArgs(Position));
+            });
+            // _logger.LogDebug(_currentTime);
+        }
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Services/Settings/ISettingsService.cs

@@ -0,0 +1,46 @@
+using System.Collections.Generic;
+using BetterLyrics.WinUI3.Enums;
+using Microsoft.UI.Text;
+using Microsoft.UI.Xaml;
+using Windows.UI.Text;
+
+namespace BetterLyrics.WinUI3.Services.Settings
+{
+    public interface ISettingsService
+    {
+        bool IsFirstRun { get; set; }
+
+        // Lyrics lib
+        List<string> MusicLibraries { get; set; }
+
+        // App appearance
+        ElementTheme ThemeType { get; set; }
+        BackdropType BackdropType { get; set; }
+        TitleBarType TitleBarType { get; set; }
+        Language Language { get; set; }
+
+        // App behavior
+        AutoStartWindowType AutoStartWindowType { get; set; }
+
+        // Album art background
+
+        bool IsCoverOverlayEnabled { get; set; }
+        bool IsDynamicCoverOverlayEnabled { get; set; }
+        int CoverOverlayOpacity { get; set; }
+        int CoverOverlayBlurAmount { get; set; }
+
+        // Album art cover style
+        int CoverImageRadius { get; set; }
+
+        // Lyrics style and effetc
+        LyricsAlignmentType LyricsAlignmentType { get; set; }
+        LyricsFontWeight LyricsFontWeight { get; set; }
+        int LyricsBlurAmount { get; set; }
+        int LyricsVerticalEdgeOpacity { get; set; }
+        float LyricsLineSpacingFactor { get; set; }
+        int LyricsFontSize { get; set; }
+        bool IsLyricsGlowEffectEnabled { get; set; }
+        LyricsGlowEffectScope LyricsGlowEffectScope { get; set; }
+        LyricsFontColorType LyricsFontColorType { get; set; }
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Services/Settings/SettingsDefaultValues.cs

@@ -1,44 +0,0 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
-using BetterLyrics.WinUI3.Models;
-
-namespace BetterLyrics.WinUI3.Services.Settings
-{
-    public static class SettingsDefaultValues
-    {
-        public const bool IsFirstRun = true;
-
-        // Theme
-        public const int ThemeType = 0; // Follow system
-
-        // Language
-        public const int Language = 0; // Default
-
-        // Music
-        public const string MusicLibraries = "[]";
-
-        // Backdrop
-        public const int BackdropType = 5; // Acrylic Base
-        public const bool IsCoverOverlayEnabled = true;
-        public const bool IsDynamicCoverOverlay = true;
-        public const int CoverOverlayOpacity = 100; // 1.0
-        public const int CoverOverlayBlurAmount = 200;
-
-        // Album art
-        public const int CoverImageRadius = 24;
-
-        // Lyrics
-        public const int LyricsAlignmentType = 1; // Center
-        public const int LyricsBlurAmount = 0;
-        public const int LyricsVerticalEdgeOpacity = 0; // 0.0
-        public const float LyricsLineSpacingFactor = 0.5f;
-        public const int LyricsFontSize = 28;
-        public const bool IsLyricsGlowEffectEnabled = false;
-        public const bool IsLyricsDynamicGlowEffectEnabled = false;
-        public const int LyricsFontColorType = 0; // Default
-        public const int LyricsFontSelectedAccentColorIndex = 0;
-    }
-}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Services/Settings/SettingsKey.cs

@@ -1,44 +0,0 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
-
-namespace BetterLyrics.WinUI3.Services.Settings
-{
-    public static class SettingsKeys
-    {
-        public const string IsFirstRun = "IsFirstRun";
-
-        // Theme
-        public const string ThemeType = "ThemeType";
-
-        // Language
-        public const string Language = "Language";
-
-        // Music
-        public const string MusicLibraries = "MusicLibraries";
-
-        // Backdrop
-        public const string BackdropType = "BackdropType";
-        public const string IsCoverOverlayEnabled = "IsCoverOverlayEnabled";
-        public const string IsDynamicCoverOverlay = "IsDynamicCoverOverlay";
-        public const string CoverOverlayOpacity = "CoverOverlayOpacity";
-        public const string CoverOverlayBlurAmount = "CoverOverlayBlurAmount";
-
-        // Album art
-        public const string CoverImageRadius = "CoverImageRadius";
-
-        // Lyrics
-        public const string LyricsAlignmentType = "LyricsAlignmentType";
-        public const string LyricsBlurAmount = "LyricsBlurAmount";
-        public const string LyricsVerticalEdgeOpacity = "LyricsVerticalEdgeOpacity";
-        public const string LyricsLineSpacingFactor = "LyricsLineSpacingFactor";
-        public const string LyricsFontSize = "LyricsFontSize";
-        public const string IsLyricsGlowEffectEnabled = "IsLyricsGlowEffectEnabled";
-        public const string IsLyricsDynamicGlowEffectEnabled = "IsLyricsDynamicGlowEffectEnabled";
-        public const string LyricsFontColorType = "LyricsFontColorType";
-        public const string LyricsFontSelectedAccentColorIndex =
-            "LyricsFontSelectedAccentColorIndex";
-    }
-}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Services/Settings/SettingsService.cs

@@ -1,269 +1,238 @@
 using System;
+using System.Collections;
 using System.Collections.Generic;
-using System.Collections.ObjectModel;
-using System.IO;
 using System.Linq;
-using System.Runtime.CompilerServices;
-using BetterLyrics.WinUI3.Messages;
+using BetterLyrics.WinUI3.Enums;
 using CommunityToolkit.Mvvm.ComponentModel;
-using CommunityToolkit.Mvvm.Messaging;
-using DevWinUI;
 using Microsoft.UI.Xaml;
 using Newtonsoft.Json;
-using Windows.Globalization;
+using Windows.Media;
 using Windows.Storage;
 
 namespace BetterLyrics.WinUI3.Services.Settings
 {
-    public partial class SettingsService : ObservableObject
+    public class SettingsService : ISettingsService
     {
         private readonly ApplicationDataContainer _localSettings;
 
+        private const string IsFirstRunKey = "IsFirstRun";
+
+        // App appearance
+        private const string ThemeTypeKey = "ThemeType";
+        private const string LanguageKey = "Language";
+        private const string MusicLibrariesKey = "MusicLibraries";
+        private const string BackdropTypeKey = "BackdropType";
+
+        // App behavior
+        private const string AutoStartWindowTypeKey = "AutoStartWindowType";
+
+        // Album art
+        private const string IsCoverOverlayEnabledKey = "IsCoverOverlayEnabled";
+        private const string IsDynamicCoverOverlayEnabledKey = "IsDynamicCoverOverlayEnabled";
+        private const string CoverOverlayOpacityKey = "CoverOverlayOpacity";
+        private const string CoverOverlayBlurAmountKey = "CoverOverlayBlurAmount";
+        private const string TitleBarTypeKey = "TitleBarType";
+        private const string CoverImageRadiusKey = "CoverImageRadius";
+
+        private const string LyricsAlignmentTypeKey = "LyricsAlignmentType";
+        private const string LyricsFontWeightKey = "LyricsFontWeightKey";
+        private const string LyricsBlurAmountKey = "LyricsBlurAmount";
+        private const string LyricsVerticalEdgeOpacityKey = "LyricsVerticalEdgeOpacity";
+        private const string LyricsLineSpacingFactorKey = "LyricsLineSpacingFactor";
+        private const string LyricsFontSizeKey = "LyricsFontSize";
+        private const string IsLyricsGlowEffectEnabledKey = "IsLyricsGlowEffectEnabled";
+        private const string IsLyricsDynamicGlowEffectEnabledKey =
+            "IsLyricsDynamicGlowEffectEnabled";
+        private const string LyricsFontColorTypeKey = "LyricsFontColorType";
+        private const string LyricsGlowEffectScopeKey = "LyricsGlowEffectScope";
+
+        // Notification
+        private const string NeverShowEnterFullScreenMessageKey = "NeverShowEnterFullScreenMessage";
+        private const string NeverShowEnterImmersiveModeMessageKey =
+            "NeverShowEnterImmersiveModeMessage";
+
+        public bool IsFirstRun
+        {
+            get => GetValue<bool>(IsFirstRunKey);
+            set => SetValue(IsFirstRunKey, value);
+        }
+
+        public ElementTheme ThemeType
+        {
+            get => (ElementTheme)GetValue<int>(ThemeTypeKey);
+            set => SetValue(ThemeTypeKey, (int)value);
+        }
+
+        public Language Language
+        {
+            get => (Language)GetValue<int>(LanguageKey);
+            set => SetValue(LanguageKey, (int)value);
+        }
+
+        public BackdropType BackdropType
+        {
+            get => (BackdropType)GetValue<int>(BackdropTypeKey);
+            set => SetValue(BackdropTypeKey, (int)value);
+        }
+
+        public AutoStartWindowType AutoStartWindowType
+        {
+            get => (AutoStartWindowType)GetValue<int>(AutoStartWindowTypeKey);
+            set => SetValue(AutoStartWindowTypeKey, (int)value);
+        }
+
+        public List<string> MusicLibraries
+        {
+            get =>
+                JsonConvert.DeserializeObject<List<string>>(
+                    GetValue<string>(MusicLibrariesKey) ?? "[]"
+                )!;
+            set => SetValue(MusicLibrariesKey, JsonConvert.SerializeObject(value));
+        }
+
+        public bool IsCoverOverlayEnabled
+        {
+            get => GetValue<bool>(IsCoverOverlayEnabledKey);
+            set => SetValue(IsCoverOverlayEnabledKey, value);
+        }
+
+        public bool IsDynamicCoverOverlayEnabled
+        {
+            get => GetValue<bool>(IsDynamicCoverOverlayEnabledKey);
+            set => SetValue(IsDynamicCoverOverlayEnabledKey, value);
+        }
+
+        public int CoverOverlayOpacity
+        {
+            get => GetValue<int>(CoverOverlayOpacityKey);
+            set => SetValue(CoverOverlayOpacityKey, value);
+        }
+
+        public int CoverOverlayBlurAmount
+        {
+            get => GetValue<int>(CoverOverlayBlurAmountKey);
+            set => SetValue(CoverOverlayBlurAmountKey, value);
+        }
+
+        public TitleBarType TitleBarType
+        {
+            get => (TitleBarType)GetValue<int>(TitleBarTypeKey);
+            set => SetValue(TitleBarTypeKey, (int)value);
+        }
+
+        public int CoverImageRadius
+        {
+            get => GetValue<int>(CoverImageRadiusKey);
+            set => SetValue(CoverImageRadiusKey, value);
+        }
+
+        public LyricsAlignmentType LyricsAlignmentType
+        {
+            get => (LyricsAlignmentType)GetValue<int>(LyricsAlignmentTypeKey);
+            set => SetValue(LyricsAlignmentTypeKey, (int)value);
+        }
+
+        public LyricsFontWeight LyricsFontWeight
+        {
+            get => (LyricsFontWeight)GetValue<int>(LyricsFontWeightKey);
+            set => SetValue(LyricsFontWeightKey, (int)value);
+        }
+
+        public int LyricsBlurAmount
+        {
+            get => GetValue<int>(LyricsBlurAmountKey);
+            set => SetValue(LyricsBlurAmountKey, value);
+        }
+
+        public int LyricsVerticalEdgeOpacity
+        {
+            get => GetValue<int>(LyricsVerticalEdgeOpacityKey);
+            set => SetValue(LyricsVerticalEdgeOpacityKey, value);
+        }
+
+        public float LyricsLineSpacingFactor
+        {
+            get => GetValue<float>(LyricsLineSpacingFactorKey);
+            set => SetValue(LyricsLineSpacingFactorKey, value);
+        }
+
+        public int LyricsFontSize
+        {
+            get => GetValue<int>(LyricsFontSizeKey);
+            set => SetValue(LyricsFontSizeKey, value);
+        }
+
+        public bool IsLyricsGlowEffectEnabled
+        {
+            get => GetValue<bool>(IsLyricsGlowEffectEnabledKey);
+            set => SetValue(IsLyricsGlowEffectEnabledKey, value);
+        }
+
+        public LyricsGlowEffectScope LyricsGlowEffectScope
+        {
+            get => (LyricsGlowEffectScope)GetValue<int>(LyricsGlowEffectScopeKey);
+            set => SetValue(LyricsGlowEffectScopeKey, (int)value);
+        }
+
+        public LyricsFontColorType LyricsFontColorType
+        {
+            get => (LyricsFontColorType)GetValue<int>(LyricsFontColorTypeKey);
+            set => SetValue(LyricsFontColorTypeKey, (int)value);
+        }
+
         public SettingsService()
         {
             _localSettings = ApplicationData.Current.LocalSettings;
 
-            _musicLibraries =
-            [
-                .. JsonConvert.DeserializeObject<List<string>>(
-                    Get(SettingsKeys.MusicLibraries, SettingsDefaultValues.MusicLibraries)!
-                )!,
-            ];
-
-            _musicLibraries.CollectionChanged += (_, _) => SaveMusicLibraries();
+            SetDefault(IsFirstRunKey, true);
+            // App appearance
+            SetDefault(ThemeTypeKey, (int)ElementTheme.Default);
+            SetDefault(LanguageKey, (int)Language.FollowSystem);
+            SetDefault(MusicLibrariesKey, "[]");
+            SetDefault(BackdropTypeKey, (int)BackdropType.DesktopAcrylic);
+            // App behavior
+            SetDefault(AutoStartWindowTypeKey, (int)AutoStartWindowType.StandardMode);
+            // Album art
+            SetDefault(IsCoverOverlayEnabledKey, true);
+            SetDefault(IsDynamicCoverOverlayEnabledKey, true);
+            SetDefault(CoverOverlayOpacityKey, 100); // 100 % = 1.1
+            SetDefault(CoverOverlayBlurAmountKey, 200);
+            SetDefault(TitleBarTypeKey, (int)TitleBarType.Compact);
+            SetDefault(CoverImageRadiusKey, 24); // 24 %
+            // Lyrics
+            SetDefault(LyricsAlignmentTypeKey, (int)LyricsAlignmentType.Center);
+            SetDefault(LyricsFontWeightKey, (int)LyricsFontWeight.Bold);
+            SetDefault(LyricsBlurAmountKey, 0);
+            SetDefault(LyricsFontColorTypeKey, (int)LyricsFontColorType.Default);
+            SetDefault(LyricsFontSizeKey, 28);
+            SetDefault(LyricsLineSpacingFactorKey, 0.5f);
+            SetDefault(LyricsVerticalEdgeOpacityKey, 0);
+            SetDefault(IsLyricsGlowEffectEnabledKey, false);
+            SetDefault(LyricsGlowEffectScopeKey, (int)LyricsGlowEffectScope.CurrentChar);
+            // Notification
+            SetDefault(NeverShowEnterFullScreenMessageKey, false);
+            SetDefault(NeverShowEnterImmersiveModeMessageKey, false);
         }
 
-        private void WatchMultipleDirectories(IEnumerable<string> directories)
-        {
-            foreach (var dir in directories)
-            {
-                if (!Directory.Exists(dir))
-                    continue;
-
-                var watcher = new FileSystemWatcher
-                {
-                    Path = dir,
-                    Filter = "*.*",
-                    NotifyFilter = NotifyFilters.FileName | NotifyFilters.LastWrite,
-                    EnableRaisingEvents = true,
-                };
-            }
-        }
-
-        private void OnFileCreated(object sender, FileSystemEventArgs e)
-        {
-            App.DispatcherQueue.TryEnqueue(() => { });
-        }
-
-        public bool IsFirstRun
-        {
-            get => Get(SettingsKeys.IsFirstRun, SettingsDefaultValues.IsFirstRun);
-            set => Set(SettingsKeys.IsFirstRun, value);
-        }
-
-        [ObservableProperty]
-        private bool _isRebuildingLyricsIndexDatabase = false;
-
-        // Theme
-        public int Theme
-        {
-            get => Get(SettingsKeys.ThemeType, SettingsDefaultValues.ThemeType);
-            set
-            {
-                Set(SettingsKeys.ThemeType, value);
-                WeakReferenceMessenger.Default.Send(new ThemeChangedMessage((ElementTheme)value));
-            }
-        }
-
-        // Music
-        private ObservableCollection<string> _musicLibraries;
-
-        public ObservableCollection<string> MusicLibraries
-        {
-            get { return _musicLibraries; }
-            set
-            {
-                if (_musicLibraries != null)
-                {
-                    _musicLibraries.CollectionChanged -= (_, _) => SaveMusicLibraries();
-                }
-
-                _musicLibraries = value;
-                _musicLibraries.CollectionChanged += (_, _) => SaveMusicLibraries();
-                SaveMusicLibraries();
-                OnPropertyChanged();
-            }
-        }
-
-        private void SaveMusicLibraries()
-        {
-            Set(SettingsKeys.MusicLibraries, JsonConvert.SerializeObject(MusicLibraries.ToList()));
-        }
-
-        // Language
-        public int Language
-        {
-            get => Get(SettingsKeys.Language, SettingsDefaultValues.Language);
-            set
-            {
-                Set(SettingsKeys.Language, value);
-                switch ((Models.Language)Language)
-                {
-                    case Models.Language.FollowSystem:
-                        ApplicationLanguages.PrimaryLanguageOverride = "";
-                        break;
-                    case Models.Language.English:
-                        ApplicationLanguages.PrimaryLanguageOverride = "en-US";
-                        break;
-                    case Models.Language.SimplifiedChinese:
-                        ApplicationLanguages.PrimaryLanguageOverride = "zh-CN";
-                        break;
-                    case Models.Language.TraditionalChinese:
-                        ApplicationLanguages.PrimaryLanguageOverride = "zh-TW";
-                        break;
-                    default:
-                        break;
-                }
-            }
-        }
-
-        // Backdrop
-        public int BackdropType
-        {
-            get => Get(SettingsKeys.BackdropType, SettingsDefaultValues.BackdropType);
-            set
-            {
-                Set(SettingsKeys.BackdropType, value);
-                WeakReferenceMessenger.Default.Send(
-                    new SystemBackdropChangedMessage((BackdropType)value)
-                );
-            }
-        }
-        public bool IsCoverOverlayEnabled
-        {
-            get =>
-                Get(
-                    SettingsKeys.IsCoverOverlayEnabled,
-                    SettingsDefaultValues.IsCoverOverlayEnabled
-                );
-            set => Set(SettingsKeys.IsCoverOverlayEnabled, value);
-        }
-        public bool IsDynamicCoverOverlay
-        {
-            get =>
-                Get(
-                    SettingsKeys.IsDynamicCoverOverlay,
-                    SettingsDefaultValues.IsDynamicCoverOverlay
-                );
-            set => Set(SettingsKeys.IsDynamicCoverOverlay, value);
-        }
-        public int CoverOverlayOpacity
-        {
-            get => Get(SettingsKeys.CoverOverlayOpacity, SettingsDefaultValues.CoverOverlayOpacity);
-            set => Set(SettingsKeys.CoverOverlayOpacity, value);
-        }
-        public int CoverOverlayBlurAmount
-        {
-            get =>
-                Get(
-                    SettingsKeys.CoverOverlayBlurAmount,
-                    SettingsDefaultValues.CoverOverlayBlurAmount
-                );
-            set => Set(SettingsKeys.CoverOverlayBlurAmount, value);
-        }
-
-        // Album art
-        public int CoverImageRadius
-        {
-            get => Get(SettingsKeys.CoverImageRadius, SettingsDefaultValues.CoverImageRadius);
-            set => Set(SettingsKeys.CoverImageRadius, value);
-        }
-
-        // Lyrics
-        public int LyricsAlignmentType
-        {
-            get => Get(SettingsKeys.LyricsAlignmentType, SettingsDefaultValues.LyricsAlignmentType);
-            set => Set(SettingsKeys.LyricsAlignmentType, value);
-        }
-        public int LyricsBlurAmount
-        {
-            get => Get(SettingsKeys.LyricsBlurAmount, SettingsDefaultValues.LyricsBlurAmount);
-            set => Set(SettingsKeys.LyricsBlurAmount, value);
-        }
-        public int LyricsVerticalEdgeOpacity
-        {
-            get =>
-                Get(
-                    SettingsKeys.LyricsVerticalEdgeOpacity,
-                    SettingsDefaultValues.LyricsVerticalEdgeOpacity
-                );
-            set => Set(SettingsKeys.LyricsVerticalEdgeOpacity, value);
-        }
-        public float LyricsLineSpacingFactor
-        {
-            get =>
-                Get(
-                    SettingsKeys.LyricsLineSpacingFactor,
-                    SettingsDefaultValues.LyricsLineSpacingFactor
-                );
-            set => Set(SettingsKeys.LyricsLineSpacingFactor, value);
-        }
-        public int LyricsFontSize
-        {
-            get => Get(SettingsKeys.LyricsFontSize, SettingsDefaultValues.LyricsFontSize);
-            set => Set(SettingsKeys.LyricsFontSize, value);
-        }
-        public bool IsLyricsGlowEffectEnabled
-        {
-            get =>
-                Get(
-                    SettingsKeys.IsLyricsGlowEffectEnabled,
-                    SettingsDefaultValues.IsLyricsGlowEffectEnabled
-                );
-            set => Set(SettingsKeys.IsLyricsGlowEffectEnabled, value);
-        }
-        public bool IsLyricsDynamicGlowEffectEnabled
-        {
-            get =>
-                Get(
-                    SettingsKeys.IsLyricsDynamicGlowEffectEnabled,
-                    SettingsDefaultValues.IsLyricsDynamicGlowEffectEnabled
-                );
-            set => Set(SettingsKeys.IsLyricsDynamicGlowEffectEnabled, value);
-        }
-        public int LyricsFontColorType
-        {
-            get => Get(SettingsKeys.LyricsFontColorType, SettingsDefaultValues.LyricsFontColorType);
-            set => Set(SettingsKeys.LyricsFontColorType, value);
-        }
-        public int LyricsFontSelectedAccentColorIndex
-        {
-            get =>
-                Get(
-                    SettingsKeys.LyricsFontSelectedAccentColorIndex,
-                    SettingsDefaultValues.LyricsFontSelectedAccentColorIndex
-                );
-            set
-            {
-                if (value >= 0)
-                    Set(SettingsKeys.LyricsFontSelectedAccentColorIndex, value);
-            }
-        }
-
-        private T? Get<T>(string key, T? defaultValue = default)
+        private T? GetValue<T>(string key)
         {
             if (_localSettings.Values.TryGetValue(key, out object? value))
             {
-                return (T)Convert.ChangeType(value, typeof(T));
+                return (T)value;
             }
-
-            return defaultValue;
+            return default;
         }
 
-        private void Set<T>(string key, T value, [CallerMemberName] string? propertyName = null)
+        private void SetValue<T>(string key, T value)
         {
             _localSettings.Values[key] = value;
-            OnPropertyChanged(propertyName);
+        }
+
+        private void SetDefault<T>(string key, T value)
+        {
+            if (_localSettings.Values.ContainsKey(key) && _localSettings.Values[key] is T)
+                return;
+            _localSettings.Values[key] = value;
         }
     }
 }

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Strings/en-US/Resources.resw

@@ -223,14 +223,11 @@
     <value>Album art background opacity</value>
   </data>
   <data name="SettingsPageTitle" xml:space="preserve">
-    <value>Settings</value>
+    <value>Settings - BetterLyrics</value>
   </data>
-  <data name="MainPageTitle" xml:space="preserve">
+  <data name="LyricsPageTitle" xml:space="preserve">
     <value>BetterLyrics</value>
   </data>
-  <data name="SettingsPageLyricsStyle.Text" xml:space="preserve">
-    <value>Lyrics style</value>
-  </data>
   <data name="SettingsPageLyricsAlignment.Header" xml:space="preserve">
     <value>Alignment</value>
   </data>
@@ -273,29 +270,29 @@
   <data name="SettingsPageLyricsFontSize.Header" xml:space="preserve">
     <value>Font size</value>
   </data>
-  <data name="MainWindowLyricsOnly.ToolTipService.ToolTip" xml:space="preserve">
-    <value>Show lyrics only</value>
+  <data name="MainPageLyriscOnly.Content" xml:space="preserve">
+    <value>Lyrics only</value>
   </data>
-  <data name="SettingsPageLyricsEffect.Text" xml:space="preserve">
-    <value>Lyrics effect</value>
+  <data name="MainWindowImmersiveMode.ToolTipService.ToolTip" xml:space="preserve">
+    <value>Immersive mode</value>
   </data>
-  <data name="SettingsPageAlbumOverlay.Text" xml:space="preserve">
+  <data name="SettingsPageAlbumOverlay.Content" xml:space="preserve">
     <value>Album background</value>
   </data>
-  <data name="SettingsPageAbout.Text" xml:space="preserve">
+  <data name="SettingsPageAbout.Content" xml:space="preserve">
     <value>About</value>
   </data>
-  <data name="SettingsPageLyricsLib.Text" xml:space="preserve">
+  <data name="SettingsPageLyricsLib.Content" xml:space="preserve">
     <value>Lyrics library</value>
   </data>
-  <data name="SettingsPageAppAppearance.Text" xml:space="preserve">
+  <data name="SettingsPageAppAppearance.Content" xml:space="preserve">
     <value>App appearance</value>
   </data>
   <data name="SettingsPageLyricsGlowEffect.Header" xml:space="preserve">
     <value>Glow effect</value>
   </data>
-  <data name="SettingsPageLyricsDynamicGlowEffect.Header" xml:space="preserve">
-    <value>Dynamic glow effect</value>
+  <data name="SettingsPageLyricsGlowEffectScope.Header" xml:space="preserve">
+    <value>Glow effect scope</value>
   </data>
   <data name="SettingsPageRebuildDatabase.Header" xml:space="preserve">
     <value>Rebuild lyrics index database</value>
@@ -309,40 +306,16 @@
   <data name="SettingsPageRebuildDatabaseDesc.Text" xml:space="preserve">
     <value>Rebuilding the database, please wait...</value>
   </data>
-  <data name="MainPageWelcomeTeachingTip.Subtitle" xml:space="preserve">
-    <value>Let's get started now</value>
-  </data>
   <data name="MainPageWelcomeTeachingTip.Title" xml:space="preserve">
     <value>Welcome to BetterLyrics</value>
   </data>
-  <data name="MainPageTitleBarTeachingTip.Title" xml:space="preserve">
-    <value>The top area is the title bar</value>
-  </data>
-  <data name="MainPageTitleBarTeachingTip.Subtitle" xml:space="preserve">
-    <value>Hover on the top area to show it</value>
-  </data>
-  <data name="MainPageInitDatabaseTeachingTip.Title" xml:space="preserve">
-    <value>Setup lyrics database now</value>
-  </data>
-  <data name="MainPageInitDatabaseTeachingTip.Subtitle" xml:space="preserve">
-    <value>Hover on the bottom left corner and then click to open settings page</value>
-  </data>
-  <data name="MainPageBottomCommandTeachingTip.Subtitle" xml:space="preserve">
-    <value>Hover on the bottom area to show it</value>
-  </data>
-  <data name="MainPageBottomCommandTeachingTip.Title" xml:space="preserve">
-    <value>The bottom area is the command area</value>
-  </data>
-  <data name="MainPageLyricsOnlyTeachingTip.Title" xml:space="preserve">
-    <value>Toggle "show lyrics only" here</value>
-  </data>
-  <data name="MainPageLyricsOnlyTeachingTip.Subtitle" xml:space="preserve">
-    <value>When lyrics exist, you can switch them in the lower right corner</value>
+  <data name="MainPageWelcomeTeachingTip.Subtitle" xml:space="preserve">
+    <value>Let's setup lyrics database now</value>
   </data>
   <data name="MainPageNoMusicPlaying.Text" xml:space="preserve">
     <value>No music playing now</value>
   </data>
-  <data name="SettingsPageDev.Text" xml:space="preserve">
+  <data name="SettingsPageDev.Content" xml:space="preserve">
     <value>Developer options</value>
   </data>
   <data name="SettingsPageMockMusicPlaying.Header" xml:space="preserve">
@@ -363,10 +336,136 @@
   <data name="SettingsPageLyricsFontColorDominant.Content" xml:space="preserve">
     <value>Album art accent color</value>
   </data>
-  <data name="SettingsPageAlbumStyle.Text" xml:space="preserve">
+  <data name="SettingsPageAlbumStyle.Content" xml:space="preserve">
     <value>Album art style</value>
   </data>
   <data name="SettingsPageAlbumRadius.Header" xml:space="preserve">
     <value>Corner radius</value>
   </data>
+  <data name="SettingsPageTitleBarType.Header" xml:space="preserve">
+    <value>Title bar size</value>
+  </data>
+  <data name="SettingsPageCompactTitleBar.Content" xml:space="preserve">
+    <value>Compact</value>
+  </data>
+  <data name="SettingsPageExtendedTitleBar.Content" xml:space="preserve">
+    <value>Extended</value>
+  </data>
+  <data name="BaseWindowAOTFlyoutItem.Text" xml:space="preserve">
+    <value>Always on top</value>
+  </data>
+  <data name="BaseWindowFullScreenFlyoutItem.Text" xml:space="preserve">
+    <value>Full screen</value>
+  </data>
+  <data name="BaseWindowEnterFullScreenHint" xml:space="preserve">
+    <value>Press Esc to exit full screen mode</value>
+  </data>
+  <data name="MainPageEnterImmersiveModeHint" xml:space="preserve">
+    <value>Hover back again to show the toggle button</value>
+  </data>
+  <data name="BaseWindowHostInfoBarCheckBox.Content" xml:space="preserve">
+    <value>Do not show this message again</value>
+  </data>
+  <data name="MainPageNoLocalFilesMatched.Text" xml:space="preserve">
+    <value>No local files matched</value>
+  </data>
+  <data name="MainPageAlbumArtOnly.Content" xml:space="preserve">
+    <value>Album art only</value>
+  </data>
+  <data name="MainPageSplitView.Content" xml:space="preserve">
+    <value>Split view</value>
+  </data>
+  <data name="MainPageDisplayTypeSwitcher.ToolTipService.ToolTip" xml:space="preserve">
+    <value>Change display type</value>
+  </data>
+  <data name="MainPageDesktopLyricsToggler.ToolTipService.ToolTip" xml:space="preserve">
+    <value>Switch to desktop lyrics mode</value>
+  </data>
+  <data name="BaseWindowMiniFlyoutItem.Text" xml:space="preserve">
+    <value>Picture-in-picture mode</value>
+  </data>
+  <data name="BaseWindowUnMiniFlyoutItem.Text" xml:space="preserve">
+    <value>Exit picture-in-picture mode</value>
+  </data>
+  <data name="MainPageLyricsNotFound.Text" xml:space="preserve">
+    <value>Lyrics not found</value>
+  </data>
+  <data name="SettingsPageLyricsEffect.Content" xml:space="preserve">
+    <value>Lyrics effect</value>
+  </data>
+  <data name="SettingsPageLyricsStyle.Content" xml:space="preserve">
+    <value>Lyrics style</value>
+  </data>
+  <data name="SettingsPagePathBeIncludedInfo" xml:space="preserve">
+    <value>This folder is already included in the existing folder and does not need to be added again</value>
+  </data>
+  <data name="SettingsPageAppBehavior.Content" xml:space="preserve">
+    <value>App behavior</value>
+  </data>
+  <data name="SettingsPageAutoStartWindow.Header" xml:space="preserve">
+    <value>When starting the app</value>
+  </data>
+  <data name="SettingsPageAutoStartInAppLyrics.Content" xml:space="preserve">
+    <value>Activate standard mode</value>
+  </data>
+  <data name="SettingsPageAutoStartDesktopLyrics.Content" xml:space="preserve">
+    <value>Activate dock mode</value>
+  </data>
+  <data name="DesktopLyricsRendererPageLyricsNotFound.Text" xml:space="preserve">
+    <value>Lyrics not found</value>
+  </data>
+  <data name="SystemTrayPageTitle" xml:space="preserve">
+    <value>System tray - BetterLyrics</value>
+  </data>
+  <data name="HostWindowDockFlyoutItem.Text" xml:space="preserve">
+    <value>Dock mode</value>
+  </data>
+  <data name="SettingsPageLyricsFontWeight.Header" xml:space="preserve">
+    <value>Font weight</value>
+  </data>
+  <data name="SettingsPageLyricsThin.Content" xml:space="preserve">
+    <value>Thin</value>
+  </data>
+  <data name="SettingsPageLyricsExtraLight.Content" xml:space="preserve">
+    <value>Extra Light</value>
+  </data>
+  <data name="SettingsPageLyricsLight.Content" xml:space="preserve">
+    <value>Light</value>
+  </data>
+  <data name="SettingsPageLyricsSemiLight.Content" xml:space="preserve">
+    <value>Semi Light</value>
+  </data>
+  <data name="SettingsPageLyricsNormal.Content" xml:space="preserve">
+    <value>Normal</value>
+  </data>
+  <data name="SettingsPageLyricsMedium.Content" xml:space="preserve">
+    <value>Medium</value>
+  </data>
+  <data name="SettingsPageLyricsSemiBold.Content" xml:space="preserve">
+    <value>Semi Bold</value>
+  </data>
+  <data name="SettingsPageLyricsBold.Content" xml:space="preserve">
+    <value>Bold</value>
+  </data>
+  <data name="SettingsPageLyricsExtraBold.Content" xml:space="preserve">
+    <value>Extra Bold</value>
+  </data>
+  <data name="SettingsPageLyricsBlack.Content" xml:space="preserve">
+    <value>Black</value>
+  </data>
+  <data name="SettingsPageLyricsExtraBlack.Content" xml:space="preserve">
+    <value>Extra Black</value>
+  </data>
+  <data name="SettingsPageLyricsGlowEffectScopeWholeLyrics.Content" xml:space="preserve">
+    <value>Whole lyrics</value>
+  </data>
+  <data name="SettingsPageLyricsGlowEffectScopeCurrentLine.Content" xml:space="preserve">
+    <value>Current line</value>
+  </data>
+  <data name="SettingsPageLyricsGlowEffectScopeCurrentChar.Content" xml:space="preserve">
+    <value>Current char</value>
+  </data>
+  <data name="HostWindowSettingsFlyoutItem.Text" xml:space="preserve">
+    <value>Settings</value>
+  </data>
 </root>

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Strings/zh-CN/Resources.resw

@@ -223,14 +223,11 @@
     <value>专辑图片背景不透明度</value>
   </data>
   <data name="SettingsPageTitle" xml:space="preserve">
-    <value>设置</value>
+    <value>设置 - BetterLyrics</value>
   </data>
-  <data name="MainPageTitle" xml:space="preserve">
+  <data name="LyricsPageTitle" xml:space="preserve">
     <value>BetterLyrics</value>
   </data>
-  <data name="SettingsPageLyricsStyle.Text" xml:space="preserve">
-    <value>歌词样式</value>
-  </data>
   <data name="SettingsPageLyricsAlignment.Header" xml:space="preserve">
     <value>对齐方式</value>
   </data>
@@ -273,29 +270,29 @@
   <data name="SettingsPageLyricsFontSize.Header" xml:space="preserve">
     <value>字体大小</value>
   </data>
-  <data name="MainWindowLyricsOnly.ToolTipService.ToolTip" xml:space="preserve">
-    <value>仅展示歌词</value>
+  <data name="MainPageLyriscOnly.Content" xml:space="preserve">
+    <value>仅显示歌词</value>
   </data>
-  <data name="SettingsPageLyricsEffect.Text" xml:space="preserve">
-    <value>歌词效果</value>
+  <data name="MainWindowImmersiveMode.ToolTipService.ToolTip" xml:space="preserve">
+    <value>沉浸模式</value>
   </data>
-  <data name="SettingsPageAlbumOverlay.Text" xml:space="preserve">
+  <data name="SettingsPageAlbumOverlay.Content" xml:space="preserve">
     <value>专辑背景</value>
   </data>
-  <data name="SettingsPageAbout.Text" xml:space="preserve">
+  <data name="SettingsPageAbout.Content" xml:space="preserve">
     <value>关于</value>
   </data>
-  <data name="SettingsPageLyricsLib.Text" xml:space="preserve">
+  <data name="SettingsPageLyricsLib.Content" xml:space="preserve">
     <value>歌词库</value>
   </data>
-  <data name="SettingsPageAppAppearance.Text" xml:space="preserve">
+  <data name="SettingsPageAppAppearance.Content" xml:space="preserve">
     <value>应用外观</value>
   </data>
   <data name="SettingsPageLyricsGlowEffect.Header" xml:space="preserve">
     <value>辉光效果</value>
   </data>
-  <data name="SettingsPageLyricsDynamicGlowEffect.Header" xml:space="preserve">
-    <value>动态辉光效果</value>
+  <data name="SettingsPageLyricsGlowEffectScope.Header" xml:space="preserve">
+    <value>辉光效果作用范围</value>
   </data>
   <data name="SettingsPageRebuildDatabase.Header" xml:space="preserve">
     <value>重构歌词索引数据库</value>
@@ -309,40 +306,16 @@
   <data name="SettingsPageRebuildDatabaseDesc.Text" xml:space="preserve">
     <value>重构数据库中，请稍候...</value>
   </data>
-  <data name="MainPageWelcomeTeachingTip.Subtitle" xml:space="preserve">
-    <value>来看看怎么使用这款应用吧</value>
-  </data>
   <data name="MainPageWelcomeTeachingTip.Title" xml:space="preserve">
     <value>欢迎使用 BetterLyrics</value>
   </data>
-  <data name="MainPageTitleBarTeachingTip.Title" xml:space="preserve">
-    <value>顶部区域是标题栏</value>
-  </data>
-  <data name="MainPageTitleBarTeachingTip.Subtitle" xml:space="preserve">
-    <value>悬停在顶部区域以显示</value>
-  </data>
-  <data name="MainPageInitDatabaseTeachingTip.Title" xml:space="preserve">
+  <data name="MainPageWelcomeTeachingTip.Subtitle" xml:space="preserve">
     <value>现在就来初始化歌词数据库吧</value>
   </data>
-  <data name="MainPageInitDatabaseTeachingTip.Subtitle" xml:space="preserve">
-    <value>悬停在左下角后单击以进入设置页面</value>
-  </data>
-  <data name="MainPageBottomCommandTeachingTip.Subtitle" xml:space="preserve">
-    <value>悬停在底部区域以显示</value>
-  </data>
-  <data name="MainPageBottomCommandTeachingTip.Title" xml:space="preserve">
-    <value>底部区域是命令栏</value>
-  </data>
-  <data name="MainPageLyricsOnlyTeachingTip.Title" xml:space="preserve">
-    <value>在此处切换“仅展示歌词”</value>
-  </data>
-  <data name="MainPageLyricsOnlyTeachingTip.Subtitle" xml:space="preserve">
-    <value>当歌词存在时可在右下角进行切换</value>
-  </data>
   <data name="MainPageNoMusicPlaying.Text" xml:space="preserve">
     <value>当前没有正在播放的音乐</value>
   </data>
-  <data name="SettingsPageDev.Text" xml:space="preserve">
+  <data name="SettingsPageDev.Content" xml:space="preserve">
     <value>开发者选项</value>
   </data>
   <data name="SettingsPageMockMusicPlaying.Header" xml:space="preserve">
@@ -363,10 +336,136 @@
   <data name="SettingsPageLyricsFontColorDominant.Content" xml:space="preserve">
     <value>专辑强调色</value>
   </data>
-  <data name="SettingsPageAlbumStyle.Text" xml:space="preserve">
+  <data name="SettingsPageAlbumStyle.Content" xml:space="preserve">
     <value>专辑封面样式</value>
   </data>
   <data name="SettingsPageAlbumRadius.Header" xml:space="preserve">
     <value>圆角半径</value>
   </data>
+  <data name="SettingsPageTitleBarType.Header" xml:space="preserve">
+    <value>标题栏大小</value>
+  </data>
+  <data name="SettingsPageCompactTitleBar.Content" xml:space="preserve">
+    <value>紧凑</value>
+  </data>
+  <data name="SettingsPageExtendedTitleBar.Content" xml:space="preserve">
+    <value>扩展</value>
+  </data>
+  <data name="BaseWindowAOTFlyoutItem.Text" xml:space="preserve">
+    <value>将应用置于顶层</value>
+  </data>
+  <data name="BaseWindowFullScreenFlyoutItem.Text" xml:space="preserve">
+    <value>全屏</value>
+  </data>
+  <data name="BaseWindowEnterFullScreenHint" xml:space="preserve">
+    <value>按 Esc 退出全屏模式</value>
+  </data>
+  <data name="MainPageEnterImmersiveModeHint" xml:space="preserve">
+    <value>再次悬停以显示切换按钮</value>
+  </data>
+  <data name="BaseWindowHostInfoBarCheckBox.Content" xml:space="preserve">
+    <value>不再显示此消息</value>
+  </data>
+  <data name="MainPageNoLocalFilesMatched.Text" xml:space="preserve">
+    <value>找不到匹配的本地文件</value>
+  </data>
+  <data name="MainPageAlbumArtOnly.Content" xml:space="preserve">
+    <value>仅显示专辑封面</value>
+  </data>
+  <data name="MainPageSplitView.Content" xml:space="preserve">
+    <value>分屏视图</value>
+  </data>
+  <data name="MainPageDisplayTypeSwitcher.ToolTipService.ToolTip" xml:space="preserve">
+    <value>切换显示模式</value>
+  </data>
+  <data name="MainPageDesktopLyricsToggler.ToolTipService.ToolTip" xml:space="preserve">
+    <value>切换到桌面歌词模式</value>
+  </data>
+  <data name="BaseWindowMiniFlyoutItem.Text" xml:space="preserve">
+    <value>画中画模式</value>
+  </data>
+  <data name="BaseWindowUnMiniFlyoutItem.Text" xml:space="preserve">
+    <value>退出画中画模式</value>
+  </data>
+  <data name="MainPageLyricsNotFound.Text" xml:space="preserve">
+    <value>未找到歌词</value>
+  </data>
+  <data name="SettingsPageLyricsEffect.Content" xml:space="preserve">
+    <value>歌词动效</value>
+  </data>
+  <data name="SettingsPageLyricsStyle.Content" xml:space="preserve">
+    <value>歌词样式</value>
+  </data>
+  <data name="SettingsPagePathBeIncludedInfo" xml:space="preserve">
+    <value>该文件夹已包含在已有文件夹中，无需再次添加</value>
+  </data>
+  <data name="SettingsPageAppBehavior.Content" xml:space="preserve">
+    <value>应用行为</value>
+  </data>
+  <data name="SettingsPageAutoStartWindow.Header" xml:space="preserve">
+    <value>启动应用时</value>
+  </data>
+  <data name="SettingsPageAutoStartInAppLyrics.Content" xml:space="preserve">
+    <value>启动标准模式</value>
+  </data>
+  <data name="SettingsPageAutoStartDesktopLyrics.Content" xml:space="preserve">
+    <value>启动停靠模式</value>
+  </data>
+  <data name="DesktopLyricsRendererPageLyricsNotFound.Text" xml:space="preserve">
+    <value>未找到歌词</value>
+  </data>
+  <data name="SystemTrayPageTitle" xml:space="preserve">
+    <value>系统托盘 - BetterLyrics</value>
+  </data>
+  <data name="HostWindowDockFlyoutItem.Text" xml:space="preserve">
+    <value>停靠模式</value>
+  </data>
+  <data name="SettingsPageLyricsFontWeight.Header" xml:space="preserve">
+    <value>字体粗细</value>
+  </data>
+  <data name="SettingsPageLyricsThin.Content" xml:space="preserve">
+    <value>极细</value>
+  </data>
+  <data name="SettingsPageLyricsExtraLight.Content" xml:space="preserve">
+    <value>超细</value>
+  </data>
+  <data name="SettingsPageLyricsLight.Content" xml:space="preserve">
+    <value>细体</value>
+  </data>
+  <data name="SettingsPageLyricsSemiLight.Content" xml:space="preserve">
+    <value>次细</value>
+  </data>
+  <data name="SettingsPageLyricsNormal.Content" xml:space="preserve">
+    <value>常规</value>
+  </data>
+  <data name="SettingsPageLyricsMedium.Content" xml:space="preserve">
+    <value>中等</value>
+  </data>
+  <data name="SettingsPageLyricsSemiBold.Content" xml:space="preserve">
+    <value>次粗</value>
+  </data>
+  <data name="SettingsPageLyricsBold.Content" xml:space="preserve">
+    <value>粗体</value>
+  </data>
+  <data name="SettingsPageLyricsExtraBold.Content" xml:space="preserve">
+    <value>特粗</value>
+  </data>
+  <data name="SettingsPageLyricsBlack.Content" xml:space="preserve">
+    <value>黑体</value>
+  </data>
+  <data name="SettingsPageLyricsExtraBlack.Content" xml:space="preserve">
+    <value>超黑</value>
+  </data>
+  <data name="SettingsPageLyricsGlowEffectScopeWholeLyrics.Content" xml:space="preserve">
+    <value>全部歌词</value>
+  </data>
+  <data name="SettingsPageLyricsGlowEffectScopeCurrentLine.Content" xml:space="preserve">
+    <value>当前行</value>
+  </data>
+  <data name="SettingsPageLyricsGlowEffectScopeCurrentChar.Content" xml:space="preserve">
+    <value>当前字符</value>
+  </data>
+  <data name="HostWindowSettingsFlyoutItem.Text" xml:space="preserve">
+    <value>设置</value>
+  </data>
 </root>

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Strings/zh-TW/Resources.resw

@@ -223,14 +223,11 @@
     <value>專輯圖片背景不透明度</value>
   </data>
   <data name="SettingsPageTitle" xml:space="preserve">
-    <value>設定</value>
+    <value>設定 - BetterLyrics</value>
   </data>
-  <data name="MainPageTitle" xml:space="preserve">
+  <data name="LyricsPageTitle" xml:space="preserve">
     <value>BetterLyrics</value>
   </data>
-  <data name="SettingsPageLyricsStyle.Text" xml:space="preserve">
-    <value>歌詞樣式</value>
-  </data>
   <data name="SettingsPageLyricsAlignment.Header" xml:space="preserve">
     <value>對齊方式</value>
   </data>
@@ -273,29 +270,29 @@
   <data name="SettingsPageLyricsFontSize.Header" xml:space="preserve">
     <value>字體大小</value>
   </data>
-  <data name="MainWindowLyricsOnly.ToolTipService.ToolTip" xml:space="preserve">
-    <value>僅展示歌詞</value>
+  <data name="MainPageLyriscOnly.Content" xml:space="preserve">
+    <value>僅顯示歌詞</value>
   </data>
-  <data name="SettingsPageLyricsEffect.Text" xml:space="preserve">
-    <value>歌詞效果</value>
+  <data name="MainWindowImmersiveMode.ToolTipService.ToolTip" xml:space="preserve">
+    <value>沉浸模式</value>
   </data>
-  <data name="SettingsPageAlbumOverlay.Text" xml:space="preserve">
+  <data name="SettingsPageAlbumOverlay.Content" xml:space="preserve">
     <value>專輯背景</value>
   </data>
-  <data name="SettingsPageAbout.Text" xml:space="preserve">
+  <data name="SettingsPageAbout.Content" xml:space="preserve">
     <value>關於</value>
   </data>
-  <data name="SettingsPageLyricsLib.Text" xml:space="preserve">
+  <data name="SettingsPageLyricsLib.Content" xml:space="preserve">
     <value>歌詞庫</value>
   </data>
-  <data name="SettingsPageAppAppearance.Text" xml:space="preserve">
+  <data name="SettingsPageAppAppearance.Content" xml:space="preserve">
     <value>應用外觀</value>
   </data>
   <data name="SettingsPageLyricsGlowEffect.Header" xml:space="preserve">
     <value>輝光效果</value>
   </data>
-  <data name="SettingsPageLyricsDynamicGlowEffect.Header" xml:space="preserve">
-    <value>動態輝光效果</value>
+  <data name="SettingsPageLyricsGlowEffectScope.Header" xml:space="preserve">
+    <value>輝光效果作用範圍</value>
   </data>
   <data name="SettingsPageRebuildDatabase.Header" xml:space="preserve">
     <value>重構歌詞索引資料庫</value>
@@ -309,40 +306,16 @@
   <data name="SettingsPageRebuildDatabaseDesc.Text" xml:space="preserve">
     <value>重構資料庫中，請稍候...</value>
   </data>
-  <data name="MainPageWelcomeTeachingTip.Subtitle" xml:space="preserve">
-    <value>來看看怎麼使用這款應用程式吧</value>
-  </data>
   <data name="MainPageWelcomeTeachingTip.Title" xml:space="preserve">
     <value>歡迎使用 BetterLyrics</value>
   </data>
-  <data name="MainPageTitleBarTeachingTip.Title" xml:space="preserve">
-    <value>頂部區域是標題欄</value>
-  </data>
-  <data name="MainPageTitleBarTeachingTip.Subtitle" xml:space="preserve">
-    <value>懸停在頂部區域以顯示</value>
-  </data>
-  <data name="MainPageInitDatabaseTeachingTip.Title" xml:space="preserve">
+  <data name="MainPageWelcomeTeachingTip.Subtitle" xml:space="preserve">
     <value>現在就來初始化歌詞資料庫吧</value>
   </data>
-  <data name="MainPageInitDatabaseTeachingTip.Subtitle" xml:space="preserve">
-    <value>懸停在左下角後點擊以進入設定頁面</value>
-  </data>
-  <data name="MainPageBottomCommandTeachingTip.Subtitle" xml:space="preserve">
-    <value>懸停在底部區域以顯示</value>
-  </data>
-  <data name="MainPageBottomCommandTeachingTip.Title" xml:space="preserve">
-    <value>底部區域是命令列</value>
-  </data>
-  <data name="MainPageLyricsOnlyTeachingTip.Title" xml:space="preserve">
-    <value>在此切換“僅展示歌詞”</value>
-  </data>
-  <data name="MainPageLyricsOnlyTeachingTip.Subtitle" xml:space="preserve">
-    <value>當歌詞存在時可在右下角進行切換</value>
-  </data>
   <data name="MainPageNoMusicPlaying.Text" xml:space="preserve">
     <value>目前沒有正在播放的音樂</value>
   </data>
-  <data name="SettingsPageDev.Text" xml:space="preserve">
+  <data name="SettingsPageDev.Content" xml:space="preserve">
     <value>開發者選項</value>
   </data>
   <data name="SettingsPageMockMusicPlaying.Header" xml:space="preserve">
@@ -363,10 +336,136 @@
   <data name="SettingsPageLyricsFontColorDominant.Content" xml:space="preserve">
     <value>專輯強調色</value>
   </data>
-  <data name="SettingsPageAlbumStyle.Text" xml:space="preserve">
+  <data name="SettingsPageAlbumStyle.Content" xml:space="preserve">
     <value>專輯封面樣式</value>
   </data>
   <data name="SettingsPageAlbumRadius.Header" xml:space="preserve">
     <value>圓角半徑</value>
   </data>
+  <data name="SettingsPageTitleBarType.Header" xml:space="preserve">
+    <value>標題列大小</value>
+  </data>
+  <data name="SettingsPageCompactTitleBar.Content" xml:space="preserve">
+    <value>緊湊</value>
+  </data>
+  <data name="SettingsPageExtendedTitleBar.Content" xml:space="preserve">
+    <value>擴充</value>
+  </data>
+  <data name="BaseWindowAOTFlyoutItem.Text" xml:space="preserve">
+    <value>將應用置於頂層</value>
+  </data>
+  <data name="BaseWindowFullScreenFlyoutItem.Text" xml:space="preserve">
+    <value>全螢幕</value>
+  </data>
+  <data name="BaseWindowEnterFullScreenHint" xml:space="preserve">
+    <value>按 Esc 退出全螢幕模式</value>
+  </data>
+  <data name="MainPageEnterImmersiveModeHint" xml:space="preserve">
+    <value>再次懸停以顯示切換按鈕</value>
+  </data>
+  <data name="BaseWindowHostInfoBarCheckBox.Content" xml:space="preserve">
+    <value>不再顯示此訊息</value>
+  </data>
+  <data name="MainPageNoLocalFilesMatched.Text" xml:space="preserve">
+    <value>找不到匹配的本地文件</value>
+  </data>
+  <data name="MainPageAlbumArtOnly.Content" xml:space="preserve">
+    <value>僅顯示專輯封面</value>
+  </data>
+  <data name="MainPageSplitView.Content" xml:space="preserve">
+    <value>分割畫面視圖</value>
+  </data>
+  <data name="MainPageDisplayTypeSwitcher.ToolTipService.ToolTip" xml:space="preserve">
+    <value>切換顯示模式</value>
+  </data>
+  <data name="MainPageDesktopLyricsToggler.ToolTipService.ToolTip" xml:space="preserve">
+    <value>切換到桌面歌詞模式</value>
+  </data>
+  <data name="BaseWindowMiniFlyoutItem.Text" xml:space="preserve">
+    <value>畫中畫模式</value>
+  </data>
+  <data name="BaseWindowUnMiniFlyoutItem.Text" xml:space="preserve">
+    <value>退出畫中畫模式</value>
+  </data>
+  <data name="MainPageLyricsNotFound.Text" xml:space="preserve">
+    <value>找不到歌詞</value>
+  </data>
+  <data name="SettingsPageLyricsEffect.Content" xml:space="preserve">
+    <value>歌詞動效</value>
+  </data>
+  <data name="SettingsPageLyricsStyle.Content" xml:space="preserve">
+    <value>歌詞樣式</value>
+  </data>
+  <data name="SettingsPagePathBeIncludedInfo" xml:space="preserve">
+    <value>該資料夾已包含在已有資料夾中，無需再次添加</value>
+  </data>
+  <data name="SettingsPageAppBehavior.Content" xml:space="preserve">
+    <value>應用行為</value>
+  </data>
+  <data name="SettingsPageAutoStartWindow.Header" xml:space="preserve">
+    <value>啟動應用程式時</value>
+  </data>
+  <data name="SettingsPageAutoStartInAppLyrics.Content" xml:space="preserve">
+    <value>啟動標準模式</value>
+  </data>
+  <data name="SettingsPageAutoStartDesktopLyrics.Content" xml:space="preserve">
+    <value>啟動停靠模式</value>
+  </data>
+  <data name="DesktopLyricsRendererPageLyricsNotFound.Text" xml:space="preserve">
+    <value>找不到歌詞</value>
+  </data>
+  <data name="SystemTrayPageTitle" xml:space="preserve">
+    <value>系統托盤 - BetterLyrics</value>
+  </data>
+  <data name="HostWindowDockFlyoutItem.Text" xml:space="preserve">
+    <value>停靠模式</value>
+  </data>
+  <data name="SettingsPageLyricsFontWeight.Header" xml:space="preserve">
+    <value>字體粗細</value>
+  </data>
+  <data name="SettingsPageLyricsThin.Content" xml:space="preserve">
+    <value>極細</value>
+  </data>
+  <data name="SettingsPageLyricsExtraLight.Content" xml:space="preserve">
+    <value>超細</value>
+  </data>
+  <data name="SettingsPageLyricsLight.Content" xml:space="preserve">
+    <value>細體</value>
+  </data>
+  <data name="SettingsPageLyricsSemiLight.Content" xml:space="preserve">
+    <value>次細</value>
+  </data>
+  <data name="SettingsPageLyricsNormal.Content" xml:space="preserve">
+    <value>常規</value>
+  </data>
+  <data name="SettingsPageLyricsMedium.Content" xml:space="preserve">
+    <value>中等</value>
+  </data>
+  <data name="SettingsPageLyricsSemiBold.Content" xml:space="preserve">
+    <value>次粗</value>
+  </data>
+  <data name="SettingsPageLyricsBold.Content" xml:space="preserve">
+    <value>粗體</value>
+  </data>
+  <data name="SettingsPageLyricsExtraBold.Content" xml:space="preserve">
+    <value>特粗</value>
+  </data>
+  <data name="SettingsPageLyricsBlack.Content" xml:space="preserve">
+    <value>黑體</value>
+  </data>
+  <data name="SettingsPageLyricsExtraBlack.Content" xml:space="preserve">
+    <value>超黑</value>
+  </data>
+  <data name="SettingsPageLyricsGlowEffectScopeWholeLyrics.Content" xml:space="preserve">
+    <value>全部歌詞</value>
+  </data>
+  <data name="SettingsPageLyricsGlowEffectScopeCurrentLine.Content" xml:space="preserve">
+    <value>目前行</value>
+  </data>
+  <data name="SettingsPageLyricsGlowEffectScopeCurrentChar.Content" xml:space="preserve">
+    <value>目前字元</value>
+  </data>
+  <data name="HostWindowSettingsFlyoutItem.Text" xml:space="preserve">
+    <value>設定</value>
+  </data>
 </root>

BetterLyrics.WinUI3/BetterLyrics.WinUI3/ViewModels/BaseRendererViewModel.cs

@@ -0,0 +1,23 @@
+using System;
+using BetterLyrics.WinUI3.Services.Settings;
+using BetterLyrics.WinUI3.ViewModels;
+using Microsoft.Graphics.Canvas.UI.Xaml;
+
+namespace BetterLyrics.WinUI3.Rendering
+{
+    public partial class BaseRendererViewModel(ISettingsService settingsService)
+        : BaseViewModel(settingsService)
+    {
+        public TimeSpan TotalTime { get; set; } = TimeSpan.Zero;
+        public TimeSpan ElapsedTime { get; set; } = TimeSpan.Zero;
+
+        public virtual void Calculate(
+            ICanvasAnimatedControl control,
+            CanvasAnimatedUpdateEventArgs args
+        )
+        {
+            TotalTime += args.Timing.ElapsedTime;
+            ElapsedTime = args.Timing.ElapsedTime;
+        }
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/ViewModels/BaseViewModel.cs

@@ -0,0 +1,27 @@
+using System;
+using System.Runtime.CompilerServices;
+using BetterLyrics.WinUI3.Services.Settings;
+using CommunityToolkit.Mvvm.ComponentModel;
+using Microsoft.UI.Dispatching;
+
+namespace BetterLyrics.WinUI3.ViewModels
+{
+    public partial class BaseViewModel : ObservableRecipient, IDisposable
+    {
+        private protected readonly ISettingsService _settingsService;
+
+        private protected readonly DispatcherQueue _dispatcherQueue =
+            DispatcherQueue.GetForCurrentThread();
+
+        public BaseViewModel(ISettingsService settingsService)
+        {
+            IsActive = true;
+            _settingsService = settingsService;
+        }
+
+        public void Dispose()
+        {
+            GC.SuppressFinalize(this);
+        }
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/ViewModels/HostWindowViewModel.cs

@@ -0,0 +1,135 @@
+using System.Threading.Tasks;
+using BetterLyrics.WinUI3.Enums;
+using BetterLyrics.WinUI3.Helper;
+using BetterLyrics.WinUI3.Messages;
+using BetterLyrics.WinUI3.Models;
+using BetterLyrics.WinUI3.Services.Settings;
+using BetterLyrics.WinUI3.ViewModels;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
+using CommunityToolkit.Mvvm.Messaging;
+using CommunityToolkit.Mvvm.Messaging.Messages;
+using Microsoft.UI.Xaml;
+using Windows.UI;
+
+namespace BetterLyrics.WinUI3
+{
+    public partial class HostWindowViewModel
+        : BaseViewModel,
+            IRecipient<PropertyChangedMessage<TitleBarType>>,
+            IRecipient<PropertyChangedMessage<ElementTheme>>
+    {
+        [ObservableProperty]
+        public partial ElementTheme ThemeType { get; set; }
+
+        [ObservableProperty]
+        public partial double AppLogoImageIconHeight { get; set; }
+
+        [ObservableProperty]
+        public partial double TitleBarFontSize { get; set; }
+
+        [ObservableProperty]
+        public partial double TitleBarHeight { get; set; }
+
+        [ObservableProperty]
+        public partial Notification Notification { get; set; } = new();
+
+        [ObservableProperty]
+        public partial bool ShowInfoBar { get; set; } = false;
+
+        [ObservableProperty]
+        public partial TitleBarType TitleBarType { get; set; }
+
+        [ObservableProperty]
+        [NotifyPropertyChangedRecipients]
+        public partial bool IsDockMode { get; set; } = false;
+
+        [ObservableProperty]
+        [NotifyPropertyChangedRecipients]
+        public partial Color ActivatedWindowAccentColor { get; set; }
+
+        public HostWindowViewModel(ISettingsService settingsService)
+            : base(settingsService)
+        {
+            TitleBarType = _settingsService.TitleBarType;
+            ThemeType = _settingsService.ThemeType;
+            OnTitleBarTypeChanged(TitleBarType);
+
+            WeakReferenceMessenger.Default.Register<ShowNotificatonMessage>(
+                this,
+                async (r, m) =>
+                {
+                    Notification = m.Value;
+                    if (
+                        !Notification.IsForeverDismissable
+                        || AlreadyForeverDismissedThisMessage() == false
+                    )
+                    {
+                        Notification.Visibility = Notification.IsForeverDismissable
+                            ? Visibility.Visible
+                            : Visibility.Collapsed;
+                        ShowInfoBar = true;
+                        await Task.Delay(AnimationHelper.StackedNotificationsShowingDuration);
+                        ShowInfoBar = false;
+                    }
+                }
+            );
+        }
+
+        public void UpdateAccentColor(nint hwnd)
+        {
+            ActivatedWindowAccentColor = WindowColorHelper
+                .GetDominantColorBelow(hwnd)
+                .ToWindowsUIColor();
+        }
+
+        partial void OnTitleBarTypeChanged(TitleBarType value)
+        {
+            switch (value)
+            {
+                case TitleBarType.Compact:
+                    AppLogoImageIconHeight = 18;
+                    TitleBarFontSize = 11;
+                    break;
+                case TitleBarType.Extended:
+                    AppLogoImageIconHeight = 20;
+                    TitleBarFontSize = 14;
+                    break;
+                default:
+                    break;
+            }
+            TitleBarHeight = value.GetHeight();
+        }
+
+        [RelayCommand]
+        private void SwitchInfoBarNeverShowItAgainCheckBox(bool value)
+        {
+            //if (Notification.RelatedSettingsKeyName is string key)
+            //    _settingsService.SetValue(key, value);
+        }
+
+        private bool? AlreadyForeverDismissedThisMessage()
+        {
+            //if (Notification.RelatedSettingsKeyName is string key)
+            //    return _settingsService.Get(key, SettingsDefaultValues.NeverShowMessage);
+            //return null;
+            return null;
+        }
+
+        public void Receive(PropertyChangedMessage<TitleBarType> message)
+        {
+            if (message.Sender is SettingsViewModel)
+            {
+                if (message.PropertyName == nameof(SettingsViewModel.TitleBarType))
+                {
+                    TitleBarType = message.NewValue;
+                }
+            }
+        }
+
+        public void Receive(PropertyChangedMessage<ElementTheme> message)
+        {
+            ThemeType = message.NewValue;
+        }
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/ViewModels/LyricsPageViewModel.cs

@@ -0,0 +1,219 @@
+using System;
+using System.Diagnostics;
+using System.Threading.Tasks;
+using BetterInAppLyrics.WinUI3.ViewModels;
+using BetterLyrics.WinUI3.Enums;
+using BetterLyrics.WinUI3.Helper;
+using BetterLyrics.WinUI3.Messages;
+using BetterLyrics.WinUI3.Models;
+using BetterLyrics.WinUI3.Services.Playback;
+using BetterLyrics.WinUI3.Services.Settings;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
+using CommunityToolkit.Mvvm.Messaging;
+using CommunityToolkit.Mvvm.Messaging.Messages;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Media.Imaging;
+using WinUIEx.Messaging;
+
+namespace BetterLyrics.WinUI3.ViewModels
+{
+    public partial class LyricsPageViewModel
+        : BaseViewModel,
+            IRecipient<PropertyChangedMessage<int>>,
+            IRecipient<PropertyChangedMessage<bool>>
+    {
+        private LyricsDisplayType? _preferredDisplayTypeBeforeSwitchToDockMode;
+
+        [ObservableProperty]
+        [NotifyPropertyChangedRecipients]
+        public partial double LimitedLineWidth { get; set; } = 0.0;
+
+        [ObservableProperty]
+        [NotifyPropertyChangedRecipients]
+        public partial LyricsDisplayType DisplayType { get; set; } =
+            LyricsDisplayType.PlaceholderOnly;
+
+        [ObservableProperty]
+        public partial BitmapImage? CoverImage { get; set; }
+
+        [ObservableProperty]
+        public partial SongInfo? SongInfo { get; set; } = null;
+
+        [ObservableProperty]
+        public partial LyricsDisplayType? PreferredDisplayType { get; set; } =
+            LyricsDisplayType.SplitView;
+
+        [ObservableProperty]
+        public partial bool AboutToUpdateUI { get; set; }
+
+        [ObservableProperty]
+        public partial double CoverImageGridActualHeight { get; set; }
+
+        [ObservableProperty]
+        public partial int CoverImageRadius { get; set; }
+
+        [ObservableProperty]
+        public partial CornerRadius CoverImageGridCornerRadius { get; set; }
+
+        [ObservableProperty]
+        public partial bool IsWelcomeTeachingTipOpen { get; set; }
+
+        [ObservableProperty]
+        public partial bool IsFirstRun { get; set; }
+
+        [ObservableProperty]
+        public partial bool IsNotMockMode { get; set; } = true;
+
+        private readonly IPlaybackService _playbackService;
+
+        public LyricsPageViewModel(
+            ISettingsService settingsService,
+            IPlaybackService playbackService
+        )
+            : base(settingsService)
+        {
+            CoverImageRadius = _settingsService.CoverImageRadius;
+
+            _playbackService = playbackService;
+            _playbackService.SongInfoChanged += async (_, args) =>
+                await UpdateSongInfoUI(args.SongInfo).ConfigureAwait(true);
+
+            IsFirstRun = _settingsService.IsFirstRun;
+
+            UpdateSongInfoUI(_playbackService.SongInfo).ConfigureAwait(true);
+        }
+
+        partial void OnCoverImageRadiusChanged(int value)
+        {
+            if (double.IsNaN(CoverImageGridActualHeight))
+                return;
+
+            CoverImageGridCornerRadius = new CornerRadius(
+                value / 100f * CoverImageGridActualHeight / 2
+            );
+        }
+
+        partial void OnCoverImageGridActualHeightChanged(double value)
+        {
+            if (double.IsNaN(value))
+                return;
+
+            CoverImageGridCornerRadius = new CornerRadius(CoverImageRadius / 100f * value / 2);
+        }
+
+        partial void OnIsFirstRunChanged(bool value)
+        {
+            IsWelcomeTeachingTipOpen = value;
+            _settingsService.IsFirstRun = false;
+        }
+
+        [RelayCommand]
+        private void OnDisplayTypeChanged(object value)
+        {
+            int index = Convert.ToInt32(value);
+            PreferredDisplayType = (LyricsDisplayType)index;
+            DisplayType = (LyricsDisplayType)index;
+        }
+
+        [RelayCommand]
+        private void OpenSettingsWindow()
+        {
+            WindowHelper.OpenSettingsWindow();
+        }
+
+        public async Task UpdateSongInfoUI(SongInfo? songInfo)
+        {
+            AboutToUpdateUI = true;
+            await Task.Delay(AnimationHelper.StoryboardDefaultDuration);
+
+            SongInfo = songInfo;
+
+            CoverImage =
+                (songInfo?.AlbumArt == null)
+                    ? null
+                    : await ImageHelper.GetBitmapImageFromBytesAsync(songInfo.AlbumArt);
+
+            TrySwitchToPreferredDisplayType(songInfo);
+
+            AboutToUpdateUI = false;
+        }
+
+        private void TrySwitchToPreferredDisplayType(SongInfo? songInfo)
+        {
+            LyricsDisplayType displayType;
+
+            if (songInfo == null)
+            {
+                displayType = LyricsDisplayType.PlaceholderOnly;
+            }
+            else if (PreferredDisplayType is LyricsDisplayType preferredDisplayType)
+            {
+                displayType = preferredDisplayType;
+            }
+            else
+            {
+                displayType = LyricsDisplayType.SplitView;
+            }
+
+            DisplayType = displayType;
+        }
+
+        public void OpenMatchedFileFolderInFileExplorer(string path)
+        {
+            Process.Start(
+                new ProcessStartInfo
+                {
+                    FileName = "explorer.exe",
+                    Arguments = $"/select,\"{path}\"",
+                    UseShellExecute = true,
+                }
+            );
+        }
+
+        public void Receive(PropertyChangedMessage<int> message)
+        {
+            if (message.Sender.GetType() == typeof(SettingsViewModel))
+            {
+                if (message.PropertyName == nameof(SettingsViewModel.CoverImageRadius))
+                {
+                    CoverImageRadius = message.NewValue;
+                }
+            }
+        }
+
+        public void Receive(PropertyChangedMessage<bool> message)
+        {
+            if (message.Sender is HostWindowViewModel)
+            {
+                if (message.PropertyName == nameof(HostWindowViewModel.IsDockMode))
+                {
+                    IsNotMockMode = !message.NewValue;
+                    if (message.NewValue)
+                    {
+                        _preferredDisplayTypeBeforeSwitchToDockMode = PreferredDisplayType;
+                        PreferredDisplayType = LyricsDisplayType.LyricsOnly;
+                    }
+                    else
+                    {
+                        PreferredDisplayType = _preferredDisplayTypeBeforeSwitchToDockMode;
+                    }
+                    TrySwitchToPreferredDisplayType(SongInfo);
+                }
+            }
+            else if (message.Sender is SettingsViewModel)
+            {
+                if (
+                    message.PropertyName
+                    == nameof(SettingsViewModel.IsRebuildingLyricsIndexDatabase)
+                )
+                {
+                    if (!message.NewValue)
+                    {
+                        _playbackService.ReSendingMessages();
+                    }
+                }
+            }
+        }
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/ViewModels/LyricsSettingsControlViewModel.cs

@@ -0,0 +1,114 @@
+using System;
+using System.Collections.ObjectModel;
+using System.Linq;
+using BetterLyrics.WinUI3.Enums;
+using BetterLyrics.WinUI3.Helper;
+using BetterLyrics.WinUI3.Services.Playback;
+using BetterLyrics.WinUI3.Services.Settings;
+using BetterLyrics.WinUI3.ViewModels;
+using CommunityToolkit.Mvvm.ComponentModel;
+using Microsoft.UI;
+using Windows.UI;
+
+namespace BetterInAppLyrics.WinUI3.ViewModels
+{
+    public partial class LyricsSettingsControlViewModel : BaseViewModel
+    {
+        [ObservableProperty]
+        [NotifyPropertyChangedRecipients]
+        public partial LyricsAlignmentType LyricsAlignmentType { get; set; }
+
+        [ObservableProperty]
+        [NotifyPropertyChangedRecipients]
+        public partial LyricsFontWeight LyricsFontWeight { get; set; }
+
+        [ObservableProperty]
+        [NotifyPropertyChangedRecipients]
+        public partial int LyricsBlurAmount { get; set; }
+
+        [ObservableProperty]
+        [NotifyPropertyChangedRecipients]
+        public partial int LyricsVerticalEdgeOpacity { get; set; }
+
+        [ObservableProperty]
+        [NotifyPropertyChangedRecipients]
+        public partial float LyricsLineSpacingFactor { get; set; }
+
+        [ObservableProperty]
+        [NotifyPropertyChangedRecipients]
+        public partial int LyricsFontSize { get; set; }
+
+        [ObservableProperty]
+        [NotifyPropertyChangedRecipients]
+        public partial bool IsLyricsGlowEffectEnabled { get; set; }
+
+        [ObservableProperty]
+        [NotifyPropertyChangedRecipients]
+        public partial LyricsFontColorType LyricsFontColorType { get; set; }
+
+        [ObservableProperty]
+        [NotifyPropertyChangedRecipients]
+        public partial LyricsGlowEffectScope LyricsGlowEffectScope { get; set; }
+
+        public LyricsSettingsControlViewModel(ISettingsService settingsService)
+            : base(settingsService)
+        {
+            IsActive = true;
+
+            LyricsAlignmentType = _settingsService.LyricsAlignmentType;
+            LyricsFontWeight = _settingsService.LyricsFontWeight;
+            LyricsBlurAmount = _settingsService.LyricsBlurAmount;
+            LyricsVerticalEdgeOpacity = _settingsService.LyricsVerticalEdgeOpacity;
+            LyricsLineSpacingFactor = _settingsService.LyricsLineSpacingFactor;
+            LyricsFontSize = _settingsService.LyricsFontSize;
+            IsLyricsGlowEffectEnabled = _settingsService.IsLyricsGlowEffectEnabled;
+            LyricsGlowEffectScope = _settingsService.LyricsGlowEffectScope;
+            LyricsFontColorType = _settingsService.LyricsFontColorType;
+        }
+
+        partial void OnLyricsAlignmentTypeChanged(LyricsAlignmentType value)
+        {
+            _settingsService.LyricsAlignmentType = value;
+        }
+
+        partial void OnLyricsFontWeightChanged(LyricsFontWeight value)
+        {
+            _settingsService.LyricsFontWeight = value;
+        }
+
+        partial void OnLyricsBlurAmountChanged(int value)
+        {
+            _settingsService.LyricsBlurAmount = value;
+        }
+
+        partial void OnLyricsVerticalEdgeOpacityChanged(int value)
+        {
+            _settingsService.LyricsVerticalEdgeOpacity = value;
+        }
+
+        partial void OnLyricsLineSpacingFactorChanged(float value)
+        {
+            _settingsService.LyricsLineSpacingFactor = value;
+        }
+
+        partial void OnLyricsFontSizeChanged(int value)
+        {
+            _settingsService.LyricsFontSize = value;
+        }
+
+        partial void OnIsLyricsGlowEffectEnabledChanged(bool value)
+        {
+            _settingsService.IsLyricsGlowEffectEnabled = value;
+        }
+
+        partial void OnLyricsFontColorTypeChanged(LyricsFontColorType value)
+        {
+            _settingsService.LyricsFontColorType = value;
+        }
+
+        partial void OnLyricsGlowEffectScopeChanged(LyricsGlowEffectScope value)
+        {
+            _settingsService?.LyricsGlowEffectScope = value;
+        }
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/ViewModels/MainViewModel.cs

@@ -1,212 +0,0 @@
-using System;
-using System.Collections.Generic;
-using System.Collections.ObjectModel;
-using System.Data.Common;
-using System.IO;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
-using ATL;
-using BetterLyrics.WinUI3.Helper;
-using BetterLyrics.WinUI3.Models;
-using BetterLyrics.WinUI3.Services.Database;
-using BetterLyrics.WinUI3.Services.Settings;
-using CommunityToolkit.Mvvm.ComponentModel;
-using DevWinUI;
-using Microsoft.Graphics.Canvas;
-using Microsoft.Graphics.Canvas.UI.Xaml;
-using Microsoft.UI;
-using Microsoft.UI.Xaml.Media.Imaging;
-using Ude;
-using Windows.Graphics.Imaging;
-using Windows.Media.Control;
-using Windows.Storage.Streams;
-using Windows.UI;
-using static System.Net.Mime.MediaTypeNames;
-using static ATL.LyricsInfo;
-using static CommunityToolkit.WinUI.Animations.Expressions.ExpressionValues;
-
-namespace BetterLyrics.WinUI3.ViewModels
-{
-    public partial class MainViewModel : ObservableObject
-    {
-        [ObservableProperty]
-        private bool _isAnyMusicSessionExisted = false;
-
-        [ObservableProperty]
-        private string? _title;
-
-        [ObservableProperty]
-        private string? _artist;
-
-        [ObservableProperty]
-        private ObservableCollection<Color> _coverImageDominantColors;
-
-        [ObservableProperty]
-        private BitmapImage? _coverImage;
-
-        [ObservableProperty]
-        private bool _aboutToUpdateUI;
-
-        [ObservableProperty]
-        private bool _isSmallScreenMode;
-
-        [ObservableProperty]
-        private bool _showLyricsOnly = false;
-
-        [ObservableProperty]
-        private bool _lyricsExisted = false;
-
-        private readonly ColorThief _colorThief = new();
-
-        private readonly SettingsService _settingsService;
-        private readonly DatabaseService _databaseService;
-
-        private readonly int _accentColorCount = 3;
-
-        public MainViewModel(SettingsService settingsService, DatabaseService databaseService)
-        {
-            _settingsService = settingsService;
-            _databaseService = databaseService;
-            CoverImageDominantColors =
-            [
-                .. Enumerable.Repeat(Colors.Transparent, _accentColorCount),
-            ];
-        }
-
-        public List<LyricsLine> GetLyrics(Track? track)
-        {
-            List<LyricsLine> result = [];
-
-            var lyricsPhrases = track?.Lyrics?.SynchronizedLyrics;
-
-            if (lyricsPhrases?.Count > 0)
-            {
-                if (lyricsPhrases[0].TimestampMs > 0)
-                {
-                    var placeholder = new LyricsPhrase(0, " ");
-                    lyricsPhrases.Insert(0, placeholder);
-                    lyricsPhrases.Insert(0, placeholder);
-                }
-            }
-
-            LyricsLine? lyricsLine = null;
-
-            for (int i = 0; i < lyricsPhrases?.Count; i++)
-            {
-                var lyricsPhrase = lyricsPhrases[i];
-                int startTimestampMs = lyricsPhrase.TimestampMs;
-                int endTimestampMs;
-
-                if (i + 1 < lyricsPhrases.Count)
-                {
-                    endTimestampMs = lyricsPhrases[i + 1].TimestampMs;
-                }
-                else
-                {
-                    endTimestampMs = (int)track.DurationMs;
-                }
-
-                lyricsLine ??= new LyricsLine { StartPlayingTimestampMs = startTimestampMs };
-
-                lyricsLine.Texts.Add(lyricsPhrase.Text);
-
-                if (endTimestampMs == startTimestampMs)
-                {
-                    continue;
-                }
-                else
-                {
-                    lyricsLine.EndPlayingTimestampMs = endTimestampMs;
-                    result.Add(lyricsLine);
-                    lyricsLine = null;
-                }
-            }
-
-            LyricsExisted = result.Count != 0;
-            if (!LyricsExisted)
-            {
-                ShowLyricsOnly = false;
-            }
-
-            return result;
-        }
-
-        public async Task<(List<LyricsLine>, SoftwareBitmap?, uint, uint)> SetSongInfoAsync(
-            GlobalSystemMediaTransportControlsSessionMediaProperties? mediaProps
-        )
-        {
-            SoftwareBitmap? coverSoftwareBitmap = null;
-            uint coverImagePixelWidth = 0;
-            uint coverImagePixelHeight = 0;
-
-            Title = mediaProps?.Title;
-            Artist = mediaProps?.Artist;
-
-            IRandomAccessStream? stream = null;
-
-            var track = _databaseService.GetMusicMetadata(mediaProps);
-
-            if (mediaProps?.Thumbnail is IRandomAccessStreamReference reference)
-            {
-                stream = await reference.OpenReadAsync();
-            }
-            else
-            {
-                if (track?.EmbeddedPictures.Count > 0)
-                {
-                    var bytes = track.EmbeddedPictures[0].PictureData;
-                    if (bytes != null)
-                    {
-                        stream = await Helper.ImageHelper.GetStreamFromBytesAsync(bytes);
-                    }
-                }
-            }
-
-            // Set cover image and dominant colors
-            if (stream == null)
-            {
-                CoverImage = null;
-                CoverImageDominantColors =
-                [
-                    .. Enumerable.Repeat(Colors.Transparent, _accentColorCount),
-                ];
-                _settingsService.LyricsFontSelectedAccentColorIndex =
-                    _settingsService.LyricsFontSelectedAccentColorIndex;
-            }
-            else
-            {
-                CoverImage = new BitmapImage();
-                await CoverImage.SetSourceAsync(stream);
-                stream.Seek(0);
-
-                var decoder = await BitmapDecoder.CreateAsync(stream);
-                coverImagePixelHeight = decoder.PixelHeight;
-                coverImagePixelWidth = decoder.PixelWidth;
-
-                coverSoftwareBitmap = await decoder.GetSoftwareBitmapAsync(
-                    BitmapPixelFormat.Bgra8,
-                    BitmapAlphaMode.Premultiplied
-                );
-
-                CoverImageDominantColors =
-                [
-                    .. (await _colorThief.GetPalette(decoder, _accentColorCount)).Select(color =>
-                        Color.FromArgb(color.Color.A, color.Color.R, color.Color.G, color.Color.B)
-                    ),
-                ];
-                _settingsService.LyricsFontSelectedAccentColorIndex =
-                    _settingsService.LyricsFontSelectedAccentColorIndex;
-
-                stream.Dispose();
-            }
-
-            return (
-                GetLyrics(track),
-                coverSoftwareBitmap,
-                coverImagePixelWidth,
-                coverImagePixelHeight
-            );
-        }
-    }
-}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/ViewModels/SettingsViewModel.cs

@@ -1,97 +1,278 @@
 using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
 using System.Diagnostics;
 using System.Linq;
 using System.Threading.Tasks;
+using BetterLyrics.WinUI3.Enums;
+using BetterLyrics.WinUI3.Helper;
+using BetterLyrics.WinUI3.Messages;
 using BetterLyrics.WinUI3.Models;
 using BetterLyrics.WinUI3.Services.Database;
+using BetterLyrics.WinUI3.Services.Playback;
 using BetterLyrics.WinUI3.Services.Settings;
 using CommunityToolkit.Mvvm.ComponentModel;
 using CommunityToolkit.Mvvm.Input;
+using CommunityToolkit.Mvvm.Messaging;
+using CommunityToolkit.Mvvm.Messaging.Messages;
+using Microsoft.UI.Xaml;
+using Newtonsoft.Json;
+using Newtonsoft.Json.Linq;
 using Windows.ApplicationModel.Core;
-using Windows.Media;
+using Windows.Globalization;
 using Windows.Media.Playback;
-using Windows.Storage.Pickers;
 using Windows.System;
+using Windows.UI;
 using WinRT.Interop;
+using WinUIEx.Messaging;
 
 namespace BetterLyrics.WinUI3.ViewModels
 {
-    public partial class SettingsViewModel(
-        DatabaseService databaseService,
-        SettingsService settingsService,
-        MainViewModel mainViewModel
-    ) : ObservableObject
+    public partial class SettingsViewModel : ObservableRecipient
     {
+        [ObservableProperty]
+        [NotifyPropertyChangedRecipients]
+        public partial bool IsRebuildingLyricsIndexDatabase { get; set; } = false;
+
+        [ObservableProperty]
+        [NotifyPropertyChangedRecipients]
+        public partial ElementTheme ThemeType { get; set; }
+
+        [ObservableProperty]
+        [NotifyPropertyChangedRecipients]
+        public partial BackdropType BackdropType { get; set; }
+
+        [ObservableProperty]
+        [NotifyPropertyChangedRecipients]
+        public partial TitleBarType TitleBarType { get; set; }
+
+        [ObservableProperty]
+        public partial AutoStartWindowType AutoStartWindowType { get; set; }
+
+        [ObservableProperty]
+        [NotifyPropertyChangedRecipients]
+        public partial ObservableCollection<string> MusicLibraries { get; set; }
+
+        [ObservableProperty]
+        [NotifyPropertyChangedRecipients]
+        public partial int CoverImageRadius { get; set; }
+
+        [ObservableProperty]
+        [NotifyPropertyChangedRecipients]
+        public partial bool IsCoverOverlayEnabled { get; set; }
+
+        [ObservableProperty]
+        [NotifyPropertyChangedRecipients]
+        public partial bool IsDynamicCoverOverlayEnabled { get; set; }
+
+        [ObservableProperty]
+        [NotifyPropertyChangedRecipients]
+        public partial int CoverOverlayOpacity { get; set; }
+
+        [ObservableProperty]
+        [NotifyPropertyChangedRecipients]
+        public partial int CoverOverlayBlurAmount { get; set; }
+
+        partial void OnMusicLibrariesChanged(
+            ObservableCollection<string> oldValue,
+            ObservableCollection<string> newValue
+        )
+        {
+            if (oldValue != null)
+            {
+                oldValue.CollectionChanged -= (_, _) =>
+                    _settingsService.MusicLibraries = [.. MusicLibraries];
+            }
+            if (newValue != null)
+            {
+                newValue.CollectionChanged += (_, _) =>
+                    _settingsService.MusicLibraries = [.. MusicLibraries];
+            }
+        }
+
+        [ObservableProperty]
+        public partial Enums.Language Language { get; set; }
+
+        partial void OnLanguageChanged(Enums.Language value)
+        {
+            switch (value)
+            {
+                case Enums.Language.FollowSystem:
+                    ApplicationLanguages.PrimaryLanguageOverride = "";
+                    break;
+                case Enums.Language.English:
+                    ApplicationLanguages.PrimaryLanguageOverride = "en-US";
+                    break;
+                case Enums.Language.SimplifiedChinese:
+                    ApplicationLanguages.PrimaryLanguageOverride = "zh-CN";
+                    break;
+                case Enums.Language.TraditionalChinese:
+                    ApplicationLanguages.PrimaryLanguageOverride = "zh-TW";
+                    break;
+                default:
+                    break;
+            }
+            _settingsService.Language = Language;
+        }
+
         private readonly MediaPlayer _mediaPlayer = new();
 
-        private readonly DatabaseService _databaseService = databaseService;
+        private readonly IDatabaseService _databaseService;
+        private readonly ISettingsService _settingsService;
 
-        public SettingsService SettingsService => settingsService;
+        public string Version { get; set; } = AppInfo.AppVersion;
 
-        public MainViewModel MainViewModel => mainViewModel;
+        [ObservableProperty]
+        public partial object NavViewSelectedItemTag { get; set; } = "LyricsLib";
 
-        public string Version => Helper.AppInfo.AppVersion;
+        [ObservableProperty]
+        public partial Thickness RootGridMargin { get; set; } = new(0, 0, 0, 0);
+
+        public SettingsViewModel(IDatabaseService databaseService, ISettingsService settingsService)
+        {
+            _databaseService = databaseService;
+            _settingsService = settingsService;
+
+            RootGridMargin = new Thickness(0, _settingsService.TitleBarType.GetHeight(), 0, 0);
+
+            MusicLibraries = [.. _settingsService.MusicLibraries];
+            Language = _settingsService.Language;
+            CoverImageRadius = _settingsService.CoverImageRadius;
+            ThemeType = _settingsService.ThemeType;
+            BackdropType = _settingsService.BackdropType;
+            TitleBarType = _settingsService.TitleBarType;
+
+            AutoStartWindowType = _settingsService.AutoStartWindowType;
+
+            IsCoverOverlayEnabled = _settingsService.IsCoverOverlayEnabled;
+            IsDynamicCoverOverlayEnabled = _settingsService.IsDynamicCoverOverlayEnabled;
+            CoverOverlayOpacity = _settingsService.CoverOverlayOpacity;
+            CoverOverlayBlurAmount = _settingsService.CoverOverlayBlurAmount;
+        }
+
+        partial void OnMusicLibrariesChanged(ObservableCollection<string> value)
+        {
+            _settingsService.MusicLibraries = [.. value];
+        }
+
+        partial void OnThemeTypeChanged(ElementTheme value)
+        {
+            _settingsService.ThemeType = value;
+        }
+
+        partial void OnBackdropTypeChanged(BackdropType value)
+        {
+            _settingsService.BackdropType = value;
+        }
+
+        partial void OnTitleBarTypeChanged(TitleBarType value)
+        {
+            _settingsService.TitleBarType = value;
+            RootGridMargin = new Thickness(0, value.GetHeight(), 0, 0);
+        }
+
+        partial void OnAutoStartWindowTypeChanged(AutoStartWindowType value)
+        {
+            _settingsService.AutoStartWindowType = value;
+        }
+
+        partial void OnCoverImageRadiusChanged(int value)
+        {
+            _settingsService.CoverImageRadius = value;
+        }
+
+        partial void OnIsCoverOverlayEnabledChanged(bool value)
+        {
+            _settingsService.IsCoverOverlayEnabled = value;
+        }
+
+        partial void OnIsDynamicCoverOverlayEnabledChanged(bool value)
+        {
+            _settingsService.IsDynamicCoverOverlayEnabled = value;
+        }
+
+        partial void OnCoverOverlayOpacityChanged(int value)
+        {
+            _settingsService.CoverOverlayOpacity = value;
+        }
+
+        partial void OnCoverOverlayBlurAmountChanged(int value)
+        {
+            _settingsService.CoverOverlayBlurAmount = value;
+        }
 
         [RelayCommand]
         private async Task RebuildLyricsIndexDatabaseAsync()
         {
-            SettingsService.IsRebuildingLyricsIndexDatabase = true;
-            await _databaseService.RebuildMusicMetadataIndexDatabaseAsync(
-                SettingsService.MusicLibraries
-            );
-            SettingsService.IsRebuildingLyricsIndexDatabase = false;
+            IsRebuildingLyricsIndexDatabase = true;
+            await _databaseService.RebuildDatabaseAsync(MusicLibraries);
+            IsRebuildingLyricsIndexDatabase = false;
         }
 
         public async Task RemoveFolderAsync(string path)
         {
-            SettingsService.MusicLibraries.Remove(path);
+            MusicLibraries.Remove(path);
             await RebuildLyricsIndexDatabaseAsync();
         }
 
         [RelayCommand]
-        private async Task SelectAndAddFolderAsync()
+        private async Task SelectAndAddFolderAsync(UIElement sender)
         {
-            var picker = new FolderPicker();
+            var picker = new Windows.Storage.Pickers.FolderPicker();
 
             picker.FileTypeFilter.Add("*");
 
-            var hwnd = WindowNative.GetWindowHandle(App.Current.MainWindow);
+            var hwnd = WindowNative.GetWindowHandle(WindowHelper.GetWindowForElement(sender));
             InitializeWithWindow.Initialize(picker, hwnd);
 
             var folder = await picker.PickSingleFolderAsync();
 
-            App.Current.SettingsWindow!.AppWindow.MoveInZOrderAtTop();
-
             if (folder != null)
             {
-                await AddFolderAsync(folder.Path);
+                if (MusicLibraries.Any((item) => folder.Path.StartsWith(item)))
+                {
+                    WeakReferenceMessenger.Default.Send(
+                        new ShowNotificatonMessage(
+                            new Notification(
+                                App.ResourceLoader!.GetString("SettingsPagePathBeIncludedInfo")
+                            )
+                        )
+                    );
+                }
+                else
+                {
+                    await AddFolderAsync(folder.Path);
+                }
             }
         }
 
         private async Task AddFolderAsync(string path)
         {
-            bool existed = SettingsService.MusicLibraries.Any((x) => x == path);
+            bool existed = MusicLibraries.Any((x) => x == path);
             if (existed)
             {
-                MainWindow.StackedNotificationsBehavior?.Show(
-                    App.ResourceLoader!.GetString("SettingsPagePathExistedInfo"),
-                    Helper.AnimationHelper.StackedNotificationsShowingDuration
+                WeakReferenceMessenger.Default.Send(
+                    new ShowNotificatonMessage(
+                        new Notification(
+                            App.ResourceLoader!.GetString("SettingsPagePathExistedInfo")
+                        )
+                    )
                 );
             }
             else
             {
-                SettingsService.MusicLibraries.Add(path);
+                MusicLibraries.Add(path);
                 await RebuildLyricsIndexDatabaseAsync();
             }
         }
 
         [RelayCommand]
-        private static async Task LaunchProjectGitHubPageAsync()
+        private async Task LaunchProjectGitHubPageAsync()
         {
             await Launcher.LaunchUriAsync(new Uri(Helper.AppInfo.GithubUrl));
         }
 
-        private static void OpenFolderInFileExplorer(string path)
+        private void OpenFolderInFileExplorer(string path)
         {
             Process.Start(
                 new ProcessStartInfo
@@ -103,13 +284,13 @@ namespace BetterLyrics.WinUI3.ViewModels
             );
         }
 
-        public static void OpenMusicFolder(string path)
+        public void OpenMusicFolder(string path)
         {
             OpenFolderInFileExplorer(path);
         }
 
         [RelayCommand]
-        private static void RestartApp()
+        private void RestartApp()
         {
             // The restart will be executed immediately.
             AppRestartFailureReason failureReason =
@@ -132,15 +313,15 @@ namespace BetterLyrics.WinUI3.ViewModels
         [RelayCommand]
         private async Task PlayTestingMusicTask()
         {
-            await AddFolderAsync(Helper.AppInfo.AssetsFolder);
-            _mediaPlayer.SetUriSource(new Uri(Helper.AppInfo.TestMusicPath));
+            await AddFolderAsync(AppInfo.AssetsFolder);
+            _mediaPlayer.SetUriSource(new Uri(AppInfo.TestMusicPath));
             _mediaPlayer.Play();
         }
 
         [RelayCommand]
-        private static void OpenLogFolder()
+        private void OpenLogFolder()
         {
-            OpenFolderInFileExplorer(Helper.AppInfo.LogDirectory);
+            OpenFolderInFileExplorer(AppInfo.LogDirectory);
         }
     }
 }

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Views/HostWindow.xaml

@@ -0,0 +1,190 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<Window
+    x:Class="BetterLyrics.WinUI3.Views.HostWindow"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
+    xmlns:local="using:BetterLyrics.WinUI3.Views"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:media="using:CommunityToolkit.WinUI.Media"
+    xmlns:ui="using:CommunityToolkit.WinUI"
+    mc:Ignorable="d">
+
+    <Grid
+        x:Name="RootGrid"
+        Loaded="RootGrid_Loaded"
+        RequestedTheme="{x:Bind ViewModel.ThemeType, Mode=OneWay}">
+
+        <Frame
+            x:Name="RootFrame"
+            Navigated="RootFrame_Navigated"
+            NavigationFailed="RootFrame_NavigationFailed" />
+
+        <Grid
+            x:Name="TopCommandGrid"
+            Height="{x:Bind ViewModel.TitleBarHeight, Mode=OneWay}"
+            VerticalAlignment="Top"
+            Background="Transparent"
+            Opacity="0"
+            PointerEntered="TopCommandGrid_PointerEntered"
+            PointerExited="TopCommandGrid_PointerExited">
+            <Grid.OpacityTransition>
+                <ScalarTransition />
+            </Grid.OpacityTransition>
+
+            <StackPanel VerticalAlignment="Center" Orientation="Horizontal">
+
+                <ImageIcon
+                    x:Name="AppLogoImageIcon"
+                    Height="{x:Bind ViewModel.AppLogoImageIconHeight, Mode=OneWay}"
+                    Margin="16,0"
+                    Source="ms-appx:///Assets/Logo.png" />
+
+                <TextBlock
+                    x:Name="AppTitleTextBlock"
+                    FontSize="{x:Bind ViewModel.TitleBarFontSize, Mode=OneWay}"
+                    FontWeight="SemiBold"
+                    Text="{x:Bind Title, Mode=OneWay}" />
+
+            </StackPanel>
+
+            <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
+
+                <Button x:Name="MoreButton" Style="{StaticResource TitleBarButtonStyle}">
+                    <Grid>
+                        <FontIcon
+                            Margin="0,0,0,8"
+                            FontFamily="Segoe Fluent Icons"
+                            FontSize="{x:Bind ViewModel.TitleBarFontSize, Mode=OneWay}"
+                            FontWeight="ExtraBold"
+                            Glyph="&#xEF2D;" />
+                        <FontIcon
+                            FontFamily="Segoe Fluent Icons"
+                            FontSize="{x:Bind ViewModel.TitleBarFontSize, Mode=OneWay}"
+                            FontWeight="ExtraBold"
+                            Glyph="&#xEF2D;" />
+                        <FontIcon
+                            Margin="0,8,0,0"
+                            FontFamily="Segoe Fluent Icons"
+                            FontSize="{x:Bind ViewModel.TitleBarFontSize, Mode=OneWay}"
+                            FontWeight="ExtraBold"
+                            Glyph="&#xEF2D;" />
+                    </Grid>
+                    <Button.Flyout>
+                        <MenuFlyout>
+                            <ToggleMenuFlyoutItem
+                                x:Name="AOTFlyoutItem"
+                                x:Uid="BaseWindowAOTFlyoutItem"
+                                Click="AOTFlyoutItem_Click" />
+                            <ToggleMenuFlyoutItem
+                                x:Name="FullScreenFlyoutItem"
+                                x:Uid="BaseWindowFullScreenFlyoutItem"
+                                Click="FullScreenFlyoutItem_Click" />
+                            <ToggleMenuFlyoutItem
+                                x:Name="DockFlyoutItem"
+                                x:Uid="HostWindowDockFlyoutItem"
+                                Click="DockFlyoutItem_Click" />
+                            <ToggleMenuFlyoutItem
+                                x:Name="MiniFlyoutItem"
+                                x:Uid="BaseWindowMiniFlyoutItem"
+                                Click="MiniFlyoutItem_Click" />
+                            <MenuFlyoutItem
+                                x:Name="SettingsFlyoutItem"
+                                x:Uid="HostWindowSettingsFlyoutItem"
+                                Click="SettingsMenuFlyoutItem_Click" />
+                        </MenuFlyout>
+                    </Button.Flyout>
+                </Button>
+
+                <!--  Window Minimise  -->
+                <Button
+                    x:Name="MinimiseButton"
+                    Click="MinimiseButton_Click"
+                    Style="{StaticResource TitleBarButtonStyle}">
+                    <FontIcon
+                        FontFamily="Segoe Fluent Icons"
+                        FontSize="{x:Bind ViewModel.TitleBarFontSize, Mode=OneWay}"
+                        Glyph="&#xEF2D;" />
+                </Button>
+                <!--  Window Maximise  -->
+                <Button
+                    x:Name="MaximiseButton"
+                    Click="MaximiseButton_Click"
+                    Style="{StaticResource TitleBarButtonStyle}">
+                    <FontIcon
+                        FontFamily="Segoe Fluent Icons"
+                        FontSize="{x:Bind ViewModel.TitleBarFontSize, Mode=OneWay}"
+                        Glyph="&#xEF2E;" />
+                </Button>
+                <!--  Window Restore  -->
+                <Button
+                    x:Name="RestoreButton"
+                    Click="RestoreButton_Click"
+                    Style="{StaticResource TitleBarButtonStyle}"
+                    Visibility="Collapsed">
+                    <FontIcon
+                        FontFamily="Segoe Fluent Icons"
+                        FontSize="{x:Bind ViewModel.TitleBarFontSize, Mode=OneWay}"
+                        Glyph="&#xEF2F;" />
+                </Button>
+                <!--  Window Close  -->
+                <Button
+                    x:Name="CloseButton"
+                    Click="CloseButton_Click"
+                    Style="{StaticResource TitleBarButtonStyle}">
+                    <FontIcon
+                        FontFamily="Segoe Fluent Icons"
+                        FontSize="{x:Bind ViewModel.TitleBarFontSize, Mode=OneWay}"
+                        Glyph="&#xEF2C;" />
+                </Button>
+            </StackPanel>
+
+        </Grid>
+
+        <InfoBar
+            x:Name="HostInfoBar"
+            Margin="36"
+            HorizontalAlignment="Center"
+            VerticalAlignment="Bottom"
+            Background="{ThemeResource SystemFillColorSolidAttentionBackgroundBrush}"
+            IsClosable="False"
+            IsOpen="{x:Bind ViewModel.ShowInfoBar, Mode=OneWay}"
+            Message="{x:Bind ViewModel.Notification.Message, Mode=OneWay}"
+            Opacity="0"
+            Severity="{x:Bind ViewModel.Notification.Severity, Mode=OneWay}">
+            <InfoBar.RenderTransform>
+                <TranslateTransform x:Name="HostInfoBarTransform" Y="20" />
+            </InfoBar.RenderTransform>
+            <InfoBar.Resources>
+                <Storyboard x:Key="InfoBarShowAndHideStoryboard">
+                    <!--  Opacity  -->
+                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="HostInfoBar" Storyboard.TargetProperty="Opacity">
+                        <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0" />
+                        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1" />
+                        <EasingDoubleKeyFrame KeyTime="0:0:3.6" Value="1" />
+                        <EasingDoubleKeyFrame KeyTime="0:0:3.9" Value="0" />
+                    </DoubleAnimationUsingKeyFrames>
+
+                    <!--  Y  -->
+                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="HostInfoBarTransform" Storyboard.TargetProperty="Y">
+                        <EasingDoubleKeyFrame KeyTime="0:0:0" Value="20" />
+                        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0" />
+                        <EasingDoubleKeyFrame KeyTime="0:0:3.6" Value="0" />
+                        <EasingDoubleKeyFrame KeyTime="0:0:3.9" Value="20" />
+                    </DoubleAnimationUsingKeyFrames>
+                </Storyboard>
+            </InfoBar.Resources>
+            <interactivity:Interaction.Behaviors>
+                <interactivity:DataTriggerBehavior
+                    Binding="{Binding ElementName=HostInfoBar, Path=IsOpen, Mode=OneWay}"
+                    ComparisonCondition="Equal"
+                    Value="True">
+                    <interactivity:ControlStoryboardAction Storyboard="{StaticResource InfoBarShowAndHideStoryboard}" />
+                </interactivity:DataTriggerBehavior>
+            </interactivity:Interaction.Behaviors>
+        </InfoBar>
+
+    </Grid>
+</Window>

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Views/HostWindow.xaml.cs

@@ -0,0 +1,311 @@
+using System;
+using BetterLyrics.WinUI3.Enums;
+using BetterLyrics.WinUI3.Helper;
+using BetterLyrics.WinUI3.Messages;
+using BetterLyrics.WinUI3.Services.Settings;
+using BetterLyrics.WinUI3.ViewModels;
+using CommunityToolkit.Mvvm.DependencyInjection;
+using CommunityToolkit.Mvvm.Messaging;
+using CommunityToolkit.Mvvm.Messaging.Messages;
+using CommunityToolkit.WinUI.Behaviors;
+using Microsoft.Extensions.Logging;
+using Microsoft.UI.Windowing;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Input;
+using Microsoft.UI.Xaml.Media;
+using Microsoft.UI.Xaml.Navigation;
+using WinRT.Interop;
+using WinUIEx;
+
+// To learn more about WinUI, the WinUI project structure,
+// and more about our project templates, see: http://aka.ms/winui-project-info.
+
+namespace BetterLyrics.WinUI3.Views
+{
+    /// <summary>
+    /// An empty window that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class HostWindow
+        : Window,
+            IRecipient<PropertyChangedMessage<BackdropType>>
+    {
+        public HostWindowViewModel ViewModel { get; set; }
+
+        private ForegroundWindowWatcherHelper? _watcherHelper = null;
+
+        private readonly ISettingsService _settingsService =
+            Ioc.Default.GetRequiredService<ISettingsService>();
+
+        private readonly bool _listenOnActivatedWindowChange;
+
+        public HostWindow(
+            bool alwaysOnTop = false,
+            bool clickThrough = false,
+            bool listenOnActivatedWindowChange = false
+        )
+        {
+            this.InitializeComponent();
+
+            ViewModel = Ioc.Default.GetRequiredService<HostWindowViewModel>();
+
+            _listenOnActivatedWindowChange = listenOnActivatedWindowChange;
+
+            AppWindow.Changed += AppWindow_Changed;
+
+            this.HideSystemTitleBarAndSetCustomTitleBar(TopCommandGrid);
+
+            if (clickThrough)
+                this.SetExtendedWindowStyle(
+                    ExtendedWindowStyle.Transparent | ExtendedWindowStyle.Layered
+                );
+
+            SystemBackdrop = SystemBackdropHelper.CreateSystemBackdrop(
+                _settingsService.BackdropType
+            );
+
+            if (alwaysOnTop)
+                ((OverlappedPresenter)AppWindow.Presenter).IsAlwaysOnTop = true;
+
+            if (listenOnActivatedWindowChange)
+            {
+                StartWatchWindowColorChange();
+            }
+        }
+
+        private void StartWatchWindowColorChange()
+        {
+            var hwnd = WindowNative.GetWindowHandle(this);
+            _watcherHelper = new ForegroundWindowWatcherHelper(
+                hwnd,
+                onWindowChanged =>
+                {
+                    ViewModel.UpdateAccentColor(hwnd);
+                }
+            );
+            _watcherHelper.Start();
+            ViewModel.UpdateAccentColor(hwnd);
+        }
+
+        private void StopWatchWindowColorChange()
+        {
+            _watcherHelper?.Stop();
+            _watcherHelper = null;
+        }
+
+        private void AppWindow_Changed(AppWindow sender, AppWindowChangedEventArgs args)
+        {
+            if (args.DidPresenterChange)
+                UpdateTitleBarWindowButtonsVisibility();
+        }
+
+        public void Navigate(Type type)
+        {
+            RootFrame.Navigate(type);
+        }
+
+        private void RootFrame_NavigationFailed(object sender, NavigationFailedEventArgs e)
+        {
+            throw new Exception("Failed to load Page " + e.SourcePageType.FullName);
+        }
+
+        private void CloseButton_Click(object sender, RoutedEventArgs e)
+        {
+            if (RootFrame.SourcePageType == typeof(LyricsPage))
+            {
+                Application.Current.Exit();
+            }
+            else
+            {
+                AppWindow.Hide();
+            }
+        }
+
+        private void MaximiseButton_Click(object sender, RoutedEventArgs e)
+        {
+            if (AppWindow.Presenter is OverlappedPresenter presenter)
+            {
+                presenter.Maximize();
+            }
+        }
+
+        private void MinimiseButton_Click(object sender, RoutedEventArgs e)
+        {
+            if (AppWindow.Presenter is OverlappedPresenter presenter)
+            {
+                presenter.Minimize();
+            }
+        }
+
+        private void RestoreButton_Click(object sender, RoutedEventArgs e)
+        {
+            if (AppWindow.Presenter is OverlappedPresenter presenter)
+            {
+                presenter.Restore();
+            }
+        }
+
+        private void UpdateTitleBarWindowButtonsVisibility()
+        {
+            switch (AppWindow.Presenter.Kind)
+            {
+                case AppWindowPresenterKind.Default:
+                    break;
+                case AppWindowPresenterKind.CompactOverlay:
+                    MinimiseButton.Visibility =
+                        MaximiseButton.Visibility =
+                        RestoreButton.Visibility =
+                        AOTFlyoutItem.Visibility =
+                        FullScreenFlyoutItem.Visibility =
+                        DockFlyoutItem.Visibility =
+                            Visibility.Collapsed;
+                    break;
+                case AppWindowPresenterKind.FullScreen:
+                    MinimiseButton.Visibility =
+                        MaximiseButton.Visibility =
+                        RestoreButton.Visibility =
+                        AOTFlyoutItem.Visibility =
+                        MiniFlyoutItem.Visibility =
+                        DockFlyoutItem.Visibility =
+                            Visibility.Collapsed;
+                    FullScreenFlyoutItem.IsChecked = true;
+                    break;
+                case AppWindowPresenterKind.Overlapped:
+                    DockFlyoutItem.Visibility = Visibility.Visible;
+                    var overlappedPresenter = (OverlappedPresenter)AppWindow.Presenter;
+                    if (DockFlyoutItem.IsChecked)
+                    {
+                        MinimiseButton.Visibility =
+                            MaximiseButton.Visibility =
+                            RestoreButton.Visibility =
+                            AOTFlyoutItem.Visibility =
+                            FullScreenFlyoutItem.Visibility =
+                            MiniFlyoutItem.Visibility =
+                                Visibility.Collapsed;
+                    }
+                    else
+                    {
+                        MinimiseButton.Visibility =
+                            AOTFlyoutItem.Visibility =
+                            MiniFlyoutItem.Visibility =
+                            FullScreenFlyoutItem.Visibility =
+                                Visibility.Visible;
+                        FullScreenFlyoutItem.IsChecked = false;
+                        AOTFlyoutItem.IsChecked = overlappedPresenter.IsAlwaysOnTop;
+
+                        if (overlappedPresenter.State == OverlappedPresenterState.Maximized)
+                        {
+                            MaximiseButton.Visibility = Visibility.Collapsed;
+                            RestoreButton.Visibility = Visibility.Visible;
+                        }
+                        else if (overlappedPresenter.State == OverlappedPresenterState.Restored)
+                        {
+                            MaximiseButton.Visibility = Visibility.Visible;
+                            RestoreButton.Visibility = Visibility.Collapsed;
+                        }
+                    }
+                    break;
+                default:
+                    break;
+            }
+        }
+
+        private void RootFrame_Navigated(object sender, NavigationEventArgs e)
+        {
+            AppWindow.Title = Title = App.ResourceLoader!.GetString(
+                $"{e.SourcePageType.Name}Title"
+            );
+            if (e.SourcePageType == typeof(LyricsPage))
+            {
+                if (_settingsService.AutoStartWindowType == AutoStartWindowType.DockMode)
+                {
+                    DockFlyoutItem.IsChecked = true;
+                    DockFlyoutItem_Click(null, null);
+                }
+            }
+        }
+
+        private void AOTFlyoutItem_Click(object sender, RoutedEventArgs e)
+        {
+            var overlappedPresenter = (OverlappedPresenter)AppWindow.Presenter;
+            overlappedPresenter.IsAlwaysOnTop = !overlappedPresenter.IsAlwaysOnTop;
+        }
+
+        private void FullScreenFlyoutItem_Click(object sender, RoutedEventArgs e)
+        {
+            switch (AppWindow.Presenter.Kind)
+            {
+                case AppWindowPresenterKind.Default:
+                    break;
+                case AppWindowPresenterKind.CompactOverlay:
+                    break;
+                case AppWindowPresenterKind.FullScreen:
+                    AppWindow.SetPresenter(AppWindowPresenterKind.Overlapped);
+                    break;
+                case AppWindowPresenterKind.Overlapped:
+                    AppWindow.SetPresenter(AppWindowPresenterKind.FullScreen);
+                    break;
+                default:
+                    break;
+            }
+        }
+
+        private void MiniFlyoutItem_Click(object sender, RoutedEventArgs e)
+        {
+            if (MiniFlyoutItem.IsChecked)
+            {
+                AppWindow.SetPresenter(AppWindowPresenterKind.CompactOverlay);
+            }
+            else
+            {
+                AppWindow.SetPresenter(AppWindowPresenterKind.Overlapped);
+            }
+        }
+
+        public void Receive(PropertyChangedMessage<BackdropType> message)
+        {
+            SystemBackdrop = SystemBackdropHelper.CreateSystemBackdrop(message.NewValue);
+        }
+
+        private void RootGrid_Loaded(object sender, RoutedEventArgs e)
+        {
+            if (_listenOnActivatedWindowChange)
+            {
+                var hwnd = WindowNative.GetWindowHandle(this);
+                ViewModel.UpdateAccentColor(hwnd);
+            }
+        }
+
+        private void DockFlyoutItem_Click(object sender, RoutedEventArgs e)
+        {
+            if (DockFlyoutItem.IsChecked)
+            {
+                DockHelper.Enable(this, 48);
+                StartWatchWindowColorChange();
+            }
+            else
+            {
+                DockHelper.Disable(this);
+                StopWatchWindowColorChange();
+            }
+            ViewModel.IsDockMode = DockFlyoutItem.IsChecked;
+            UpdateTitleBarWindowButtonsVisibility();
+        }
+
+        private void TopCommandGrid_PointerEntered(object sender, PointerRoutedEventArgs e)
+        {
+            if (TopCommandGrid.Opacity == 0)
+                TopCommandGrid.Opacity = .5;
+        }
+
+        private void TopCommandGrid_PointerExited(object sender, PointerRoutedEventArgs e)
+        {
+            if (TopCommandGrid.Opacity == .5)
+                TopCommandGrid.Opacity = 0;
+        }
+
+        private void SettingsMenuFlyoutItem_Click(object sender, RoutedEventArgs e)
+        {
+            WindowHelper.OpenSettingsWindow();
+        }
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Views/LyricsPage.xaml

@@ -0,0 +1,509 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<Page
+    x:Class="BetterLyrics.WinUI3.Views.LyricsPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:animatedvisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
+    xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml"
+    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
+    xmlns:converters="using:CommunityToolkit.WinUI.Converters"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
+    xmlns:labs="using:CommunityToolkit.Labs.WinUI.MarqueeTextRns"
+    xmlns:local="using:BetterLyrics.WinUI3.Views"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:media="using:CommunityToolkit.WinUI.Media"
+    xmlns:renderer="using:BetterLyrics.WinUI3.Renderer"
+    xmlns:ui="using:CommunityToolkit.WinUI"
+    mc:Ignorable="d">
+
+    <Grid x:Name="RootGrid">
+        <!--  Lyrics area  -->
+        <Grid x:Name="LyricsGrid">
+            <Grid.OpacityTransition>
+                <ScalarTransition />
+            </Grid.OpacityTransition>
+            <renderer:LyricsRenderer />
+        </Grid>
+
+        <Grid Margin="36">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="*" />
+                <ColumnDefinition Width="36" />
+                <ColumnDefinition Width="*" />
+            </Grid.ColumnDefinitions>
+            <Grid.OpacityTransition>
+                <ScalarTransition />
+            </Grid.OpacityTransition>
+
+            <!--  Lyrics placeholder  -->
+            <Grid
+                x:Name="LyricsPlaceholderGrid"
+                Opacity=".5"
+                SizeChanged="LyricsPlaceholderGrid_SizeChanged">
+                <Grid.OpacityTransition>
+                    <ScalarTransition />
+                </Grid.OpacityTransition>
+                <StackPanel
+                    x:Name="LyricsPlaceholderStackPanel"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center"
+                    Opacity="0"
+                    Spacing="12">
+                    <StackPanel.OpacityTransition>
+                        <ScalarTransition />
+                    </StackPanel.OpacityTransition>
+                    <FontIcon
+                        FontFamily="Segoe Fluent Icons"
+                        FontSize="{StaticResource DisplayTextBlockFontSize}"
+                        Glyph="&#xE90B;" />
+                    <TextBlock x:Uid="MainPageLyricsNotFound" FontSize="{StaticResource TitleTextBlockFontSize}" />
+                </StackPanel>
+            </Grid>
+
+            <!--  Song info area  -->
+            <Grid x:Name="SongInfoInnerGrid">
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="2*" />
+                    <!--  Cover area  -->
+                    <RowDefinition Height="9*" />
+                    <!--  Spacer  -->
+                    <RowDefinition Height="*" />
+                    <!--  Title and artist area  -->
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="2*" />
+                </Grid.RowDefinitions>
+                <Grid.OpacityTransition>
+                    <ScalarTransition />
+                </Grid.OpacityTransition>
+
+                <!--  Cover area  -->
+                <Grid
+                    x:Name="CoverArea"
+                    Grid.Row="1"
+                    SizeChanged="CoverArea_SizeChanged">
+
+                    <Grid
+                        x:Name="CoverImageGrid"
+                        CornerRadius="{x:Bind ViewModel.CoverImageGridCornerRadius, Mode=OneWay}"
+                        SizeChanged="CoverImageGrid_SizeChanged">
+                        <Image
+                            x:Name="CoverImage"
+                            Source="{x:Bind ViewModel.CoverImage, Mode=OneWay}"
+                            Stretch="Uniform">
+                            <Image.Resources>
+                                <Storyboard x:Key="CoverIamgeFadeInStoryboard">
+                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="CoverImage" Storyboard.TargetProperty="Opacity">
+                                        <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0" />
+                                        <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1" />
+                                    </DoubleAnimationUsingKeyFrames>
+                                </Storyboard>
+                                <Storyboard x:Key="CoverIamgeFadeOutStoryboard">
+                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="CoverImage" Storyboard.TargetProperty="Opacity">
+                                        <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1" />
+                                        <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0" />
+                                    </DoubleAnimationUsingKeyFrames>
+                                </Storyboard>
+                            </Image.Resources>
+                            <interactivity:Interaction.Behaviors>
+                                <interactivity:DataTriggerBehavior
+                                    Binding="{x:Bind ViewModel.AboutToUpdateUI, Mode=OneWay}"
+                                    ComparisonCondition="Equal"
+                                    Value="True">
+                                    <interactivity:ControlStoryboardAction Storyboard="{StaticResource CoverIamgeFadeOutStoryboard}" />
+                                </interactivity:DataTriggerBehavior>
+                                <interactivity:DataTriggerBehavior
+                                    Binding="{x:Bind ViewModel.AboutToUpdateUI, Mode=OneWay}"
+                                    ComparisonCondition="Equal"
+                                    Value="False">
+                                    <interactivity:ControlStoryboardAction Storyboard="{StaticResource CoverIamgeFadeInStoryboard}" />
+                                </interactivity:DataTriggerBehavior>
+                            </interactivity:Interaction.Behaviors>
+                        </Image>
+                    </Grid>
+
+                </Grid>
+
+                <!--  Title and artist  -->
+                <StackPanel
+                    Grid.Row="3"
+                    VerticalAlignment="Top"
+                    Orientation="Vertical">
+                    <!--  Song title  -->
+                    <controls:OpacityMaskView x:Name="TitleOpacityMaskView" HorizontalAlignment="Center">
+                        <controls:OpacityMaskView.OpacityMask>
+                            <Rectangle Fill="{StaticResource BaseHighEdgeHorizontalFadeBrush}" />
+                        </controls:OpacityMaskView.OpacityMask>
+
+                        <controls:OpacityMaskView.Resources>
+                            <Storyboard x:Key="TitleOpacityMaskViewFadeInStoryboard">
+                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="TitleOpacityMaskView" Storyboard.TargetProperty="Opacity">
+                                    <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0" />
+                                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1" />
+                                </DoubleAnimationUsingKeyFrames>
+                            </Storyboard>
+                            <Storyboard x:Key="TitleOpacityMaskViewFadeOutStoryboard">
+                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="TitleOpacityMaskView" Storyboard.TargetProperty="Opacity">
+                                    <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1" />
+                                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0" />
+                                </DoubleAnimationUsingKeyFrames>
+                            </Storyboard>
+                        </controls:OpacityMaskView.Resources>
+
+                        <interactivity:Interaction.Behaviors>
+                            <interactivity:DataTriggerBehavior
+                                Binding="{x:Bind ViewModel.AboutToUpdateUI, Mode=OneWay}"
+                                ComparisonCondition="Equal"
+                                Value="True">
+                                <interactivity:ControlStoryboardAction Storyboard="{StaticResource TitleOpacityMaskViewFadeOutStoryboard}" />
+                            </interactivity:DataTriggerBehavior>
+                            <interactivity:DataTriggerBehavior
+                                Binding="{x:Bind ViewModel.AboutToUpdateUI, Mode=OneWay}"
+                                ComparisonCondition="Equal"
+                                Value="False">
+                                <interactivity:ControlStoryboardAction Storyboard="{StaticResource TitleOpacityMaskViewFadeInStoryboard}" />
+                            </interactivity:DataTriggerBehavior>
+                        </interactivity:Interaction.Behaviors>
+
+                        <labs:MarqueeText
+                            x:Name="TitleTextBlock"
+                            Behavior="Bouncing"
+                            FontSize="{StaticResource TitleTextBlockFontSize}"
+                            FontWeight="SemiBold"
+                            Foreground="{ThemeResource TextFillColorPrimaryBrush}"
+                            Text="{x:Bind ViewModel.SongInfo.Title, Mode=OneWay}" />
+                    </controls:OpacityMaskView>
+
+                    <!--  Song artist  -->
+                    <controls:OpacityMaskView x:Name="ArtistOpacityMaskView" HorizontalAlignment="Center">
+                        <controls:OpacityMaskView.OpacityMask>
+                            <Rectangle Fill="{StaticResource BaseHighEdgeHorizontalFadeBrush}" />
+                        </controls:OpacityMaskView.OpacityMask>
+                        <controls:OpacityMaskView.Resources>
+                            <Storyboard x:Key="ArtistOpacityMaskViewFadeInStoryboard">
+                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ArtistOpacityMaskView" Storyboard.TargetProperty="Opacity">
+                                    <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0" />
+                                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1" />
+                                </DoubleAnimationUsingKeyFrames>
+                            </Storyboard>
+                            <Storyboard x:Key="ArtistOpacityMaskViewFadeOutStoryboard">
+                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ArtistOpacityMaskView" Storyboard.TargetProperty="Opacity">
+                                    <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1" />
+                                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0" />
+                                </DoubleAnimationUsingKeyFrames>
+                            </Storyboard>
+                        </controls:OpacityMaskView.Resources>
+
+                        <interactivity:Interaction.Behaviors>
+                            <interactivity:DataTriggerBehavior
+                                Binding="{x:Bind ViewModel.AboutToUpdateUI, Mode=OneWay}"
+                                ComparisonCondition="Equal"
+                                Value="True">
+                                <interactivity:ControlStoryboardAction Storyboard="{StaticResource ArtistOpacityMaskViewFadeOutStoryboard}" />
+                            </interactivity:DataTriggerBehavior>
+                            <interactivity:DataTriggerBehavior
+                                Binding="{x:Bind ViewModel.AboutToUpdateUI, Mode=OneWay}"
+                                ComparisonCondition="Equal"
+                                Value="False">
+                                <interactivity:ControlStoryboardAction Storyboard="{StaticResource ArtistOpacityMaskViewFadeInStoryboard}" />
+                            </interactivity:DataTriggerBehavior>
+                        </interactivity:Interaction.Behaviors>
+
+                        <labs:MarqueeText
+                            Behavior="Bouncing"
+                            FontSize="{StaticResource SubtitleTextBlockFontSize}"
+                            FontWeight="SemiBold"
+                            Foreground="{ThemeResource TextFillColorPrimaryBrush}"
+                            Opacity="0.5"
+                            Text="{x:Bind ViewModel.SongInfo.Artist, Mode=OneWay}" />
+                    </controls:OpacityMaskView>
+
+                </StackPanel>
+
+            </Grid>
+
+        </Grid>
+
+        <!--  No music playing placeholder  -->
+        <TextBlock
+            x:Name="MainPageNoMusicPlayingTextBlock"
+            x:Uid="MainPageNoMusicPlaying"
+            Grid.Column="0"
+            Grid.ColumnSpan="3"
+            HorizontalAlignment="Center"
+            VerticalAlignment="Center"
+            Style="{StaticResource TitleTextBlockStyle}">
+            <TextBlock.OpacityTransition>
+                <ScalarTransition />
+            </TextBlock.OpacityTransition>
+        </TextBlock>
+
+        <!--  Bottom-right command area  -->
+        <Grid
+            x:Name="BottomCommandGrid"
+            Margin="0,0,4,4"
+            HorizontalAlignment="Right"
+            VerticalAlignment="Bottom"
+            Background="Transparent"
+            Opacity="0"
+            PointerEntered="BottomCommandGrid_PointerEntered"
+            PointerExited="BottomCommandGrid_PointerExited"
+            Visibility="{x:Bind ViewModel.IsNotMockMode, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}">
+            <Grid.OpacityTransition>
+                <ScalarTransition />
+            </Grid.OpacityTransition>
+
+            <StackPanel HorizontalAlignment="Right" Spacing="4">
+
+                <Button
+                    x:Name="DisplayTypeSwitchButton"
+                    x:Uid="MainPageDisplayTypeSwitcher"
+                    Content="{ui:FontIcon Glyph=&#xF246;}"
+                    Style="{StaticResource GhostButtonStyle}">
+                    <Button.OpacityTransition>
+                        <ScalarTransition />
+                    </Button.OpacityTransition>
+                    <Button.Flyout>
+                        <Flyout>
+                            <Flyout.FlyoutPresenterStyle>
+                                <Style TargetType="FlyoutPresenter">
+                                    <Setter Property="Padding" Value="12,2,12,8" />
+                                    <Setter Property="CornerRadius" Value="8" />
+                                </Style>
+                            </Flyout.FlyoutPresenterStyle>
+                            <RadioButtons MaxColumns="1" SelectedIndex="{x:Bind ViewModel.DisplayType, Mode=OneWay, Converter={StaticResource EnumToIntConverter}}">
+                                <RadioButton
+                                    x:Uid="MainPageAlbumArtOnly"
+                                    Command="{x:Bind ViewModel.DisplayTypeChangedCommand}"
+                                    CommandParameter="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Tag}"
+                                    Tag="0" />
+                                <RadioButton
+                                    x:Uid="MainPageLyriscOnly"
+                                    Command="{x:Bind ViewModel.DisplayTypeChangedCommand}"
+                                    CommandParameter="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Tag}"
+                                    Tag="1" />
+                                <RadioButton
+                                    x:Uid="MainPageSplitView"
+                                    Command="{x:Bind ViewModel.DisplayTypeChangedCommand}"
+                                    CommandParameter="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Tag}"
+                                    Tag="2" />
+                            </RadioButtons>
+                        </Flyout>
+                    </Button.Flyout>
+                </Button>
+
+                <Button
+                    x:Name="MusicInfoButton"
+                    Content="{ui:FontIcon Glyph=&#xF167;}"
+                    Style="{StaticResource GhostButtonStyle}">
+                    <Button.Flyout>
+                        <Flyout>
+                            <StackPanel Spacing="16">
+                                <StackPanel Orientation="Horizontal" Spacing="12">
+                                    <FontIcon FontFamily="Segoe Fluent Icons" Glyph="&#xED35;" />
+                                    <TextBlock Text="{x:Bind ViewModel.SongInfo.SourceAppUserModelId, Mode=OneWay}" />
+                                </StackPanel>
+                                <StackPanel Orientation="Horizontal" Spacing="12">
+                                    <FontIcon FontFamily="Segoe Fluent Icons" Glyph="&#xEC4F;" />
+                                    <TextBlock Text="{x:Bind ViewModel.SongInfo.Title, Mode=OneWay}" />
+                                </StackPanel>
+                                <StackPanel Orientation="Horizontal" Spacing="12">
+                                    <FontIcon FontFamily="Segoe Fluent Icons" Glyph="&#xE77B;" />
+                                    <TextBlock Text="{x:Bind ViewModel.SongInfo.Artist, Mode=OneWay}" />
+                                </StackPanel>
+                                <StackPanel Orientation="Horizontal" Spacing="12">
+                                    <FontIcon FontFamily="Segoe Fluent Icons" Glyph="&#xF0E3;" />
+                                    <ListView
+                                        x:Name="MatchedFilesListView"
+                                        ItemsSource="{x:Bind ViewModel.SongInfo.FilesFound, Mode=OneWay}"
+                                        SelectionMode="None">
+                                        <ListView.ItemContainerStyle>
+                                            <Style TargetType="ListViewItem">
+                                                <Setter Property="VerticalContentAlignment" Value="Center" />
+                                                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+                                                <Setter Property="Margin" Value="0" />
+                                                <Setter Property="Padding" Value="0" />
+                                                <Setter Property="MinWidth" Value="0" />
+                                                <Setter Property="MinHeight" Value="0" />
+                                            </Style>
+                                        </ListView.ItemContainerStyle>
+                                        <ListView.ItemTemplate>
+                                            <DataTemplate>
+                                                <HyperlinkButton
+                                                    VerticalAlignment="Center"
+                                                    Click="OpenMatchedFileButton_Click"
+                                                    RelativePanel.AlignLeftWithPanel="True"
+                                                    Tag="{Binding Mode=OneWay}">
+                                                    <TextBlock
+                                                        MaxWidth="300"
+                                                        Text="{Binding Mode=OneWay}"
+                                                        TextWrapping="Wrap" />
+                                                </HyperlinkButton>
+                                            </DataTemplate>
+                                        </ListView.ItemTemplate>
+                                    </ListView>
+                                    <TextBlock
+                                        x:Name="NoLocalFilesMatchedTextBlock"
+                                        x:Uid="MainPageNoLocalFilesMatched"
+                                        Visibility="Collapsed" />
+                                </StackPanel>
+                            </StackPanel>
+                        </Flyout>
+                    </Button.Flyout>
+                </Button>
+
+                <Button
+                    x:Name="SettingsButton"
+                    Command="{x:Bind ViewModel.OpenSettingsWindowCommand}"
+                    Content="{ui:FontIcon Glyph=&#xF8B0;}"
+                    Style="{StaticResource GhostButtonStyle}" />
+
+            </StackPanel>
+
+        </Grid>
+
+        <TeachingTip
+            x:Name="WelcomeTeachingTip"
+            x:Uid="MainPageWelcomeTeachingTip"
+            Closed="WelcomeTeachingTip_Closed"
+            IsOpen="{x:Bind ViewModel.IsWelcomeTeachingTipOpen, Mode=OneWay}"
+            Target="{x:Bind SettingsButton}" />
+
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup x:Name="LayoutStates">
+
+                <!--  Album art only  -->
+                <VisualState x:Name="AlbumArtOnly">
+                    <VisualState.StateTriggers>
+                        <ui:CompareStateTrigger
+                            Comparison="Equal"
+                            Value="{x:Bind ViewModel.DisplayType, Mode=OneWay, Converter={StaticResource EnumToIntConverter}}"
+                            To="0" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="LyricsGrid.Opacity" Value="1" />
+                        <Setter Target="LyricsPlaceholderGrid.Opacity" Value="0" />
+                        <Setter Target="LyricsPlaceholderGrid.(Grid.Column)" Value="0" />
+                        <Setter Target="LyricsPlaceholderGrid.(Grid.ColumnSpan)" Value="3" />
+                        <Setter Target="SongInfoInnerGrid.(Grid.Column)" Value="0" />
+                        <Setter Target="SongInfoInnerGrid.(Grid.ColumnSpan)" Value="3" />
+                        <Setter Target="SongInfoInnerGrid.Opacity" Value="1" />
+                        <Setter Target="MainPageNoMusicPlayingTextBlock.Opacity" Value="0" />
+                    </VisualState.Setters>
+                </VisualState>
+
+                <!--  Lyrics only  -->
+                <VisualState x:Name="LyricsOnly">
+                    <VisualState.StateTriggers>
+                        <ui:CompareStateTrigger
+                            Comparison="Equal"
+                            Value="{x:Bind ViewModel.DisplayType, Mode=OneWay, Converter={StaticResource EnumToIntConverter}}"
+                            To="1" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="SongInfoInnerGrid.Opacity" Value="0" />
+                        <Setter Target="SongInfoInnerGrid.(Grid.Column)" Value="0" />
+                        <Setter Target="SongInfoInnerGrid.(Grid.ColumnSpan)" Value="3" />
+                        <Setter Target="LyricsGrid.Opacity" Value="1" />
+                        <Setter Target="LyricsPlaceholderGrid.(Grid.Column)" Value="0" />
+                        <Setter Target="LyricsPlaceholderGrid.(Grid.ColumnSpan)" Value="3" />
+                        <Setter Target="LyricsPlaceholderGrid.Opacity" Value="1" />
+                        <Setter Target="MainPageNoMusicPlayingTextBlock.Opacity" Value="0" />
+                    </VisualState.Setters>
+                </VisualState>
+
+                <!--  Split view  -->
+                <VisualState x:Name="SplitView">
+                    <VisualState.StateTriggers>
+                        <ui:CompareStateTrigger
+                            Comparison="Equal"
+                            Value="{x:Bind ViewModel.DisplayType, Mode=OneWay, Converter={StaticResource EnumToIntConverter}}"
+                            To="2" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="SongInfoInnerGrid.(Grid.Column)" Value="0" />
+                        <Setter Target="SongInfoInnerGrid.(Grid.ColumnSpan)" Value="1" />
+                        <Setter Target="SongInfoInnerGrid.Opacity" Value="1" />
+                        <Setter Target="LyricsGrid.Opacity" Value="1" />
+                        <Setter Target="LyricsPlaceholderGrid.(Grid.Column)" Value="2" />
+                        <Setter Target="LyricsPlaceholderGrid.(Grid.ColumnSpan)" Value="1" />
+                        <Setter Target="LyricsPlaceholderGrid.Opacity" Value="1" />
+                        <Setter Target="MainPageNoMusicPlayingTextBlock.Opacity" Value="0" />
+                    </VisualState.Setters>
+                </VisualState>
+
+                <!--  Placeholder only  -->
+                <VisualState x:Name="PlaceholderOnly">
+                    <VisualState.StateTriggers>
+                        <ui:CompareStateTrigger
+                            Comparison="Equal"
+                            Value="{x:Bind ViewModel.DisplayType, Mode=OneWay, Converter={StaticResource EnumToIntConverter}}"
+                            To="3" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="SongInfoInnerGrid.Opacity" Value="0" />
+                        <Setter Target="LyricsGrid.Opacity" Value="0" />
+                        <Setter Target="LyricsPlaceholderGrid.Opacity" Value="0" />
+                        <Setter Target="MainPageNoMusicPlayingTextBlock.Opacity" Value="1" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+
+            <VisualStateGroup x:Name="FilesMatchStates">
+                <VisualState x:Name="Matched" />
+                <VisualState x:Name="NotMatched">
+                    <VisualState.StateTriggers>
+                        <ui:IsNullOrEmptyStateTrigger Value="{x:Bind ViewModel.SongInfo.FilesFound, Mode=OneWay}" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="NoLocalFilesMatchedTextBlock.Visibility" Value="Visible" />
+                        <Setter Target="MatchedFilesListView.Visibility" Value="Collapsed" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+
+            <VisualStateGroup x:Name="LyricsExistenceStates">
+                <VisualState x:Name="Existed">
+                    <VisualState.StateTriggers>
+                        <StateTrigger IsActive="{x:Bind ViewModel.SongInfo.IsLyricsExisted, Mode=OneWay}" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="LyricsPlaceholderStackPanel.Opacity" Value="0" />
+                    </VisualState.Setters>
+                </VisualState>
+                <VisualState x:Name="NotExisted">
+                    <VisualState.StateTriggers>
+                        <StateTrigger IsActive="{x:Bind ViewModel.SongInfo.IsLyricsExisted, Mode=OneWay, Converter={StaticResource BoolNegationConverter}}" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="LyricsPlaceholderStackPanel.Opacity" Value=".5" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+
+            <VisualStateGroup x:Name="MusicPlayingStates">
+                <VisualState x:Name="MusicPlaying">
+                    <VisualState.StateTriggers>
+                        <ui:IsNotEqualStateTrigger Value="{x:Bind ViewModel.DisplayType, Mode=OneWay}" To="3" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="DisplayTypeSwitchButton.Visibility" Value="Visible" />
+                        <Setter Target="MusicInfoButton.Visibility" Value="Visible" />
+                    </VisualState.Setters>
+                </VisualState>
+                <VisualState x:Name="NoMusicPlaying">
+                    <VisualState.StateTriggers>
+                        <ui:CompareStateTrigger
+                            Comparison="Equal"
+                            Value="{x:Bind ViewModel.DisplayType, Mode=OneWay}"
+                            To="3" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="DisplayTypeSwitchButton.Visibility" Value="Collapsed" />
+                        <Setter Target="MusicInfoButton.Visibility" Value="Collapsed" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
+    </Grid>
+</Page>

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Views/LyricsPage.xaml.cs

@@ -0,0 +1,77 @@
+using System;
+using BetterLyrics.WinUI3.Helper;
+using BetterLyrics.WinUI3.ViewModels;
+using CommunityToolkit.Mvvm.DependencyInjection;
+using CommunityToolkit.Mvvm.Messaging;
+using CommunityToolkit.Mvvm.Messaging.Messages;
+using Microsoft.UI.Windowing;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using WinUIEx;
+
+// To learn more about WinUI, the WinUI project structure,
+// and more about our project templates, see: http://aka.ms/winui-project-info.
+
+namespace BetterLyrics.WinUI3.Views
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class LyricsPage : Page
+    {
+        public LyricsPageViewModel ViewModel => (LyricsPageViewModel)DataContext;
+
+        public LyricsPage()
+        {
+            this.InitializeComponent();
+
+            DataContext = Ioc.Default.GetService<LyricsPageViewModel>();
+        }
+
+        private void WelcomeTeachingTip_Closed(TeachingTip sender, TeachingTipClosedEventArgs args)
+        {
+            ViewModel.IsFirstRun = false;
+        }
+
+        private void CoverArea_SizeChanged(object sender, SizeChangedEventArgs e)
+        {
+            CoverImageGrid.Width = CoverImageGrid.Height = Math.Min(
+                CoverArea.ActualWidth,
+                CoverArea.ActualHeight
+            );
+        }
+
+        private void BottomCommandGrid_PointerEntered(
+            object sender,
+            Microsoft.UI.Xaml.Input.PointerRoutedEventArgs e
+        )
+        {
+            if (BottomCommandGrid.Opacity == 0)
+                BottomCommandGrid.Opacity = .5;
+        }
+
+        private void BottomCommandGrid_PointerExited(
+            object sender,
+            Microsoft.UI.Xaml.Input.PointerRoutedEventArgs e
+        )
+        {
+            if (BottomCommandGrid.Opacity == .5)
+                BottomCommandGrid.Opacity = 0;
+        }
+
+        private void LyricsPlaceholderGrid_SizeChanged(object sender, SizeChangedEventArgs e)
+        {
+            ViewModel.LimitedLineWidth = e.NewSize.Width;
+        }
+
+        private void OpenMatchedFileButton_Click(object sender, RoutedEventArgs e)
+        {
+            ViewModel.OpenMatchedFileFolderInFileExplorer((string)(sender as HyperlinkButton)!.Tag);
+        }
+
+        private void CoverImageGrid_SizeChanged(object sender, SizeChangedEventArgs e)
+        {
+            ViewModel.CoverImageGridActualHeight = e.NewSize.Height;
+        }
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Views/MainPage.xaml

@@ -1,489 +0,0 @@
-<?xml version="1.0" encoding="utf-8" ?>
-<Page
-    x:Class="BetterLyrics.WinUI3.Views.MainPage"
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml"
-    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
-    xmlns:labs="using:CommunityToolkit.Labs.WinUI.MarqueeTextRns"
-    xmlns:local="using:BetterLyrics.WinUI3.Views"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:ui="using:CommunityToolkit.WinUI"
-    NavigationCacheMode="Required"
-    mc:Ignorable="d">
-
-    <Grid x:Name="RootGrid" SizeChanged="RootGrid_SizeChanged">
-        <Grid.Resources>
-            <Thickness x:Key="TeachingTipDescriptionMargin">0,16,0,0</Thickness>
-        </Grid.Resources>
-        <Grid
-            x:Name="TopPlaceholder"
-            Height="36"
-            HorizontalAlignment="Stretch"
-            VerticalAlignment="Top" />
-
-        <Grid x:Name="MainGrid">
-
-            <!--  Lyrics area  -->
-            <Grid x:Name="LyricsGrid">
-
-                <canvas:CanvasAnimatedControl
-                    x:Name="LyricsCanvas"
-                    Draw="LyricsCanvas_Draw"
-                    Foreground="{ThemeResource TextFillColorPrimaryBrush}"
-                    Loaded="LyricsCanvas_Loaded"
-                    Update="LyricsCanvas_Update">
-
-                    <canvas:CanvasAnimatedControl.Resources>
-                        <Storyboard x:Key="LyricsCanvasFadeInStoryboard">
-                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="LyricsCanvas" Storyboard.TargetProperty="Opacity">
-                                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0" />
-                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1" />
-                            </DoubleAnimationUsingKeyFrames>
-                        </Storyboard>
-                        <Storyboard x:Key="LyricsCanvasFadeOutStoryboard">
-                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="LyricsCanvas" Storyboard.TargetProperty="Opacity">
-                                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1" />
-                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0" />
-                            </DoubleAnimationUsingKeyFrames>
-                        </Storyboard>
-                    </canvas:CanvasAnimatedControl.Resources>
-
-                    <interactivity:Interaction.Behaviors>
-                        <interactivity:DataTriggerBehavior
-                            Binding="{x:Bind ViewModel.AboutToUpdateUI, Mode=OneWay}"
-                            ComparisonCondition="Equal"
-                            Value="True">
-                            <interactivity:ControlStoryboardAction Storyboard="{StaticResource LyricsCanvasFadeOutStoryboard}" />
-                        </interactivity:DataTriggerBehavior>
-                        <interactivity:DataTriggerBehavior
-                            Binding="{x:Bind ViewModel.AboutToUpdateUI, Mode=OneWay}"
-                            ComparisonCondition="Equal"
-                            Value="False">
-                            <interactivity:ControlStoryboardAction Storyboard="{StaticResource LyricsCanvasFadeInStoryboard}" />
-                        </interactivity:DataTriggerBehavior>
-                    </interactivity:Interaction.Behaviors>
-
-                </canvas:CanvasAnimatedControl>
-
-            </Grid>
-
-            <!--  Song info area  -->
-            <Grid x:Name="SongInfoGrid" Margin="36">
-                <Grid.ColumnDefinitions>
-                    <ColumnDefinition x:Name="SongInfoColumnDefinition" Width="*" />
-                    <ColumnDefinition x:Name="SpacerColumnDefinition" Width="36" />
-                    <ColumnDefinition x:Name="LyricsAreaColumnDefinition" Width="*" />
-                </Grid.ColumnDefinitions>
-
-                <Grid.Resources>
-                    <Storyboard x:Key="HideSongInfoGrid">
-                        <DoubleAnimation
-                            Storyboard.TargetName="SongInfoGrid"
-                            Storyboard.TargetProperty="Opacity"
-                            From="1"
-                            To="0"
-                            Duration="0:0:0.2" />
-                    </Storyboard>
-                    <Storyboard x:Key="ShowSongInfoGrid">
-                        <DoubleAnimation
-                            Storyboard.TargetName="SongInfoGrid"
-                            Storyboard.TargetProperty="Opacity"
-                            From="0"
-                            To="1"
-                            Duration="0:0:0.2" />
-                    </Storyboard>
-                </Grid.Resources>
-
-                <interactivity:Interaction.Behaviors>
-                    <interactivity:DataTriggerBehavior
-                        Binding="{x:Bind ViewModel.ShowLyricsOnly, Mode=OneWay}"
-                        ComparisonCondition="Equal"
-                        Value="True">
-                        <interactivity:ControlStoryboardAction Storyboard="{StaticResource HideSongInfoGrid}" />
-                    </interactivity:DataTriggerBehavior>
-                    <interactivity:DataTriggerBehavior
-                        Binding="{x:Bind ViewModel.ShowLyricsOnly, Mode=OneWay}"
-                        ComparisonCondition="Equal"
-                        Value="False">
-                        <interactivity:ControlStoryboardAction Storyboard="{StaticResource ShowSongInfoGrid}" />
-                    </interactivity:DataTriggerBehavior>
-                </interactivity:Interaction.Behaviors>
-
-                <Grid
-                    x:Name="SongInfoInnerGrid"
-                    Grid.Column="0"
-                    Grid.ColumnSpan="3">
-                    <Grid.RowDefinitions>
-                        <RowDefinition Height="4*" />
-                        <!--  Cover area  -->
-                        <RowDefinition Height="20*" />
-                        <!--  Spacer  -->
-                        <RowDefinition Height="2*" />
-                        <!--  Title and artist area  -->
-                        <RowDefinition Height="5*" />
-                        <RowDefinition Height="2*" />
-                    </Grid.RowDefinitions>
-
-                    <Grid.Resources>
-
-                        <!--  Animation for song info  -->
-                        <Storyboard x:Name="SongInfoStackPanelFadeInStoryboard">
-                            <DoubleAnimation
-                                Storyboard.TargetName="SongInfoInnerGrid"
-                                Storyboard.TargetProperty="Opacity"
-                                To="1"
-                                Duration="0:0:0.2" />
-                        </Storyboard>
-                        <Storyboard x:Name="SongInfoStackPanelFadeOutStoryboard" BeginTime="0:0:0.2">
-                            <DoubleAnimation
-                                Storyboard.TargetName="SongInfoInnerGrid"
-                                Storyboard.TargetProperty="Opacity"
-                                To="0"
-                                Duration="0:0:0.2" />
-                        </Storyboard>
-
-                    </Grid.Resources>
-
-                    <interactivity:Interaction.Behaviors>
-
-                        <interactivity:DataTriggerBehavior
-                            Binding="{x:Bind ViewModel.IsSmallScreenMode, Mode=OneWay}"
-                            ComparisonCondition="Equal"
-                            Value="True">
-                            <interactivity:ControlStoryboardAction Storyboard="{StaticResource SongInfoStackPanelFadeOutStoryboard}" />
-                        </interactivity:DataTriggerBehavior>
-                        <interactivity:DataTriggerBehavior
-                            Binding="{x:Bind ViewModel.IsSmallScreenMode, Mode=OneWay}"
-                            ComparisonCondition="Equal"
-                            Value="False">
-                            <interactivity:ControlStoryboardAction Storyboard="{StaticResource SongInfoStackPanelFadeInStoryboard}" />
-                        </interactivity:DataTriggerBehavior>
-
-                    </interactivity:Interaction.Behaviors>
-
-                    <!--  Cover area  -->
-                    <Grid
-                        x:Name="CoverArea"
-                        Grid.Row="1"
-                        SizeChanged="CoverArea_SizeChanged">
-
-                        <Grid x:Name="CoverImageGrid" CornerRadius="24">
-                            <Image
-                                x:Name="CoverImage"
-                                Source="{x:Bind ViewModel.CoverImage, Mode=OneWay}"
-                                Stretch="Uniform">
-                                <Image.Resources>
-                                    <Storyboard x:Key="CoverIamgeFadeInStoryboard">
-                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="CoverImage" Storyboard.TargetProperty="Opacity">
-                                            <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0" />
-                                            <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1" />
-                                        </DoubleAnimationUsingKeyFrames>
-                                    </Storyboard>
-                                    <Storyboard x:Key="CoverIamgeFadeOutStoryboard">
-                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="CoverImage" Storyboard.TargetProperty="Opacity">
-                                            <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1" />
-                                            <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0" />
-                                        </DoubleAnimationUsingKeyFrames>
-                                    </Storyboard>
-                                </Image.Resources>
-                                <interactivity:Interaction.Behaviors>
-                                    <interactivity:DataTriggerBehavior
-                                        Binding="{x:Bind ViewModel.AboutToUpdateUI, Mode=OneWay}"
-                                        ComparisonCondition="Equal"
-                                        Value="True">
-                                        <interactivity:ControlStoryboardAction Storyboard="{StaticResource CoverIamgeFadeOutStoryboard}" />
-                                    </interactivity:DataTriggerBehavior>
-                                    <interactivity:DataTriggerBehavior
-                                        Binding="{x:Bind ViewModel.AboutToUpdateUI, Mode=OneWay}"
-                                        ComparisonCondition="Equal"
-                                        Value="False">
-                                        <interactivity:ControlStoryboardAction Storyboard="{StaticResource CoverIamgeFadeInStoryboard}" />
-                                    </interactivity:DataTriggerBehavior>
-                                </interactivity:Interaction.Behaviors>
-                            </Image>
-                        </Grid>
-
-                    </Grid>
-
-                    <!--  Title and artist  -->
-                    <StackPanel Grid.Row="3" Orientation="Vertical">
-                        <!--  Song title  -->
-                        <controls:OpacityMaskView x:Name="TitleOpacityMaskView" HorizontalAlignment="Center">
-                            <controls:OpacityMaskView.OpacityMask>
-                                <Rectangle Fill="{StaticResource BaseHighEdgeHorizontalFadeBrush}" />
-                            </controls:OpacityMaskView.OpacityMask>
-
-                            <controls:OpacityMaskView.Resources>
-                                <Storyboard x:Key="TitleOpacityMaskViewFadeInStoryboard">
-                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="TitleOpacityMaskView" Storyboard.TargetProperty="Opacity">
-                                        <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0" />
-                                        <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1" />
-                                    </DoubleAnimationUsingKeyFrames>
-                                </Storyboard>
-                                <Storyboard x:Key="TitleOpacityMaskViewFadeOutStoryboard">
-                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="TitleOpacityMaskView" Storyboard.TargetProperty="Opacity">
-                                        <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1" />
-                                        <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0" />
-                                    </DoubleAnimationUsingKeyFrames>
-                                </Storyboard>
-                            </controls:OpacityMaskView.Resources>
-
-                            <interactivity:Interaction.Behaviors>
-                                <interactivity:DataTriggerBehavior
-                                    Binding="{x:Bind ViewModel.AboutToUpdateUI, Mode=OneWay}"
-                                    ComparisonCondition="Equal"
-                                    Value="True">
-                                    <interactivity:ControlStoryboardAction Storyboard="{StaticResource TitleOpacityMaskViewFadeOutStoryboard}" />
-                                </interactivity:DataTriggerBehavior>
-                                <interactivity:DataTriggerBehavior
-                                    Binding="{x:Bind ViewModel.AboutToUpdateUI, Mode=OneWay}"
-                                    ComparisonCondition="Equal"
-                                    Value="False">
-                                    <interactivity:ControlStoryboardAction Storyboard="{StaticResource TitleOpacityMaskViewFadeInStoryboard}" />
-                                </interactivity:DataTriggerBehavior>
-                            </interactivity:Interaction.Behaviors>
-
-                            <labs:MarqueeText
-                                x:Name="TitleTextBlock"
-                                Behavior="Bouncing"
-                                FontSize="{StaticResource TitleTextBlockFontSize}"
-                                FontWeight="SemiBold"
-                                Foreground="{ThemeResource TextFillColorPrimaryBrush}"
-                                Text="{x:Bind ViewModel.Title, Mode=OneWay}" />
-                        </controls:OpacityMaskView>
-
-                        <!--  Song artist  -->
-                        <controls:OpacityMaskView x:Name="ArtistOpacityMaskView" HorizontalAlignment="Center">
-                            <controls:OpacityMaskView.OpacityMask>
-                                <Rectangle Fill="{StaticResource BaseHighEdgeHorizontalFadeBrush}" />
-                            </controls:OpacityMaskView.OpacityMask>
-                            <controls:OpacityMaskView.Resources>
-                                <Storyboard x:Key="ArtistOpacityMaskViewFadeInStoryboard">
-                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ArtistOpacityMaskView" Storyboard.TargetProperty="Opacity">
-                                        <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0" />
-                                        <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1" />
-                                    </DoubleAnimationUsingKeyFrames>
-                                </Storyboard>
-                                <Storyboard x:Key="ArtistOpacityMaskViewFadeOutStoryboard">
-                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ArtistOpacityMaskView" Storyboard.TargetProperty="Opacity">
-                                        <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1" />
-                                        <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0" />
-                                    </DoubleAnimationUsingKeyFrames>
-                                </Storyboard>
-                            </controls:OpacityMaskView.Resources>
-
-                            <interactivity:Interaction.Behaviors>
-                                <interactivity:DataTriggerBehavior
-                                    Binding="{x:Bind ViewModel.AboutToUpdateUI, Mode=OneWay}"
-                                    ComparisonCondition="Equal"
-                                    Value="True">
-                                    <interactivity:ControlStoryboardAction Storyboard="{StaticResource ArtistOpacityMaskViewFadeOutStoryboard}" />
-                                </interactivity:DataTriggerBehavior>
-                                <interactivity:DataTriggerBehavior
-                                    Binding="{x:Bind ViewModel.AboutToUpdateUI, Mode=OneWay}"
-                                    ComparisonCondition="Equal"
-                                    Value="False">
-                                    <interactivity:ControlStoryboardAction Storyboard="{StaticResource ArtistOpacityMaskViewFadeInStoryboard}" />
-                                </interactivity:DataTriggerBehavior>
-                            </interactivity:Interaction.Behaviors>
-
-                            <labs:MarqueeText
-                                Behavior="Bouncing"
-                                FontSize="{StaticResource SubtitleTextBlockFontSize}"
-                                FontWeight="SemiBold"
-                                Foreground="{ThemeResource TextFillColorPrimaryBrush}"
-                                Opacity="0.5"
-                                Text="{x:Bind ViewModel.Artist, Mode=OneWay}" />
-                        </controls:OpacityMaskView>
-
-                    </StackPanel>
-
-                </Grid>
-
-                <TextBlock
-                    x:Name="MainPageNoMusicPlayingTextBlock"
-                    x:Uid="MainPageNoMusicPlaying"
-                    Grid.Column="0"
-                    Grid.ColumnSpan="3"
-                    HorizontalAlignment="Center"
-                    VerticalAlignment="Center"
-                    Style="{StaticResource TitleTextBlockStyle}">
-                    <TextBlock.Resources>
-                        <Storyboard x:Key="ShowMainPageNoMusicPlayingTextBlockStoryboard">
-                            <DoubleAnimation
-                                Storyboard.TargetName="MainPageNoMusicPlayingTextBlock"
-                                Storyboard.TargetProperty="Opacity"
-                                To="1"
-                                Duration="0:0:0.2" />
-                        </Storyboard>
-                        <Storyboard x:Key="HideMainPageNoMusicPlayingTextBlockStoryboard">
-                            <DoubleAnimation
-                                Storyboard.TargetName="MainPageNoMusicPlayingTextBlock"
-                                Storyboard.TargetProperty="Opacity"
-                                To="0"
-                                Duration="0:0:0.2" />
-                        </Storyboard>
-                    </TextBlock.Resources>
-                    <interactivity:Interaction.Behaviors>
-                        <interactivity:DataTriggerBehavior
-                            Binding="{x:Bind ViewModel.IsAnyMusicSessionExisted, Mode=OneWay}"
-                            ComparisonCondition="Equal"
-                            Value="True">
-                            <interactivity:ControlStoryboardAction Storyboard="{StaticResource HideMainPageNoMusicPlayingTextBlockStoryboard}" />
-                        </interactivity:DataTriggerBehavior>
-                        <interactivity:DataTriggerBehavior
-                            Binding="{x:Bind ViewModel.IsAnyMusicSessionExisted, Mode=OneWay}"
-                            ComparisonCondition="Equal"
-                            Value="False">
-                            <interactivity:ControlStoryboardAction Storyboard="{StaticResource ShowMainPageNoMusicPlayingTextBlockStoryboard}" />
-                        </interactivity:DataTriggerBehavior>
-                    </interactivity:Interaction.Behaviors>
-                </TextBlock>
-
-            </Grid>
-
-        </Grid>
-
-        <Grid
-            x:Name="BottomCommandGrid"
-            Padding="2,0"
-            VerticalAlignment="Bottom"
-            Background="Transparent"
-            Opacity="0">
-
-            <Grid.Resources>
-
-                <Storyboard x:Name="BottomCommandGridFadeInStoryboard">
-                    <DoubleAnimation
-                        Storyboard.TargetName="BottomCommandGrid"
-                        Storyboard.TargetProperty="Opacity"
-                        To="1"
-                        Duration="0:0:0.2" />
-                </Storyboard>
-                <Storyboard x:Name="BottomCommandGridFadeOutStoryboard" BeginTime="0:0:0.2">
-                    <DoubleAnimation
-                        Storyboard.TargetName="BottomCommandGrid"
-                        Storyboard.TargetProperty="Opacity"
-                        To="0"
-                        Duration="0:0:0.2" />
-                </Storyboard>
-
-            </Grid.Resources>
-
-            <interactivity:Interaction.Behaviors>
-
-                <interactivity:EventTriggerBehavior EventName="PointerEntered">
-                    <interactivity:ControlStoryboardAction Storyboard="{StaticResource BottomCommandGridFadeInStoryboard}" />
-                </interactivity:EventTriggerBehavior>
-                <interactivity:EventTriggerBehavior EventName="PointerExited">
-                    <interactivity:ControlStoryboardAction Storyboard="{StaticResource BottomCommandGridFadeOutStoryboard}" />
-                </interactivity:EventTriggerBehavior>
-
-            </interactivity:Interaction.Behaviors>
-
-            <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
-                <AppBarButton
-                    x:Name="SettingsButton"
-                    Click="SettingsButton_Click"
-                    LabelPosition="Collapsed">
-                    <FontIcon FontFamily="Segoe Fluent Icons" Glyph="&#xE713;" />
-                </AppBarButton>
-            </StackPanel>
-
-            <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
-                <AppBarToggleButton
-                    x:Name="LyricsOnlyButton"
-                    x:Uid="MainWindowLyricsOnly"
-                    IsChecked="{x:Bind ViewModel.ShowLyricsOnly, Mode=TwoWay}"
-                    LabelPosition="Collapsed"
-                    Visibility="{x:Bind ViewModel.LyricsExisted, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}">
-
-                    <FontIcon FontFamily="Segoe Fluent Icons" Glyph="&#xF15F;" />
-                </AppBarToggleButton>
-            </StackPanel>
-
-        </Grid>
-
-        <TeachingTip
-            x:Name="WelcomeTeachingTip"
-            x:Uid="MainPageWelcomeTeachingTip"
-            Closed="WelcomeTeachingTip_Closed"
-            IsOpen="False"
-            Target="{x:Bind RootGrid}">
-            <TeachingTip.Content>
-                <TextBlock Margin="{StaticResource TeachingTipDescriptionMargin}" Text="1/5" />
-            </TeachingTip.Content>
-        </TeachingTip>
-
-        <TeachingTip
-            x:Name="TopCommandTeachingTip"
-            x:Uid="MainPageTitleBarTeachingTip"
-            Closed="TopCommandTeachingTip_Closed"
-            IsOpen="False"
-            Target="{x:Bind TopPlaceholder}">
-            <TeachingTip.Content>
-                <TextBlock Margin="{StaticResource TeachingTipDescriptionMargin}" Text="2/5" />
-            </TeachingTip.Content>
-        </TeachingTip>
-
-        <TeachingTip
-            x:Name="BottomCommandTeachingTip"
-            x:Uid="MainPageBottomCommandTeachingTip"
-            Closed="BottomCommandTeachingTip_Closed"
-            IsOpen="False"
-            Target="{x:Bind BottomCommandGrid}">
-            <TeachingTip.Content>
-                <TextBlock Margin="{StaticResource TeachingTipDescriptionMargin}" Text="3/5" />
-            </TeachingTip.Content>
-        </TeachingTip>
-
-        <TeachingTip
-            x:Name="LyricsOnlyTeachingTip"
-            x:Uid="MainPageLyricsOnlyTeachingTip"
-            Closed="LyricsOnlyTeachingTip_Closed"
-            IsOpen="False"
-            Target="{x:Bind LyricsOnlyButton}">
-            <TeachingTip.Content>
-                <TextBlock Margin="{StaticResource TeachingTipDescriptionMargin}" Text="4/5" />
-            </TeachingTip.Content>
-        </TeachingTip>
-
-        <TeachingTip
-            x:Name="InitDatabaseTeachingTip"
-            x:Uid="MainPageInitDatabaseTeachingTip"
-            Closed="InitDatabaseTeachingTip_Closed"
-            IsOpen="False"
-            Target="{x:Bind SettingsButton}">
-            <TeachingTip.Content>
-                <TextBlock Margin="{StaticResource TeachingTipDescriptionMargin}" Text="5/5" />
-            </TeachingTip.Content>
-        </TeachingTip>
-
-        <VisualStateManager.VisualStateGroups>
-            <VisualStateGroup>
-                <!--  Narrow  -->
-                <VisualState x:Name="NarrowState">
-                    <VisualState.StateTriggers>
-                        <AdaptiveTrigger MinWindowWidth="0" />
-                    </VisualState.StateTriggers>
-                    <VisualState.Setters>
-                        <Setter Target="SongInfoColumnDefinition.Width" Value="0" />
-                    </VisualState.Setters>
-                </VisualState>
-
-                <!--  Wide  -->
-                <VisualState x:Name="WideState">
-                    <VisualState.StateTriggers>
-                        <AdaptiveTrigger MinWindowWidth="720" />
-                    </VisualState.StateTriggers>
-                    <VisualState.Setters>
-                        <Setter Target="SongInfoColumnDefinition.Width" Value="*" />
-                    </VisualState.Setters>
-                </VisualState>
-            </VisualStateGroup>
-        </VisualStateManager.VisualStateGroups>
-    </Grid>
-</Page>

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Views/SettingsPage.xaml

@@ -10,416 +10,471 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:ui="using:CommunityToolkit.WinUI"
     xmlns:vm="using:BetterLyrics.WinUI3.ViewModels"
-    NavigationCacheMode="Required"
     mc:Ignorable="d">
 
-    <Grid x:Name="RootGrid">
+    <Grid x:Name="RootGrid" Margin="{x:Bind ViewModel.RootGridMargin, Mode=OneWay}">
 
-        <controls:OpacityMaskView HorizontalContentAlignment="Stretch">
-            <controls:OpacityMaskView.OpacityMask>
-                <Rectangle Fill="{StaticResource BaseHighEdgeVerticalFadeBrush}" />
-            </controls:OpacityMaskView.OpacityMask>
-            <ScrollViewer>
-                <Grid Margin="36,72,36,72">
-                    <StackPanel Spacing="{StaticResource SettingsCardSpacing}">
+        <NavigationView
+            x:Name="NavView"
+            IsBackButtonVisible="Collapsed"
+            IsPaneToggleButtonVisible="False"
+            IsSettingsVisible="False"
+            PaneDisplayMode="Auto"
+            SelectionChanged="NavView_SelectionChanged">
+            <NavigationView.MenuItems>
+                <NavigationViewItem
+                    x:Uid="SettingsPageLyricsLib"
+                    Icon="{ui:FontIcon Glyph=&#xE838;}"
+                    IsSelected="True"
+                    Tag="LyricsLib" />
+                <NavigationViewItem
+                    x:Uid="SettingsPageAppAppearance"
+                    Icon="{ui:FontIcon Glyph=&#xE771;}"
+                    Tag="AppAppearance" />
+                <NavigationViewItem
+                    x:Uid="SettingsPageAppBehavior"
+                    Icon="{ui:FontIcon Glyph=&#xE805;}"
+                    Tag="AppBehavior" />
+                <NavigationViewItem
+                    x:Uid="SettingsPageAlbumOverlay"
+                    Icon="{ui:FontIcon Glyph=&#xE81E;}"
+                    Tag="AlbumArtOverlay" />
+                <NavigationViewItem
+                    x:Uid="SettingsPageAlbumStyle"
+                    Icon="{ui:FontIcon Glyph=&#xE80A;}"
+                    Tag="AlbumArtStyle" />
+                <NavigationViewItem
+                    x:Uid="SettingsPageLyricsStyle"
+                    Icon="{ui:FontIcon Glyph=&#xEF60;}"
+                    Tag="LyricsStyle" />
+                <NavigationViewItem
+                    x:Uid="SettingsPageLyricsEffect"
+                    Icon="{ui:FontIcon Glyph=&#xF4A5;}"
+                    Tag="LyricsEffect" />
+                <NavigationViewItem
+                    x:Uid="SettingsPageAbout"
+                    Icon="{ui:FontIcon Glyph=&#xE946;}"
+                    Tag="About" />
+                <NavigationViewItem
+                    x:Uid="SettingsPageDev"
+                    Icon="{ui:FontIcon Glyph=&#xEC7A;}"
+                    Tag="Dev" />
+            </NavigationView.MenuItems>
+            <ScrollViewer Padding="36,0">
+                <Grid Margin="0,36">
+                    <controls:SwitchPresenter Value="{x:Bind ViewModel.NavViewSelectedItemTag, Mode=OneWay}">
+                        <controls:SwitchPresenter.ContentTransitions>
+                            <TransitionCollection>
+                                <PopupThemeTransition />
+                            </TransitionCollection>
+                        </controls:SwitchPresenter.ContentTransitions>
+                        <controls:Case Value="LyricsLib">
+                            <StackPanel Spacing="{StaticResource SettingsCardSpacing}">
+                                <controls:SettingsExpander
+                                    x:Uid="SettingsPageMusicLib"
+                                    HeaderIcon="{ui:FontIcon Glyph=&#xE8B7;}"
+                                    IsEnabled="{x:Bind ViewModel.IsRebuildingLyricsIndexDatabase, Converter={StaticResource BoolNegationConverter}, Mode=OneWay}"
+                                    IsExpanded="True"
+                                    ItemsSource="{x:Bind ViewModel.MusicLibraries, Mode=OneWay}">
+                                    <controls:SettingsExpander.ItemTemplate>
+                                        <DataTemplate>
+                                            <controls:SettingsCard Header="{Binding}">
+                                                <StackPanel Orientation="Horizontal">
+                                                    <HyperlinkButton
+                                                        x:Uid="SettingsPageOpenPath"
+                                                        Click="SettingsPageOpenPathButton_Click"
+                                                        Tag="{Binding}" />
+                                                    <HyperlinkButton
+                                                        x:Uid="SettingsPageRemovePath"
+                                                        Click="SettingsPageRemovePathButton_Click"
+                                                        Tag="{Binding}" />
+                                                </StackPanel>
+                                            </controls:SettingsCard>
+                                        </DataTemplate>
+                                    </controls:SettingsExpander.ItemTemplate>
+                                    <controls:SettingsExpander.ItemsHeader>
+                                        <InfoBar
+                                            x:Uid="SettingsPageRemoveInfo"
+                                            BorderThickness="0"
+                                            CornerRadius="0"
+                                            IsClosable="False"
+                                            IsOpen="True"
+                                            Severity="Success">
 
-                        <TextBlock x:Uid="SettingsPageLyricsLib" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
+                                            <interactivity:Interaction.Behaviors>
 
-                        <controls:SettingsExpander
-                            x:Uid="SettingsPageMusicLib"
-                            HeaderIcon="{ui:FontIcon Glyph=&#xE8B7;}"
-                            IsEnabled="{x:Bind ViewModel.SettingsService.IsRebuildingLyricsIndexDatabase, Converter={StaticResource BoolNegationConverter}, Mode=OneWay}"
-                            IsExpanded="True"
-                            ItemsSource="{x:Bind ViewModel.SettingsService.MusicLibraries, Mode=OneWay}">
-                            <controls:SettingsExpander.ItemTemplate>
-                                <DataTemplate>
-                                    <controls:SettingsCard Header="{Binding}">
-                                        <StackPanel Orientation="Horizontal">
-                                            <HyperlinkButton
-                                                x:Uid="SettingsPageOpenPath"
-                                                Click="SettingsPageOpenPathButton_Click"
-                                                Tag="{Binding}" />
-                                            <HyperlinkButton
-                                                x:Uid="SettingsPageRemovePath"
-                                                Click="SettingsPageRemovePathButton_Click"
-                                                Tag="{Binding}" />
-                                        </StackPanel>
-                                    </controls:SettingsCard>
-                                </DataTemplate>
-                            </controls:SettingsExpander.ItemTemplate>
-                            <controls:SettingsExpander.ItemsHeader>
-                                <InfoBar
-                                    x:Uid="SettingsPageRemoveInfo"
-                                    BorderThickness="0"
-                                    CornerRadius="0"
-                                    IsClosable="False"
-                                    IsOpen="True"
-                                    Severity="Success">
+                                                <interactivity:DataTriggerBehavior
+                                                    Binding="{x:Bind ViewModel.MusicLibraries.Count, Mode=OneWay}"
+                                                    ComparisonCondition="Equal"
+                                                    Value="0">
+                                                    <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Collapsed" />
+                                                </interactivity:DataTriggerBehavior>
+                                                <interactivity:DataTriggerBehavior
+                                                    Binding="{x:Bind ViewModel.MusicLibraries.Count, Mode=OneWay}"
+                                                    ComparisonCondition="NotEqual"
+                                                    Value="0">
+                                                    <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Visible" />
+                                                </interactivity:DataTriggerBehavior>
 
-                                    <interactivity:Interaction.Behaviors>
+                                            </interactivity:Interaction.Behaviors>
 
-                                        <interactivity:DataTriggerBehavior
-                                            Binding="{x:Bind ViewModel.SettingsService.MusicLibraries.Count, Mode=OneWay}"
-                                            ComparisonCondition="Equal"
-                                            Value="0">
-                                            <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Collapsed" />
-                                        </interactivity:DataTriggerBehavior>
-                                        <interactivity:DataTriggerBehavior
-                                            Binding="{x:Bind ViewModel.SettingsService.MusicLibraries.Count, Mode=OneWay}"
-                                            ComparisonCondition="NotEqual"
-                                            Value="0">
-                                            <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Visible" />
-                                        </interactivity:DataTriggerBehavior>
+                                        </InfoBar>
+                                    </controls:SettingsExpander.ItemsHeader>
+                                    <controls:SettingsExpander.ItemsFooter>
+                                        <controls:SettingsCard x:Uid="SettingsPageAddFolder" Style="{StaticResource DefaultSettingsExpanderItemStyle}">
+                                            <Button
+                                                x:Uid="SettingsPageAddFolderButton"
+                                                Command="{x:Bind ViewModel.SelectAndAddFolderCommand}"
+                                                CommandParameter="{Binding ElementName=RootGrid}" />
+                                        </controls:SettingsCard>
+                                    </controls:SettingsExpander.ItemsFooter>
+                                </controls:SettingsExpander>
 
-                                    </interactivity:Interaction.Behaviors>
-
-                                </InfoBar>
-                            </controls:SettingsExpander.ItemsHeader>
-                            <controls:SettingsExpander.ItemsFooter>
-                                <controls:SettingsCard x:Uid="SettingsPageAddFolder" Style="{StaticResource DefaultSettingsExpanderItemStyle}">
-                                    <Button x:Uid="SettingsPageAddFolderButton" Command="{x:Bind ViewModel.SelectAndAddFolderCommand}" />
+                                <controls:SettingsCard
+                                    x:Uid="SettingsPageRebuildDatabase"
+                                    HeaderIcon="{ui:FontIcon Glyph=&#xE621;}"
+                                    IsEnabled="{x:Bind ViewModel.IsRebuildingLyricsIndexDatabase, Converter={StaticResource BoolNegationConverter}, Mode=OneWay}">
+                                    <controls:SettingsCard.Description>
+                                        <TextBlock x:Uid="SettingsPageRebuildDatabaseDesc" Visibility="{x:Bind ViewModel.IsRebuildingLyricsIndexDatabase, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}" />
+                                    </controls:SettingsCard.Description>
+                                    <StackPanel>
+                                        <Button x:Uid="SettingsPageRebuildDatabaseButton" Command="{x:Bind ViewModel.RebuildLyricsIndexDatabaseCommand}" />
+                                        <ProgressBar
+                                            IsIndeterminate="True"
+                                            ShowError="False"
+                                            ShowPaused="False"
+                                            Visibility="{x:Bind ViewModel.IsRebuildingLyricsIndexDatabase, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}" />
+                                    </StackPanel>
                                 </controls:SettingsCard>
-                            </controls:SettingsExpander.ItemsFooter>
-                        </controls:SettingsExpander>
 
-                        <controls:SettingsCard
-                            x:Uid="SettingsPageRebuildDatabase"
-                            HeaderIcon="{ui:FontIcon Glyph=&#xE621;}"
-                            IsEnabled="{x:Bind ViewModel.SettingsService.IsRebuildingLyricsIndexDatabase, Converter={StaticResource BoolNegationConverter}, Mode=OneWay}">
-                            <controls:SettingsCard.Description>
-                                <TextBlock x:Uid="SettingsPageRebuildDatabaseDesc" Visibility="{x:Bind ViewModel.SettingsService.IsRebuildingLyricsIndexDatabase, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}" />
-                            </controls:SettingsCard.Description>
-                            <StackPanel>
-                                <Button x:Uid="SettingsPageRebuildDatabaseButton" Command="{x:Bind ViewModel.RebuildLyricsIndexDatabaseCommand}" />
-                                <ProgressBar
-                                    IsIndeterminate="True"
-                                    ShowError="False"
-                                    ShowPaused="False"
-                                    Visibility="{x:Bind ViewModel.SettingsService.IsRebuildingLyricsIndexDatabase, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}" />
                             </StackPanel>
-                        </controls:SettingsCard>
+                        </controls:Case>
 
-                        <TextBlock x:Uid="SettingsPageAppAppearance" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
-
-                        <controls:SettingsCard x:Uid="SettingsPageTheme" HeaderIcon="{ui:FontIcon Glyph=&#xE790;}">
-                            <ComboBox x:Name="ThemeComboBox" SelectedIndex="{x:Bind ViewModel.SettingsService.Theme, Mode=TwoWay}">
-                                <ComboBoxItem x:Uid="SettingsPageFollowSystem" />
-                                <ComboBoxItem x:Uid="SettingsPageLight" />
-                                <ComboBoxItem x:Uid="SettingsPageDark" />
-                            </ComboBox>
-                        </controls:SettingsCard>
-
-                        <controls:SettingsCard x:Uid="SettingsPageBackdrop" HeaderIcon="{ui:FontIcon Glyph=&#xF5EF;}">
-                            <ComboBox x:Name="BackdropComboBox" SelectedIndex="{x:Bind ViewModel.SettingsService.BackdropType, Mode=TwoWay}">
-                                <ComboBoxItem x:Uid="SettingsPageNoBackdrop" />
-                                <ComboBoxItem x:Uid="SettingsPageMica" />
-                                <ComboBoxItem x:Uid="SettingsPageMicaAlt" />
-                                <ComboBoxItem x:Uid="SettingsPageDesktopAcrylic" />
-                                <ComboBoxItem x:Uid="SettingsPageAcrylicThin" />
-                                <ComboBoxItem x:Uid="SettingsPageAcrylicBase" />
-                                <ComboBoxItem x:Uid="SettingsPageTransparent" />
-                            </ComboBox>
-                        </controls:SettingsCard>
-
-                        <controls:SettingsExpander
-                            x:Uid="SettingsPageLanguage"
-                            HeaderIcon="{ui:FontIcon Glyph=&#xF2B7;}"
-                            IsExpanded="True">
-                            <ComboBox SelectedIndex="{x:Bind ViewModel.SettingsService.Language, Mode=TwoWay}">
-                                <ComboBoxItem x:Uid="SettingsPageSystemLanguage" />
-                                <ComboBoxItem x:Uid="SettingsPageEN" />
-                                <ComboBoxItem x:Uid="SettingsPageSC" />
-                                <ComboBoxItem x:Uid="SettingsPageTC" />
-                            </ComboBox>
-                            <controls:SettingsExpander.Items>
-                                <controls:SettingsCard>
-                                    <Button x:Uid="SettingsPageRestart" Command="{x:Bind ViewModel.RestartAppCommand}" />
-                                </controls:SettingsCard>
-                            </controls:SettingsExpander.Items>
-                        </controls:SettingsExpander>
-
-                        <TextBlock x:Uid="SettingsPageAlbumOverlay" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
-
-                        <controls:SettingsExpander
-                            x:Uid="SettingsPageCoverOverlay"
-                            HeaderIcon="{ui:FontIcon Glyph=&#xE93C;}"
-                            IsExpanded="True">
-                            <controls:SettingsExpander.Description>
-                                <StackPanel>
-                                    <TextBlock x:Uid="SettingsPageCoverOverlayGPUUsage" />
-                                </StackPanel>
-                            </controls:SettingsExpander.Description>
-                            <ToggleSwitch IsOn="{x:Bind ViewModel.SettingsService.IsCoverOverlayEnabled, Mode=TwoWay}" />
-                            <controls:SettingsExpander.Items>
-
-                                <controls:SettingsCard x:Uid="SettingsPageDynamicCoverOverlay" IsEnabled="{x:Bind ViewModel.SettingsService.IsCoverOverlayEnabled, Mode=OneWay}">
-                                    <ToggleSwitch IsOn="{x:Bind ViewModel.SettingsService.IsDynamicCoverOverlay, Mode=TwoWay}" />
+                        <controls:Case Value="AppAppearance">
+                            <StackPanel Spacing="{StaticResource SettingsCardSpacing}">
+                                <controls:SettingsCard x:Uid="SettingsPageTheme" HeaderIcon="{ui:FontIcon Glyph=&#xE790;}">
+                                    <ComboBox x:Name="ThemeComboBox" SelectedIndex="{x:Bind ViewModel.ThemeType, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
+                                        <ComboBoxItem x:Uid="SettingsPageFollowSystem" />
+                                        <ComboBoxItem x:Uid="SettingsPageLight" />
+                                        <ComboBoxItem x:Uid="SettingsPageDark" />
+                                    </ComboBox>
                                 </controls:SettingsCard>
 
-                                <controls:SettingsCard x:Uid="SettingsPageCoverOverlayOpacity" IsEnabled="{x:Bind ViewModel.SettingsService.IsCoverOverlayEnabled, Mode=OneWay}">
+                                <controls:SettingsCard x:Uid="SettingsPageBackdrop" HeaderIcon="{ui:FontIcon Glyph=&#xF5EF;}">
+                                    <ComboBox x:Name="BackdropComboBox" SelectedIndex="{x:Bind ViewModel.BackdropType, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
+                                        <ComboBoxItem x:Uid="SettingsPageNoBackdrop" />
+                                        <ComboBoxItem x:Uid="SettingsPageMica" />
+                                        <ComboBoxItem x:Uid="SettingsPageMicaAlt" />
+                                        <ComboBoxItem x:Uid="SettingsPageDesktopAcrylic" />
+                                        <!--<ComboBoxItem x:Uid="SettingsPageAcrylicThin" />
+                                <ComboBoxItem x:Uid="SettingsPageAcrylicBase" />-->
+                                        <ComboBoxItem x:Uid="SettingsPageTransparent" />
+                                    </ComboBox>
+                                </controls:SettingsCard>
+
+                                <controls:SettingsCard x:Uid="SettingsPageTitleBarType" HeaderIcon="{ui:FontIcon Glyph=&#xE66A;}">
+                                    <ComboBox x:Name="TitleBarTypeComboBox" SelectedIndex="{x:Bind ViewModel.TitleBarType, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
+                                        <ComboBoxItem x:Uid="SettingsPageCompactTitleBar" />
+                                        <ComboBoxItem x:Uid="SettingsPageExtendedTitleBar" />
+                                    </ComboBox>
+                                </controls:SettingsCard>
+
+                                <controls:SettingsExpander
+                                    x:Uid="SettingsPageLanguage"
+                                    HeaderIcon="{ui:FontIcon Glyph=&#xF2B7;}"
+                                    IsExpanded="True">
+                                    <ComboBox SelectedIndex="{x:Bind ViewModel.Language, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
+                                        <ComboBoxItem x:Uid="SettingsPageSystemLanguage" />
+                                        <ComboBoxItem x:Uid="SettingsPageEN" />
+                                        <ComboBoxItem x:Uid="SettingsPageSC" />
+                                        <ComboBoxItem x:Uid="SettingsPageTC" />
+                                    </ComboBox>
+                                    <controls:SettingsExpander.Items>
+                                        <controls:SettingsCard>
+                                            <Button x:Uid="SettingsPageRestart" Command="{x:Bind ViewModel.RestartAppCommand}" />
+                                        </controls:SettingsCard>
+                                    </controls:SettingsExpander.Items>
+                                </controls:SettingsExpander>
+
+                            </StackPanel>
+                        </controls:Case>
+
+                        <controls:Case Value="AppBehavior">
+                            <StackPanel Spacing="{StaticResource SettingsCardSpacing}">
+                                <controls:SettingsCard x:Uid="SettingsPageAutoStartWindow">
+                                    <ComboBox SelectedIndex="{x:Bind ViewModel.AutoStartWindowType, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
+                                        <ComboBoxItem x:Uid="SettingsPageAutoStartInAppLyrics" />
+                                        <ComboBoxItem x:Uid="SettingsPageAutoStartDesktopLyrics" />
+                                    </ComboBox>
+                                </controls:SettingsCard>
+                            </StackPanel>
+                        </controls:Case>
+
+                        <controls:Case Value="AlbumArtOverlay">
+                            <StackPanel Spacing="{StaticResource SettingsCardSpacing}">
+                                <controls:SettingsExpander
+                                    x:Uid="SettingsPageCoverOverlay"
+                                    HeaderIcon="{ui:FontIcon Glyph=&#xE93C;}"
+                                    IsExpanded="True">
+                                    <controls:SettingsExpander.Description>
+                                        <StackPanel>
+                                            <TextBlock x:Uid="SettingsPageCoverOverlayGPUUsage" />
+                                        </StackPanel>
+                                    </controls:SettingsExpander.Description>
+                                    <ToggleSwitch IsOn="{x:Bind ViewModel.IsCoverOverlayEnabled, Mode=TwoWay}" />
+                                    <controls:SettingsExpander.Items>
+
+                                        <controls:SettingsCard x:Uid="SettingsPageDynamicCoverOverlay" IsEnabled="{x:Bind ViewModel.IsCoverOverlayEnabled, Mode=OneWay}">
+                                            <ToggleSwitch IsOn="{x:Bind ViewModel.IsDynamicCoverOverlayEnabled, Mode=TwoWay}" />
+                                        </controls:SettingsCard>
+
+                                        <controls:SettingsCard x:Uid="SettingsPageCoverOverlayOpacity" IsEnabled="{x:Bind ViewModel.IsCoverOverlayEnabled, Mode=OneWay}">
+                                            <StackPanel Orientation="Horizontal">
+                                                <TextBlock x:Uid="SettingsPageSliderPrefix" VerticalAlignment="Center" />
+                                                <TextBlock VerticalAlignment="Center" Text="{x:Bind ViewModel.CoverOverlayOpacity, Mode=OneWay}" />
+                                                <TextBlock
+                                                    Margin="0,0,14,0"
+                                                    VerticalAlignment="Center"
+                                                    Text=" %" />
+                                                <Slider
+                                                    Maximum="100"
+                                                    Minimum="1"
+                                                    SnapsTo="Ticks"
+                                                    StepFrequency="1"
+                                                    TickFrequency="1"
+                                                    TickPlacement="Outside"
+                                                    Value="{x:Bind ViewModel.CoverOverlayOpacity, Mode=TwoWay}" />
+                                            </StackPanel>
+                                        </controls:SettingsCard>
+
+                                        <controls:SettingsCard x:Uid="SettingsPageCoverOverlayBlurAmount" IsEnabled="{x:Bind ViewModel.IsCoverOverlayEnabled, Mode=OneWay}">
+                                            <StackPanel Orientation="Horizontal">
+                                                <TextBlock x:Uid="SettingsPageSliderPrefix" VerticalAlignment="Center" />
+                                                <TextBlock
+                                                    Margin="0,0,14,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{x:Bind ViewModel.CoverOverlayBlurAmount, Mode=OneWay}" />
+                                                <Slider
+                                                    Maximum="200"
+                                                    Minimum="50"
+                                                    SnapsTo="Ticks"
+                                                    StepFrequency="10"
+                                                    TickFrequency="10"
+                                                    TickPlacement="Outside"
+                                                    Value="{x:Bind ViewModel.CoverOverlayBlurAmount, Mode=TwoWay}" />
+                                            </StackPanel>
+                                        </controls:SettingsCard>
+
+                                    </controls:SettingsExpander.Items>
+                                </controls:SettingsExpander>
+
+                            </StackPanel>
+                        </controls:Case>
+
+                        <controls:Case Value="AlbumArtStyle">
+                            <StackPanel Spacing="{StaticResource SettingsCardSpacing}">
+                                <controls:SettingsCard x:Uid="SettingsPageAlbumRadius" HeaderIcon="{ui:FontIcon Glyph=&#xE71A;}">
                                     <StackPanel Orientation="Horizontal">
                                         <TextBlock x:Uid="SettingsPageSliderPrefix" VerticalAlignment="Center" />
-                                        <TextBlock VerticalAlignment="Center" Text="{x:Bind ViewModel.SettingsService.CoverOverlayOpacity, Mode=OneWay}" />
+                                        <TextBlock VerticalAlignment="Center" Text="{x:Bind ViewModel.CoverImageRadius, Mode=OneWay}" />
                                         <TextBlock
                                             Margin="0,0,14,0"
                                             VerticalAlignment="Center"
                                             Text=" %" />
                                         <Slider
                                             Maximum="100"
-                                            Minimum="1"
+                                            Minimum="0"
                                             SnapsTo="Ticks"
-                                            StepFrequency="1"
-                                            TickFrequency="1"
+                                            StepFrequency="2"
+                                            TickFrequency="2"
                                             TickPlacement="Outside"
-                                            Value="{x:Bind ViewModel.SettingsService.CoverOverlayOpacity, Mode=TwoWay}" />
+                                            Value="{x:Bind ViewModel.CoverImageRadius, Mode=TwoWay}" />
                                     </StackPanel>
                                 </controls:SettingsCard>
 
-                                <controls:SettingsCard x:Uid="SettingsPageCoverOverlayBlurAmount" IsEnabled="{x:Bind ViewModel.SettingsService.IsCoverOverlayEnabled, Mode=OneWay}">
+                            </StackPanel>
+                        </controls:Case>
+
+                        <controls:Case Value="LyricsStyle">
+                            <StackPanel Spacing="{StaticResource SettingsCardSpacing}">
+
+                                <controls:SettingsCard x:Uid="SettingsPageLyricsAlignment" HeaderIcon="{ui:FontIcon Glyph=&#xE8E3;}">
+                                    <ComboBox SelectedIndex="{x:Bind LyricsSettingsControlViewModel.LyricsAlignmentType, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
+                                        <ComboBoxItem x:Uid="SettingsPageLyricsLeft" />
+                                        <ComboBoxItem x:Uid="SettingsPageLyricsCenter" />
+                                        <ComboBoxItem x:Uid="SettingsPageLyricsRight" />
+                                    </ComboBox>
+                                </controls:SettingsCard>
+
+                                <controls:SettingsCard x:Uid="SettingsPageLyricsFontWeight" HeaderIcon="{ui:FontIcon Glyph=&#xE8DD;}">
+                                    <ComboBox SelectedIndex="{x:Bind LyricsSettingsControlViewModel.LyricsFontWeight, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
+                                        <ComboBoxItem x:Uid="SettingsPageLyricsThin" />
+                                        <ComboBoxItem x:Uid="SettingsPageLyricsExtraLight" />
+                                        <ComboBoxItem x:Uid="SettingsPageLyricsLight" />
+                                        <ComboBoxItem x:Uid="SettingsPageLyricsSemiLight" />
+                                        <ComboBoxItem x:Uid="SettingsPageLyricsNormal" />
+                                        <ComboBoxItem x:Uid="SettingsPageLyricsMedium" />
+                                        <ComboBoxItem x:Uid="SettingsPageLyricsSemiBold" />
+                                        <ComboBoxItem x:Uid="SettingsPageLyricsBold" />
+                                        <ComboBoxItem x:Uid="SettingsPageLyricsExtraBold" />
+                                        <ComboBoxItem x:Uid="SettingsPageLyricsBlack" />
+                                        <ComboBoxItem x:Uid="SettingsPageLyricsExtraBlack" />
+                                    </ComboBox>
+                                </controls:SettingsCard>
+
+                                <controls:SettingsCard x:Uid="SettingsPageLyricsFontColor" HeaderIcon="{ui:FontIcon Glyph=&#xE8D3;}">
+                                    <ComboBox SelectedIndex="{x:Bind LyricsSettingsControlViewModel.LyricsFontColorType, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
+                                        <ComboBoxItem x:Uid="SettingsPageLyricsFontColorDefault" />
+                                        <ComboBoxItem x:Uid="SettingsPageLyricsFontColorDominant" />
+                                    </ComboBox>
+                                </controls:SettingsCard>
+
+                                <controls:SettingsCard x:Uid="SettingsPageLyricsFontSize" HeaderIcon="{ui:FontIcon Glyph=&#xE8E9;}">
                                     <StackPanel Orientation="Horizontal">
                                         <TextBlock x:Uid="SettingsPageSliderPrefix" VerticalAlignment="Center" />
                                         <TextBlock
                                             Margin="0,0,14,0"
                                             VerticalAlignment="Center"
-                                            Text="{x:Bind ViewModel.SettingsService.CoverOverlayBlurAmount, Mode=OneWay}" />
+                                            Text="{Binding ElementName=LyricsFontSizeSlider, Path=Value, Mode=OneWay}" />
                                         <Slider
-                                            Maximum="200"
-                                            Minimum="50"
+                                            x:Name="LyricsFontSizeSlider"
+                                            Maximum="96"
+                                            Minimum="12"
                                             SnapsTo="Ticks"
-                                            StepFrequency="10"
-                                            TickFrequency="10"
+                                            StepFrequency="2"
+                                            TickFrequency="2"
                                             TickPlacement="Outside"
-                                            Value="{x:Bind ViewModel.SettingsService.CoverOverlayBlurAmount, Mode=TwoWay}" />
+                                            Value="{x:Bind LyricsSettingsControlViewModel.LyricsFontSize, Mode=TwoWay}" />
                                     </StackPanel>
                                 </controls:SettingsCard>
 
-                            </controls:SettingsExpander.Items>
-                        </controls:SettingsExpander>
-
-                        <TextBlock x:Uid="SettingsPageAlbumStyle" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
-
-                        <controls:SettingsCard x:Uid="SettingsPageAlbumRadius" HeaderIcon="{ui:FontIcon Glyph=&#xE71A;}">
-                            <StackPanel Orientation="Horizontal">
-                                <TextBlock x:Uid="SettingsPageSliderPrefix" VerticalAlignment="Center" />
-                                <TextBlock VerticalAlignment="Center" Text="{x:Bind ViewModel.SettingsService.CoverImageRadius, Mode=OneWay}" />
-                                <TextBlock
-                                    Margin="0,0,14,0"
-                                    VerticalAlignment="Center"
-                                    Text=" %" />
-                                <Slider
-                                    Maximum="100"
-                                    Minimum="0"
-                                    SnapsTo="Ticks"
-                                    StepFrequency="2"
-                                    TickFrequency="2"
-                                    TickPlacement="Outside"
-                                    Value="{x:Bind ViewModel.SettingsService.CoverImageRadius, Mode=TwoWay}" />
-                            </StackPanel>
-                        </controls:SettingsCard>
-
-                        <TextBlock x:Uid="SettingsPageLyricsStyle" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
-
-                        <controls:SettingsCard x:Uid="SettingsPageLyricsAlignment" HeaderIcon="{ui:FontIcon Glyph=&#xE8E3;}">
-                            <ComboBox SelectedIndex="{x:Bind ViewModel.SettingsService.LyricsAlignmentType, Mode=TwoWay}">
-                                <ComboBoxItem x:Uid="SettingsPageLyricsLeft" />
-                                <ComboBoxItem x:Uid="SettingsPageLyricsCenter" />
-                                <ComboBoxItem x:Uid="SettingsPageLyricsRight" />
-                            </ComboBox>
-                        </controls:SettingsCard>
-
-                        <controls:SettingsExpander x:Uid="SettingsPageLyricsFontColor" HeaderIcon="{ui:FontIcon Glyph=&#xE8D3;}">
-                            <interactivity:Interaction.Behaviors>
-                                <interactivity:DataTriggerBehavior
-                                    Binding="{x:Bind ViewModel.SettingsService.LyricsFontColorType, Mode=OneWay}"
-                                    ComparisonCondition="Equal"
-                                    Value="0">
-                                    <interactivity:ChangePropertyAction PropertyName="IsExpanded" Value="False" />
-                                </interactivity:DataTriggerBehavior>
-                                <interactivity:DataTriggerBehavior
-                                    Binding="{x:Bind ViewModel.SettingsService.LyricsFontColorType, Mode=OneWay}"
-                                    ComparisonCondition="Equal"
-                                    Value="1">
-                                    <interactivity:ChangePropertyAction PropertyName="IsExpanded" Value="True" />
-                                </interactivity:DataTriggerBehavior>
-                            </interactivity:Interaction.Behaviors>
-                            <ComboBox SelectedIndex="{x:Bind ViewModel.SettingsService.LyricsFontColorType, Mode=TwoWay}">
-                                <ComboBoxItem x:Uid="SettingsPageLyricsFontColorDefault" />
-                                <ComboBoxItem x:Uid="SettingsPageLyricsFontColorDominant" />
-                            </ComboBox>
-                            <controls:SettingsExpander.Items>
-                                <controls:SettingsCard HorizontalContentAlignment="Left" ContentAlignment="Vertical">
-                                    <interactivity:Interaction.Behaviors>
-                                        <interactivity:DataTriggerBehavior
-                                            Binding="{x:Bind ViewModel.SettingsService.LyricsFontColorType, Mode=OneWay}"
-                                            ComparisonCondition="Equal"
-                                            Value="0">
-                                            <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Collapsed" />
-                                        </interactivity:DataTriggerBehavior>
-                                        <interactivity:DataTriggerBehavior
-                                            Binding="{x:Bind ViewModel.SettingsService.LyricsFontColorType, Mode=OneWay}"
-                                            ComparisonCondition="Equal"
-                                            Value="1">
-                                            <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Visible" />
-                                        </interactivity:DataTriggerBehavior>
-                                    </interactivity:Interaction.Behaviors>
-                                    <GridView ItemsSource="{x:Bind ViewModel.MainViewModel.CoverImageDominantColors, Mode=OneWay}" SelectedIndex="{x:Bind ViewModel.SettingsService.LyricsFontSelectedAccentColorIndex, Mode=TwoWay}">
-                                        <GridView.ItemTemplate>
-                                            <DataTemplate>
-                                                <GridViewItem>
-                                                    <StackPanel>
-                                                        <Border
-                                                            Width="64"
-                                                            Height="64"
-                                                            CornerRadius="4">
-                                                            <Border.Background>
-                                                                <SolidColorBrush Color="{Binding}" />
-                                                            </Border.Background>
-                                                        </Border>
-                                                        <TextBlock
-                                                            Margin="4,0,4,4"
-                                                            HorizontalAlignment="Center"
-                                                            VerticalAlignment="Center"
-                                                            Text="{Binding Converter={StaticResource ColorToDisplayNameConverter}}"
-                                                            TextWrapping="WrapWholeWords" />
-                                                    </StackPanel>
-                                                </GridViewItem>
-                                            </DataTemplate>
-                                        </GridView.ItemTemplate>
-                                    </GridView>
-                                </controls:SettingsCard>
-                            </controls:SettingsExpander.Items>
-                        </controls:SettingsExpander>
-
-                        <controls:SettingsCard x:Uid="SettingsPageLyricsFontSize" HeaderIcon="{ui:FontIcon Glyph=&#xE8E9;}">
-                            <StackPanel Orientation="Horizontal">
-                                <TextBlock x:Uid="SettingsPageSliderPrefix" VerticalAlignment="Center" />
-                                <TextBlock
-                                    Margin="0,0,14,0"
-                                    VerticalAlignment="Center"
-                                    Text="{x:Bind ViewModel.SettingsService.LyricsFontSize, Mode=OneWay}" />
-                                <Slider
-                                    Maximum="48"
-                                    Minimum="12"
-                                    SnapsTo="Ticks"
-                                    StepFrequency="2"
-                                    TickFrequency="2"
-                                    TickPlacement="Outside"
-                                    Value="{x:Bind ViewModel.SettingsService.LyricsFontSize, Mode=TwoWay}" />
-                            </StackPanel>
-                        </controls:SettingsCard>
-
-                        <controls:SettingsCard x:Uid="SettingsPageLyricsLineSpacingFactor" HeaderIcon="{ui:FontIcon Glyph=&#xF579;}">
-                            <StackPanel Orientation="Horizontal">
-                                <TextBlock x:Uid="SettingsPageSliderPrefix" VerticalAlignment="Center" />
-                                <TextBlock VerticalAlignment="Center" Text="{x:Bind ViewModel.SettingsService.LyricsLineSpacingFactor, Mode=OneWay}" />
-                                <TextBlock
-                                    x:Uid="SettingsPageLyricsLineSpacingFactorUnit"
-                                    Margin="0,0,14,0"
-                                    VerticalAlignment="Center" />
-                                <Slider
-                                    Maximum="2"
-                                    Minimum="0"
-                                    SnapsTo="Ticks"
-                                    StepFrequency="0.1"
-                                    TickFrequency="0.1"
-                                    TickPlacement="Outside"
-                                    Value="{x:Bind ViewModel.SettingsService.LyricsLineSpacingFactor, Mode=TwoWay}" />
-                            </StackPanel>
-                        </controls:SettingsCard>
-
-                        <TextBlock x:Uid="SettingsPageLyricsEffect" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
-
-                        <controls:SettingsCard x:Uid="SettingsPageLyricsVerticalEdgeOpacity" HeaderIcon="{ui:FontIcon Glyph=&#xF573;}">
-                            <StackPanel Orientation="Horizontal">
-                                <TextBlock x:Uid="SettingsPageSliderPrefix" VerticalAlignment="Center" />
-                                <TextBlock VerticalAlignment="Center" Text="{x:Bind ViewModel.SettingsService.LyricsVerticalEdgeOpacity, Mode=OneWay}" />
-                                <TextBlock
-                                    Margin="0,0,14,0"
-                                    VerticalAlignment="Center"
-                                    Text=" %" />
-                                <Slider
-                                    Maximum="100"
-                                    Minimum="0"
-                                    SnapsTo="Ticks"
-                                    StepFrequency="1"
-                                    TickFrequency="1"
-                                    TickPlacement="Outside"
-                                    Value="{x:Bind ViewModel.SettingsService.LyricsVerticalEdgeOpacity, Mode=TwoWay}" />
-                            </StackPanel>
-                        </controls:SettingsCard>
-
-                        <controls:SettingsCard x:Uid="SettingsPageLyricsBlurAmount" HeaderIcon="{ui:FontIcon Glyph=&#xE727;}">
-                            <controls:SettingsCard.Description>
-                                <StackPanel>
-                                    <TextBlock x:Uid="SettingsPageLyricsBlurHighGPUUsage" Foreground="{ThemeResource SystemFillColorCautionBrush}" />
-                                    <TextBlock x:Uid="SettingsPageLyricsBlurAmountSideEffect" />
-                                </StackPanel>
-                            </controls:SettingsCard.Description>
-                            <StackPanel Orientation="Horizontal">
-                                <TextBlock x:Uid="SettingsPageSliderPrefix" VerticalAlignment="Center" />
-                                <TextBlock
-                                    Margin="0,0,14,0"
-                                    VerticalAlignment="Center"
-                                    Text="{x:Bind ViewModel.SettingsService.LyricsBlurAmount, Mode=OneWay}" />
-                                <Slider
-                                    Maximum="10"
-                                    Minimum="0"
-                                    SnapsTo="Ticks"
-                                    StepFrequency="1"
-                                    TickFrequency="1"
-                                    TickPlacement="Outside"
-                                    Value="{x:Bind ViewModel.SettingsService.LyricsBlurAmount, Mode=TwoWay}" />
-                            </StackPanel>
-                        </controls:SettingsCard>
-
-                        <controls:SettingsExpander
-                            x:Uid="SettingsPageLyricsGlowEffect"
-                            HeaderIcon="{ui:FontIcon Glyph=&#xE9A9;}"
-                            IsExpanded="True">
-                            <ToggleSwitch IsOn="{x:Bind ViewModel.SettingsService.IsLyricsGlowEffectEnabled, Mode=TwoWay}" />
-                            <controls:SettingsExpander.Items>
-
-                                <controls:SettingsCard x:Uid="SettingsPageLyricsDynamicGlowEffect" IsEnabled="{x:Bind ViewModel.SettingsService.IsLyricsGlowEffectEnabled, Mode=OneWay}">
-                                    <ToggleSwitch IsOn="{x:Bind ViewModel.SettingsService.IsLyricsDynamicGlowEffectEnabled, Mode=TwoWay}" />
+                                <controls:SettingsCard x:Uid="SettingsPageLyricsLineSpacingFactor" HeaderIcon="{ui:FontIcon Glyph=&#xF579;}">
+                                    <StackPanel Orientation="Horizontal">
+                                        <TextBlock x:Uid="SettingsPageSliderPrefix" VerticalAlignment="Center" />
+                                        <TextBlock VerticalAlignment="Center" Text="{Binding ElementName=LyricsLineSpacingFactorSlider, Path=Value, Mode=OneWay}" />
+                                        <TextBlock
+                                            x:Uid="SettingsPageLyricsLineSpacingFactorUnit"
+                                            Margin="0,0,14,0"
+                                            VerticalAlignment="Center" />
+                                        <Slider
+                                            x:Name="LyricsLineSpacingFactorSlider"
+                                            Maximum="2"
+                                            Minimum="0"
+                                            SnapsTo="Ticks"
+                                            StepFrequency="0.1"
+                                            TickFrequency="0.1"
+                                            TickPlacement="Outside"
+                                            Value="{x:Bind LyricsSettingsControlViewModel.LyricsLineSpacingFactor, Mode=TwoWay}" />
+                                    </StackPanel>
                                 </controls:SettingsCard>
 
-                            </controls:SettingsExpander.Items>
-                        </controls:SettingsExpander>
+                            </StackPanel>
+                        </controls:Case>
 
-                        <TextBlock x:Uid="SettingsPageAbout" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
+                        <controls:Case Value="LyricsEffect">
+                            <StackPanel Spacing="{StaticResource SettingsCardSpacing}">
 
-                        <controls:SettingsCard Header="BetterLyrics" HeaderIcon="{ui:BitmapIcon Source=ms-appx:///Assets/Logo.png}">
-                            <controls:SettingsCard.Description>
-                                <RichTextBlock>
-                                    <Paragraph>
-                                        <Run x:Uid="SettingsPageVersion" />
-                                        <Run Text="{x:Bind ViewModel.Version, Mode=OneWay}" />
-                                    </Paragraph>
-                                </RichTextBlock>
-                            </controls:SettingsCard.Description>
-                        </controls:SettingsCard>
+                                <controls:SettingsCard x:Uid="SettingsPageLyricsVerticalEdgeOpacity" HeaderIcon="{ui:FontIcon Glyph=&#xF573;}">
+                                    <StackPanel Orientation="Horizontal">
+                                        <TextBlock x:Uid="SettingsPageSliderPrefix" VerticalAlignment="Center" />
+                                        <TextBlock VerticalAlignment="Center" Text="{Binding ElementName=LyricsVerticalEdgeOpacitySlider, Path=Value, Mode=OneWay}" />
+                                        <TextBlock
+                                            Margin="0,0,14,0"
+                                            VerticalAlignment="Center"
+                                            Text=" %" />
+                                        <Slider
+                                            x:Name="LyricsVerticalEdgeOpacitySlider"
+                                            Maximum="100"
+                                            Minimum="0"
+                                            SnapsTo="Ticks"
+                                            StepFrequency="1"
+                                            TickFrequency="1"
+                                            TickPlacement="Outside"
+                                            Value="{x:Bind LyricsSettingsControlViewModel.LyricsVerticalEdgeOpacity, Mode=TwoWay}" />
+                                    </StackPanel>
+                                </controls:SettingsCard>
 
-                        <controls:SettingsCard
-                            x:Uid="SettingsPageGitHub"
-                            ActionIcon="{ui:FontIcon Glyph=&#xE8A7;}"
-                            Command="{x:Bind ViewModel.LaunchProjectGitHubPageCommand}"
-                            HeaderIcon="{ui:FontIcon Glyph=&#xE943;}"
-                            IsClickEnabled="True" />
+                                <controls:SettingsCard x:Uid="SettingsPageLyricsBlurAmount" HeaderIcon="{ui:FontIcon Glyph=&#xE727;}">
+                                    <controls:SettingsCard.Description>
+                                        <StackPanel>
+                                            <TextBlock x:Uid="SettingsPageLyricsBlurHighGPUUsage" Foreground="{ThemeResource SystemFillColorCautionBrush}" />
+                                            <TextBlock x:Uid="SettingsPageLyricsBlurAmountSideEffect" />
+                                        </StackPanel>
+                                    </controls:SettingsCard.Description>
+                                    <StackPanel Orientation="Horizontal">
+                                        <TextBlock x:Uid="SettingsPageSliderPrefix" VerticalAlignment="Center" />
+                                        <TextBlock
+                                            Margin="0,0,14,0"
+                                            VerticalAlignment="Center"
+                                            Text="{Binding ElementName=LyricsBlurAmountSlider, Path=Value, Mode=OneWay}" />
+                                        <Slider
+                                            x:Name="LyricsBlurAmountSlider"
+                                            Maximum="10"
+                                            Minimum="0"
+                                            SnapsTo="Ticks"
+                                            StepFrequency="1"
+                                            TickFrequency="1"
+                                            TickPlacement="Outside"
+                                            Value="{x:Bind LyricsSettingsControlViewModel.LyricsBlurAmount, Mode=TwoWay}" />
+                                    </StackPanel>
+                                </controls:SettingsCard>
 
-                        <TextBlock x:Uid="SettingsPageDev" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
+                                <controls:SettingsExpander
+                                    x:Uid="SettingsPageLyricsGlowEffect"
+                                    HeaderIcon="{ui:FontIcon Glyph=&#xE9A9;}"
+                                    IsExpanded="{x:Bind LyricsSettingsControlViewModel.IsLyricsGlowEffectEnabled, Mode=OneWay}">
+                                    <ToggleSwitch IsOn="{x:Bind LyricsSettingsControlViewModel.IsLyricsGlowEffectEnabled, Mode=TwoWay}" />
+                                    <controls:SettingsExpander.Items>
+                                        <controls:SettingsCard x:Uid="SettingsPageLyricsGlowEffectScope" IsEnabled="{x:Bind LyricsSettingsControlViewModel.IsLyricsGlowEffectEnabled, Mode=OneWay}">
+                                            <ComboBox SelectedIndex="{x:Bind LyricsSettingsControlViewModel.LyricsGlowEffectScope, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
+                                                <ComboBoxItem x:Uid="SettingsPageLyricsGlowEffectScopeWholeLyrics" />
+                                                <ComboBoxItem x:Uid="SettingsPageLyricsGlowEffectScopeCurrentLine" />
+                                                <ComboBoxItem x:Uid="SettingsPageLyricsGlowEffectScopeCurrentChar" />
+                                            </ComboBox>
+                                        </controls:SettingsCard>
+                                    </controls:SettingsExpander.Items>
+                                </controls:SettingsExpander>
 
-                        <controls:SettingsCard x:Uid="SettingsPageMockMusicPlaying">
-                            <Button x:Uid="SettingsPagePlayingMockMusicButton" Command="{x:Bind ViewModel.PlayTestingMusicTaskCommand}" />
-                        </controls:SettingsCard>
+                            </StackPanel>
+                        </controls:Case>
 
-                        <controls:SettingsCard x:Uid="SettingsPageLog">
-                            <Button x:Uid="SettingsPageOpenLogFolderButton" Command="{x:Bind ViewModel.OpenLogFolderCommand}" />
-                        </controls:SettingsCard>
+                        <controls:Case Value="About">
+                            <StackPanel Spacing="{StaticResource SettingsCardSpacing}">
+                                <controls:SettingsCard Header="BetterLyrics" HeaderIcon="{ui:BitmapIcon Source=ms-appx:///Assets/Logo.png}">
+                                    <controls:SettingsCard.Description>
+                                        <RichTextBlock>
+                                            <Paragraph>
+                                                <Run x:Uid="SettingsPageVersion" />
+                                                <Run Text="{x:Bind ViewModel.Version, Mode=OneWay}" />
+                                            </Paragraph>
+                                        </RichTextBlock>
+                                    </controls:SettingsCard.Description>
+                                </controls:SettingsCard>
 
-                    </StackPanel>
+                                <controls:SettingsCard
+                                    x:Uid="SettingsPageGitHub"
+                                    ActionIcon="{ui:FontIcon Glyph=&#xE8A7;}"
+                                    Command="{x:Bind ViewModel.LaunchProjectGitHubPageCommand}"
+                                    HeaderIcon="{ui:FontIcon Glyph=&#xE943;}"
+                                    IsClickEnabled="True" />
+                            </StackPanel>
+                        </controls:Case>
+
+                        <controls:Case Value="Dev">
+                            <StackPanel Spacing="{StaticResource SettingsCardSpacing}">
+                                <controls:SettingsCard x:Uid="SettingsPageMockMusicPlaying">
+                                    <Button x:Uid="SettingsPagePlayingMockMusicButton" Command="{x:Bind ViewModel.PlayTestingMusicTaskCommand}" />
+                                </controls:SettingsCard>
+                                <controls:SettingsCard x:Uid="SettingsPageLog">
+                                    <Button x:Uid="SettingsPageOpenLogFolderButton" Command="{x:Bind ViewModel.OpenLogFolderCommand}" />
+                                </controls:SettingsCard>
+                            </StackPanel>
+                        </controls:Case>
+
+                    </controls:SwitchPresenter>
                 </Grid>
             </ScrollViewer>
-        </controls:OpacityMaskView>
+        </NavigationView>
 
     </Grid>
 </Page>

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Views/SettingsPage.xaml.cs

@@ -1,3 +1,4 @@
+using BetterInAppLyrics.WinUI3.ViewModels;
 using BetterLyrics.WinUI3.ViewModels;
 using CommunityToolkit.Mvvm.DependencyInjection;
 using Microsoft.UI.Xaml;
@@ -14,11 +15,13 @@ namespace BetterLyrics.WinUI3.Views
     public sealed partial class SettingsPage : Page
     {
         public SettingsViewModel ViewModel => (SettingsViewModel)DataContext;
+        public LyricsSettingsControlViewModel LyricsSettingsControlViewModel =>
+            Ioc.Default.GetRequiredService<LyricsSettingsControlViewModel>();
 
         public SettingsPage()
         {
             this.InitializeComponent();
-            DataContext = Ioc.Default.GetService<SettingsViewModel>();
+            DataContext = Ioc.Default.GetRequiredService<SettingsViewModel>();
         }
 
         private void SettingsPageOpenPathButton_Click(
@@ -26,7 +29,7 @@ namespace BetterLyrics.WinUI3.Views
             Microsoft.UI.Xaml.RoutedEventArgs e
         )
         {
-            SettingsViewModel.OpenMusicFolder((string)(sender as HyperlinkButton)!.Tag);
+            ViewModel.OpenMusicFolder((string)(sender as HyperlinkButton)!.Tag);
         }
 
         private async void SettingsPageRemovePathButton_Click(
@@ -36,5 +39,13 @@ namespace BetterLyrics.WinUI3.Views
         {
             await ViewModel.RemoveFolderAsync((string)(sender as HyperlinkButton)!.Tag);
         }
+
+        private void NavView_SelectionChanged(
+            NavigationView sender,
+            NavigationViewSelectionChangedEventArgs args
+        )
+        {
+            ViewModel.NavViewSelectedItemTag = (args.SelectedItem as NavigationViewItem)!.Tag;
+        }
     }
 }

README.md

@@ -18,8 +18,9 @@ Your smooth dynamic local lyrics display built with WinUI 3
 - Smooth lyrics fade in/out, zoom in/out effects
 - Smooth user interface change from song to song
 - Gradient Karaoke effect on every single character
+- Immersive desktop lyrics
 
-Coding in progress...
+> This project is still under development now, bugs and unexpected behaviors may be existed in the latest dev branch.
 
 ## Customize in your way
 
@@ -31,7 +32,7 @@ We provide more than one setting item to better align with your preference
 
 - Album art as background (dynamic, blur amount, opacity)
 
-- Lyrics (alignment, font size, line spacing, opacity, blur amount, dynamic glow effect)
+- Lyrics (alignment, font size, font color **(picked from album art accent color)** line spacing, opacity, blur amount, dynamic **glow** effect)
 
 - Language (English, Simplified Chinese, Traditional Chinese)
 
@@ -41,32 +42,38 @@ We provide more than one setting item to better align with your preference
 
 ![alt text](Screenshots/BetterLyrics.WinUI3_igDdnc4rzW.gif)
 
-Or watch our introduction video「BetterLyrics 阶段性开发成果展示」(uploaded on 31 May 2025) on Bilibili below (click the cover image to watch):
+![alt text](Screenshots/Code_HhDCqJZYEZ.gif)
 
-[![Bilibili](https://i1.hdslb.com/bfs/archive/75a7a1a3803b617574090a91c59785b6c40d0fe5.jpg@672w_378h_1c.avif)](https://b23.tv/QjKkYmL)
+> **Highlighted feature**: Immersive lyrics shown on top of the screen (automatically follow current activated windows's accent color)
+
+Or watch our introduction video「BetterLyrics 阶段性开发成果展示」(uploaded on 31 May 2025) on Bilibili [here](https://b23.tv/QjKkYmL).
 
 ## Screenshots
 
-### Split view
+### In-app lyrics
 
-![alt text](Screenshots/Snipaste_2025-06-03_16-46-55.png)
+Non-immersive mode
+
+![alt text](Screenshots/Snipaste_2025-06-07_17-36-26.png)
+
+Immersive mode
 ![alt text](Screenshots/Snipaste_2025-06-03_16-47-43.png)
+
+Lyrics only
+
 ![alt text](Screenshots/Snipaste_2025-06-03_17-51-22.png)
 
-### Fullscreen
+Fullscreen
 
-![alt text](Screenshots/Snipaste_2025-06-03_17-52-51.png)
-![alt text](Screenshots/Snipaste_2025-06-03_17-53-07.png)
 ![alt text](Screenshots/Snipaste_2025-06-03_18-36-05.png)
 
-### Settings
+### Desktop lyrics
 
-![alt text](Screenshots/Snipaste_2025-06-03_17-51-52.png)
-![alt text](Screenshots/Snipaste_2025-06-03_17-52-00.png)
-![alt text](Screenshots/Snipaste_2025-06-03_17-52-05.png)
-![alt text](Screenshots/Snipaste_2025-06-03_17-52-11.png)
+![alt text](Screenshots/image.png)
 
-## Download it now
+## Try it now
+
+### Stable version
 
 <a href="https://apps.microsoft.com/detail/9P1WCD1P597R?referrer=appbadge&mode=direct">
 	<img src="https://get.microsoft.com/images/en-us%20dark.svg" width="200"/>
@@ -74,13 +81,37 @@ Or watch our introduction video「BetterLyrics 阶段性开发成果展示」(up
 
 > **Easiest** way to get it. **Unlimited** free trail or purchase (there is **no difference** between free and paid version, if you like you can purchase to support me)
 
-Or alternatively get it from [![]()](https://shorturl.at/jXbd7)
+Or alternatively get it from Google Drive (see [release](https://github.com/jayfunc/BetterLyrics/releases/latest) page for the link)
 
-<a href="https://drive.google.com/file/d/1Hh8ijbODIksPmmRYujys7fXngw93Of7I/view?usp=drive_link">
-	<img src="https://pngimg.com/uploads/google_drive/google_drive_PNG9.png" width="100"/>
-</a>
+> Please note you are downloading ".zip" file, for guide on how to install it, please kindly follow [this doc](How2Install/How2Install.md).
 
-> .zip file, please follow [this doc](How2Install/How2Install.md) to properly install it
+### Latest dev version
+
+You can `git clone` this project and build it yourself.
+
+## Setup your app
+
+This project relies on listening messages from [SMTC](https://learn.microsoft.com/en-ca/windows/uwp/audio-video-camera/integrate-with-systemmediatransportcontrols).
+So technically, as long as you are using the music apps (like
+
+- Spotify
+- Groove Music
+- Apple Music
+- Windows Media Player
+- VLC Media Player
+- QQ 音乐
+- 网易云音乐
+- 酷狗音乐
+- 酷我音乐
+
+) which support SMTC, then possibly (I didn't test all of themif you find one fail to listen to, you can open an issue) all you need to do is just load your local music/lyrics lib and you are good to go.
+
+## Future work
+
+- Watching file changes
+  When you downloading lyrics (using some other tools or your own scripts) while listening to new musics (non-existed on your local disks), this app can automatically load those new files.
+
+> Please note: we are not planning support directly load lyrics files via some music software APIs due to copyright issues.
 
 ## Many thanks to
 
@@ -98,29 +129,44 @@ Or alternatively get it from [![]()](https://shorturl.at/jXbd7)
 - [BetterNCM](https://github.com/std-microblock/BetterNCM)
 - [Lyricify-App](https://github.com/WXRIW/Lyricify-App)
 - [椒盐音乐 Salt Player](https://moriafly.com/program/salt-player)
+- [MyToolBar](https://github.com/TwilightLemon/MyToolBar)
 
 ## Third-party libraries that this project uses
 
 ```
-<PackageReference Include="CommunityToolkit.Labs.WinUI.MarqueeText" Version="0.1.230830" />
-<PackageReference Include="CommunityToolkit.Labs.WinUI.OpacityMaskView" Version="0.1.250513-build.2126" />
-<PackageReference Include="CommunityToolkit.Mvvm" Version="8.4.0" />
-<PackageReference Include="CommunityToolkit.WinUI.Behaviors" Version="8.2.250402" />
-<PackageReference Include="CommunityToolkit.WinUI.Controls.SettingsControls" Version="8.2.250402" />
-<PackageReference Include="CommunityToolkit.WinUI.Converters" Version="8.2.250402" />
-<PackageReference Include="CommunityToolkit.WinUI.Extensions" Version="8.2.250402" />
-<PackageReference Include="CommunityToolkit.WinUI.Media" Version="8.2.250402" />
-<PackageReference Include="DevWinUI" Version="8.2.0" />
-<PackageReference Include="Microsoft.Extensions.DependencyInjection" Version="9.0.5" />
-<PackageReference Include="Microsoft.Graphics.Win2D" Version="1.3.2" />
-<PackageReference Include="Microsoft.Windows.SDK.BuildTools" Version="10.0.26100.4188" />
-<PackageReference Include="Microsoft.WindowsAppSDK" Version="1.7.250513003" />
-<PackageReference Include="Microsoft.Xaml.Behaviors.WinUI.Managed" Version="3.0.0" />
-<PackageReference Include="Newtonsoft.Json" Version="13.0.3" />
-<PackageReference Include="sqlite-net-pcl" Version="1.9.172" />
-<PackageReference Include="System.Text.Encoding.CodePages" Version="9.0.5" />
-<PackageReference Include="Ude.NetStandard" Version="1.2.0" />
-<PackageReference Include="z440.atl.core" Version="6.24.0" />
+CommunityToolkit.Labs.WinUI.MarqueeText
+CommunityToolkit.Labs.WinUI.OpacityMaskView
+CommunityToolkit.Mvvm
+CommunityToolkit.WinUI.Behaviors
+CommunityToolkit.WinUI.Controls.Primitives
+CommunityToolkit.WinUI.Controls.Segmented
+CommunityToolkit.WinUI.Controls.SettingsControls
+CommunityToolkit.WinUI.Converters
+CommunityToolkit.WinUI.Extensions
+CommunityToolkit.WinUI.Helpers
+CommunityToolkit.WinUI.Media
+Microsoft.Extensions.DependencyInjection
+Microsoft.Extensions.Logging
+Microsoft.Graphics.Win2D
+Microsoft.Windows.SDK.BuildTools
+Microsoft.WindowsAppSDK
+Microsoft.Xaml.Behaviors.WinUI.Managed
+Newtonsoft.Json
+Serilog.Extensions.Logging
+Serilog.Sinks.File
+sqlite-net-pcl
+System.Drawing.Common
+System.Text.Encoding.CodePages
+Ude.NetStandard
+WinUIEx
+z440.atl.core
+
 ```
 
+## Star History
+
+[![Star History Chart](https://api.star-history.com/svg?repos=jayfunc/BetterLyrics&type=Date)](https://www.star-history.com/#jayfunc/BetterLyrics&Date)
+
 ## Any issues and PRs are welcomed
+
+If you find a bug please file it in issues or if you have any ideas feel free to share it here.