feat: album art switch animation

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

@@ -23,11 +23,12 @@
 		<None Remove="Assets\Segoe Fluent Icons.ttf" />
 		<None Remove="Assets\Wiki82.profile.xml" />
 		<None Remove="Controls\AboutControl.xaml" />
-		<None Remove="Controls\AlbumArtLayoutSettingsControl.xaml" />
+		<None Remove="Controls\AlbumArtAreaEffectSettingsControl.xaml" />
 		<None Remove="Controls\AppSettingsControl.xaml" />
 		<None Remove="Controls\DemoWindowGrid.xaml" />
 		<None Remove="Controls\ExtendedSlider.xaml" />
 		<None Remove="Controls\FontFamilyAutoSuggestBox.xaml" />
+		<None Remove="Controls\ImageSwitcher.xaml" />
 		<None Remove="Controls\LyricsSearchControl.xaml" />
 		<None Remove="Controls\LyricsStyleSettingsControl.xaml" />
 		<None Remove="Controls\LyricsWindowSettingsControl.xaml" />
@@ -37,6 +38,7 @@
 		<None Remove="Controls\PropertyRow.xaml" />
 		<None Remove="Controls\ShortcutTextBox.xaml" />
 		<None Remove="Controls\SystemTray.xaml" />
+		<None Remove="Controls\WindowSettingsControl.xaml" />
 		<None Remove="Views\LyricsSearchWindow.xaml" />
 		<None Remove="Views\LyricsWindowSwitchWindow.xaml" />
 		<None Remove="Views\MusicGalleryPage.xaml" />
@@ -292,7 +294,7 @@
 	  </Page>
 	</ItemGroup>
 	<ItemGroup>
-	  <Page Update="Controls\AlbumArtLayoutSettingsControl.xaml">
+	  <Page Update="Controls\AlbumArtAreaStyleSettingsControl.xaml">
 	    <Generator>MSBuild:Compile</Generator>
 	  </Page>
 	</ItemGroup>
@@ -334,6 +336,21 @@
 	<ItemGroup>
 	  <Folder Include="TemplateSelector\" />
 	</ItemGroup>
+	<ItemGroup>
+	  <Page Update="Controls\WindowSettingsControl.xaml">
+	    <Generator>MSBuild:Compile</Generator>
+	  </Page>
+	</ItemGroup>
+	<ItemGroup>
+	  <Page Update="Controls\AlbumArtAreaEffectSettingsControl.xaml">
+	    <Generator>MSBuild:Compile</Generator>
+	  </Page>
+	</ItemGroup>
+	<ItemGroup>
+	  <Page Update="Controls\ImageSwitcher.xaml">
+	    <Generator>MSBuild:Compile</Generator>
+	  </Page>
+	</ItemGroup>
 	<ItemGroup>
 	  <Page Update="Controls\ShadowImage.xaml">
 	    <Generator>MSBuild:Compile</Generator>

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Controls/AlbumArtAreaEffectSettingsControl.xaml

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<UserControl
+    x:Class="BetterLyrics.WinUI3.Controls.AlbumArtAreaEffectSettingsControl"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:dev="using:DevWinUI"
+    xmlns:local="using:BetterLyrics.WinUI3.Controls"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:ui="using:CommunityToolkit.WinUI"
+    mc:Ignorable="d">
+
+    <Grid>
+        <ScrollViewer Style="{StaticResource SettingsScrollViewerStyle}">
+            <Grid Style="{StaticResource SettingsGridStyle}">
+                <StackPanel Spacing="{StaticResource SettingsCardSpacing}">
+
+                    <TextBlock x:Uid="SettingsPageAlbumEffect" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
+
+                    <dev:SettingsCard x:Uid="SettingsPageImageSwitchType" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE8EB;}">
+                        <ComboBox SelectedIndex="{x:Bind AlbumArtAreaEffectSettings.ImageSwitchType, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
+                            <ComboBoxItem x:Uid="SettingsPageCrossfade" />
+                            <ComboBoxItem x:Uid="SettingsPageSlide" />
+                        </ComboBox>
+                    </dev:SettingsCard>
+
+                </StackPanel>
+            </Grid>
+        </ScrollViewer>
+    </Grid>
+</UserControl>

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Controls/AlbumArtAreaEffectSettingsControl.xaml.cs

@@ -0,0 +1,37 @@
+using BetterLyrics.WinUI3.Models.Settings;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Controls.Primitives;
+using Microsoft.UI.Xaml.Data;
+using Microsoft.UI.Xaml.Input;
+using Microsoft.UI.Xaml.Media;
+using Microsoft.UI.Xaml.Navigation;
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+
+// 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.Controls;
+
+public sealed partial class AlbumArtAreaEffectSettingsControl : UserControl
+{
+    public static readonly DependencyProperty AlbumArtAreaEffectSettingsProperty =
+    DependencyProperty.Register(nameof(AlbumArtAreaEffectSettings), typeof(AlbumArtAreaEffectSettings), typeof(AlbumArtAreaEffectSettingsControl), new PropertyMetadata(default));
+
+    public AlbumArtAreaEffectSettings AlbumArtAreaEffectSettings
+    {
+        get => (AlbumArtAreaEffectSettings)GetValue(AlbumArtAreaEffectSettingsProperty);
+        set => SetValue(AlbumArtAreaEffectSettingsProperty, value);
+    }
+
+    public AlbumArtAreaEffectSettingsControl()
+    {
+        InitializeComponent();
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Controls/AlbumArtAreaStyleSettingsControl.xaml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <UserControl
-    x:Class="BetterLyrics.WinUI3.Controls.AlbumArtLayoutSettingsControl"
+    x:Class="BetterLyrics.WinUI3.Controls.AlbumArtAreaStyleSettingsControl"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:controls="using:CommunityToolkit.WinUI.Controls"

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Controls/AlbumArtAreaStyleSettingsControl.xaml.cs

@@ -7,18 +7,18 @@ using Microsoft.UI.Xaml.Controls;
 
 namespace BetterLyrics.WinUI3.Controls
 {
-    public sealed partial class AlbumArtLayoutSettingsControl : UserControl
+    public sealed partial class AlbumArtAreaStyleSettingsControl : UserControl
     {
         public static readonly DependencyProperty AlbumArtLayoutSettingsProperty =
-            DependencyProperty.Register(nameof(AlbumArtLayoutSettings), typeof(AlbumArtLayoutSettings), typeof(AlbumArtLayoutSettingsControl), new PropertyMetadata(default));
+            DependencyProperty.Register(nameof(AlbumArtLayoutSettings), typeof(AlbumArtAreaStyleSettings), typeof(AlbumArtAreaStyleSettingsControl), new PropertyMetadata(default));
 
-        public AlbumArtLayoutSettings AlbumArtLayoutSettings
+        public AlbumArtAreaStyleSettings AlbumArtLayoutSettings
         {
-            get => (AlbumArtLayoutSettings)GetValue(AlbumArtLayoutSettingsProperty);
+            get => (AlbumArtAreaStyleSettings)GetValue(AlbumArtLayoutSettingsProperty);
             set => SetValue(AlbumArtLayoutSettingsProperty, value);
         }
 
-        public AlbumArtLayoutSettingsControl()
+        public AlbumArtAreaStyleSettingsControl()
         {
             InitializeComponent();
         }

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Controls/ImageSwitcher.xaml

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<UserControl
+    x:Class="BetterLyrics.WinUI3.Controls.ImageSwitcher"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:const="using:BetterLyrics.WinUI3.Constants"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="using:BetterLyrics.WinUI3.Controls"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d">
+
+    <Grid>
+        <Grid.OpacityTransition>
+            <ScalarTransition Duration="{x:Bind const:Time.AnimationDuration}" />
+        </Grid.OpacityTransition>
+        <local:ShadowImage
+            x:Name="LastAlbumArtImage"
+            HorizontalAlignment="Center"
+            VerticalAlignment="Center"
+            CornerRadiusAmount="{x:Bind CornerRadiusAmount, Mode=OneWay}"
+            ShadowAmount="{x:Bind ShadowAmount, Mode=OneWay}" />
+        <local:ShadowImage
+            x:Name="AlbumArtImage"
+            HorizontalAlignment="Center"
+            VerticalAlignment="Center"
+            CornerRadiusAmount="{x:Bind CornerRadiusAmount, Mode=OneWay}"
+            ShadowAmount="{x:Bind ShadowAmount, Mode=OneWay}" />
+    </Grid>
+</UserControl>

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Controls/ImageSwitcher.xaml.cs

@@ -0,0 +1,145 @@
+using BetterLyrics.WinUI3.Enums;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Controls.Primitives;
+using Microsoft.UI.Xaml.Data;
+using Microsoft.UI.Xaml.Input;
+using Microsoft.UI.Xaml.Media;
+using Microsoft.UI.Xaml.Navigation;
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using System.Threading.Tasks;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+
+// 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.Controls;
+
+public sealed partial class ImageSwitcher : UserControl
+{
+    public int CornerRadiusAmount
+    {
+        get { return (int)GetValue(CornerRadiusAmountProperty); }
+        set { SetValue(CornerRadiusAmountProperty, value); }
+    }
+
+    public static readonly DependencyProperty CornerRadiusAmountProperty =
+        DependencyProperty.Register(nameof(CornerRadiusAmount), typeof(int), typeof(ImageSwitcher), new PropertyMetadata(0));
+
+    public int ShadowAmount
+    {
+        get { return (int)GetValue(ShadowAmountProperty); }
+        set { SetValue(ShadowAmountProperty, value); }
+    }
+
+    public static readonly DependencyProperty ShadowAmountProperty =
+        DependencyProperty.Register(nameof(ShadowAmount), typeof(int), typeof(ImageSwitcher), new PropertyMetadata(0));
+
+    public ImageSource? Source
+    {
+        get { return (ImageSource?)GetValue(SourceProperty); }
+        set { SetValue(SourceProperty, value); }
+    }
+
+    public static readonly DependencyProperty SourceProperty =
+        DependencyProperty.Register(nameof(Source), typeof(ImageSource), typeof(ImageSwitcher), new PropertyMetadata(null, OnDependencyPropertyChanged));
+
+    public ImageSwitchType SwitchType
+    {
+        get { return (ImageSwitchType)GetValue(SwitchTypeProperty); }
+        set { SetValue(SwitchTypeProperty, value); }
+    }
+
+    public static readonly DependencyProperty SwitchTypeProperty =
+        DependencyProperty.Register(nameof(SwitchType), typeof(ImageSwitchType), typeof(ImageSwitcher), new PropertyMetadata(ImageSwitchType.Crossfade));
+
+    public ImageSwitcher()
+    {
+        InitializeComponent();
+    }
+
+    private void UpdateSource()
+    {
+        switch (SwitchType)
+        {
+            case ImageSwitchType.Crossfade:
+                UpdateSourceCrossfade();
+                break;
+            case ImageSwitchType.Slide:
+                UpdateSourceSlide();
+                break;
+            default:
+                break;
+        }
+    }
+
+    private void UpdateSourceCrossfade()
+    {
+        // Ϊ<><CEAA><EFBFBD><EFBFBD>ͼƬ<CDBC><C6AC><EFBFBD>þ<EFBFBD>Դ
+        LastAlbumArtImage.Source = AlbumArtImage.Source;
+        // ʹ<><CAB9><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ɼ<EFBFBD>
+        LastAlbumArtImage.TranslationTransition = null;
+        LastAlbumArtImage.OpacityTransition = null;
+        LastAlbumArtImage.Translation = new();
+        LastAlbumArtImage.Opacity = 1;
+        LastAlbumArtImage.OpacityTransition = new ScalarTransition { Duration = Constants.Time.AnimationDuration };
+
+        // ʹǰ<CAB9><C7B0>ͼƬ<CDBC><C6AC><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ɼ<EFBFBD>
+        AlbumArtImage.TranslationTransition = null;
+        AlbumArtImage.OpacityTransition = null;
+        AlbumArtImage.Translation = new();
+        AlbumArtImage.Opacity = 0;
+        AlbumArtImage.OpacityTransition = new ScalarTransition { Duration = Constants.Time.AnimationDuration };
+        // ֮<><D6AE>Ϊ<EFBFBD><CEAA><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Դ
+        AlbumArtImage.Source = Source;
+
+        // <20><><EFBFBD>浭<EFBFBD><E6B5AD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
+        LastAlbumArtImage.Opacity = 0;
+        AlbumArtImage.Opacity = 1;
+    }
+
+    private void UpdateSourceSlide()
+    {
+        // Ϊ<><CEAA><EFBFBD><EFBFBD>ͼƬ<CDBC><C6AC><EFBFBD>þ<EFBFBD>Դ
+        LastAlbumArtImage.Source = AlbumArtImage.Source;
+        // ʹ<><CAB9><EFBFBD><EFBFBD>λ
+        LastAlbumArtImage.TranslationTransition = null;
+        LastAlbumArtImage.OpacityTransition = null;
+        LastAlbumArtImage.Translation = new();
+        LastAlbumArtImage.Opacity = 1;
+        LastAlbumArtImage.TranslationTransition = new Vector3Transition { Duration = Constants.Time.AnimationDuration };
+        LastAlbumArtImage.OpacityTransition = new ScalarTransition { Duration = Constants.Time.AnimationDuration };
+
+        // ʹǰ<CAB9><C7B0>ͼƬ<CDBC><C6AC><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ɼ<EFBFBD>
+        AlbumArtImage.TranslationTransition = null;
+        AlbumArtImage.OpacityTransition = null;
+        AlbumArtImage.Translation = new(-(float)ActualWidth, 0, 0);
+        AlbumArtImage.Opacity = 0;
+        AlbumArtImage.TranslationTransition = new Vector3Transition { Duration = Constants.Time.AnimationDuration };
+        AlbumArtImage.OpacityTransition = new ScalarTransition { Duration = Constants.Time.AnimationDuration };
+        // ֮<><D6AE>Ϊ<EFBFBD><CEAA><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Դ
+        AlbumArtImage.Source = Source;
+
+        // <20><><EFBFBD><EFBFBD>
+        LastAlbumArtImage.Opacity = 0;
+        AlbumArtImage.Opacity = 1;
+        LastAlbumArtImage.Translation = new(-(float)ActualWidth, 0, 0);
+        AlbumArtImage.Translation = new();
+    }
+
+    private static void OnDependencyPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        if (d is ImageSwitcher imageSwitcher)
+        {
+            if (e.Property == SourceProperty)
+            {
+                imageSwitcher.UpdateSource();
+            }
+        }
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Controls/LyricsWindowSettingsControl.xaml

@@ -162,7 +162,7 @@
 
                     <Pivot SelectionChanged="Pivot_SelectionChanged">
 
-                        <PivotItem Tag="General">
+                        <PivotItem Tag="Window">
                             <PivotItem.Header>
                                 <TextBlock
                                     x:Uid="AppSettingsControlGeneral"
@@ -189,6 +189,15 @@
                             </PivotItem.Header>
                         </PivotItem>
 
+                        <PivotItem Tag="AlbumArtEffect">
+                            <PivotItem.Header>
+                                <TextBlock
+                                    x:Uid="SettingsPageAlbumEffect"
+                                    VerticalAlignment="Center"
+                                    Style="{StaticResource BodyTextBlockStyle}" />
+                            </PivotItem.Header>
+                        </PivotItem>
+
                         <PivotItem Tag="LyricsStyle">
                             <PivotItem.Header>
                                 <TextBlock
@@ -229,155 +238,8 @@
                 </controls:SwitchPresenter.ContentTransitions>
 
                 <!--  Window  -->
-                <controls:Case Value="General">
-                    <ScrollViewer Style="{StaticResource SettingsScrollViewerStyle}">
-                        <Grid Style="{StaticResource SettingsGridStyle}">
-                            <StackPanel Spacing="{StaticResource SettingsCardSpacing}">
-
-                                <TextBlock x:Uid="AppSettingsControlGeneral" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
-
-                                <dev:SettingsCard x:Uid="SettingsPageConfigName" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE8AC;}">
-                                    <StackPanel
-                                        Margin="0,6,0,0"
-                                        Orientation="Horizontal"
-                                        Spacing="6">
-                                        <TextBox Text="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.Name, Mode=TwoWay}" TextWrapping="Wrap" />
-                                        <Button Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, FontSize=12, Glyph=&#xE8FB;}" Style="{StaticResource GhostButtonStyle}" />
-                                    </StackPanel>
-                                </dev:SettingsCard>
-
-                                <dev:SettingsExpander
-                                    x:Uid="SettingsPageWorkArea"
-                                    HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
-                                                             Glyph=&#xE78B;}"
-                                    IsExpanded="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.IsWorkArea, Mode=OneWay}">
-                                    <ToggleSwitch IsOn="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.IsWorkArea, Mode=TwoWay}" />
-                                    <dev:SettingsExpander.Items>
-                                        <dev:SettingsCard x:Uid="SettingsPageWorkAreaHeight" IsEnabled="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.IsWorkArea, Mode=OneWay}">
-                                            <uc:ExtendedSlider
-                                                Default="64"
-                                                Maximum="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.MonitorBounds.Height, Mode=OneWay}"
-                                                Minimum="64"
-                                                Unit="px"
-                                                Value="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.DockHeight, Mode=TwoWay}" />
-                                        </dev:SettingsCard>
-
-                                        <dev:SettingsCard x:Uid="SettingsPageDockPlacement" IsEnabled="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.IsWorkArea, Mode=OneWay}">
-                                            <ComboBox SelectedIndex="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.DockPlacement, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
-                                                <ComboBoxItem x:Uid="SettingsPageDockPlacementTop" />
-                                                <ComboBoxItem x:Uid="SettingsPageDockPlacementBottom" />
-                                            </ComboBox>
-                                        </dev:SettingsCard>
-
-                                        <dev:SettingsCard x:Uid="SettingsPageDockMonitor" IsEnabled="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.IsWorkArea, Mode=OneWay}">
-                                            <StackPanel Orientation="Horizontal" Spacing="6">
-                                                <ComboBox ItemsSource="{x:Bind ViewModel.MonitorDeviceNames, Mode=OneWay}" SelectedItem="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.MonitorDeviceName, Mode=TwoWay}" />
-                                                <Button
-                                                    Command="{x:Bind ViewModel.RefreshMonitorDeviceNamesCommand}"
-                                                    Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
-                                                                          FontSize=12,
-                                                                          Glyph=&#xE72C;}"
-                                                    Style="{StaticResource GhostButtonStyle}" />
-                                            </StackPanel>
-                                        </dev:SettingsCard>
-
-                                    </dev:SettingsExpander.Items>
-                                </dev:SettingsExpander>
-
-                                <dev:SettingsExpander
-                                    x:Uid="SettingsPageAdaptEnvColor"
-                                    HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
-                                                             Glyph=&#xE88F;}"
-                                    IsExpanded="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.IsAdaptToEnvironment, Mode=OneWay}">
-                                    <ToggleSwitch IsOn="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.IsAdaptToEnvironment, Mode=TwoWay}" />
-                                    <dev:SettingsExpander.Items>
-                                        <dev:SettingsCard
-                                            x:Uid="SettingsPageEnvColorSample"
-                                            Header="Environment color sample mode"
-                                            IsEnabled="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.IsAdaptToEnvironment, Mode=OneWay}">
-                                            <ComboBox SelectedIndex="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.EnvironmentSampleMode, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
-                                                <ComboBoxItem x:Uid="SettingsPageEnvColorSampleBelow" />
-                                                <ComboBoxItem x:Uid="SettingsPageEnvColorSampleAbove" />
-                                                <ComboBoxItem x:Uid="SettingsPageEnvColorSampleInner" />
-                                                <ComboBoxItem x:Uid="SettingsPageEnvColorSampleEdge" />
-                                            </ComboBox>
-                                        </dev:SettingsCard>
-                                    </dev:SettingsExpander.Items>
-                                </dev:SettingsExpander>
-
-                                <dev:SettingsExpander
-                                    x:Uid="SettingsPageWindowBounds"
-                                    HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
-                                                             Glyph=&#xF16B;}"
-                                    IsExpanded="True">
-                                    <dev:SettingsExpander.Items>
-                                        <dev:SettingsCard Header="X">
-                                            <NumberBox
-                                                SmallChange="10"
-                                                SpinButtonPlacementMode="Inline"
-                                                Value="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.WindowX, Mode=TwoWay}" />
-                                        </dev:SettingsCard>
-                                        <dev:SettingsCard Header="Y">
-                                            <NumberBox
-                                                SmallChange="10"
-                                                SpinButtonPlacementMode="Inline"
-                                                Value="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.WindowY, Mode=TwoWay}" />
-                                        </dev:SettingsCard>
-                                        <dev:SettingsCard x:Uid="SettingsPageWidth">
-                                            <NumberBox
-                                                SmallChange="10"
-                                                SpinButtonPlacementMode="Inline"
-                                                Value="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.WindowWidth, Mode=TwoWay}" />
-                                        </dev:SettingsCard>
-                                        <dev:SettingsCard x:Uid="SettingsPageHeight">
-                                            <NumberBox
-                                                SmallChange="10"
-                                                SpinButtonPlacementMode="Inline"
-                                                Value="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.WindowHeight, Mode=TwoWay}" />
-                                        </dev:SettingsCard>
-                                    </dev:SettingsExpander.Items>
-                                </dev:SettingsExpander>
-
-                                <dev:SettingsExpander
-                                    x:Uid="SettingsPageAOT"
-                                    HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
-                                                             Glyph=&#xE718;}"
-                                    IsExpanded="True">
-                                    <ToggleSwitch IsOn="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.IsAlwaysOnTop, Mode=TwoWay}" />
-                                    <dev:SettingsExpander.Items>
-                                        <dev:SettingsCard x:Uid="SettingsPageForceAlwaysOnTop" IsEnabled="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.IsAlwaysOnTop, Mode=OneWay}">
-                                            <ToggleSwitch IsOn="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.IsAlwaysOnTopPolling, Mode=TwoWay}" />
-                                        </dev:SettingsCard>
-                                    </dev:SettingsExpander.Items>
-                                </dev:SettingsExpander>
-
-                                <dev:SettingsCard x:Uid="SettingsPageHideWindow" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xED1A;}">
-                                    <ToggleSwitch IsOn="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.AutoShowOrHideWindow, Mode=TwoWay}" />
-                                </dev:SettingsCard>
-
-                                <dev:SettingsCard x:Uid="SettingsPageShowInSwitchers" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE7C4;}">
-                                    <ToggleSwitch IsOn="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.IsShownInSwitchers, Mode=TwoWay}" />
-                                </dev:SettingsCard>
-
-                                <dev:SettingsCard x:Uid="SettingsPageClickThrough" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE7C9;}">
-                                    <ToggleSwitch IsOn="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.IsClickThrough, Mode=TwoWay}" />
-                                </dev:SettingsCard>
-
-                                <dev:SettingsCard x:Uid="SettingsPageBorderless" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE8B2;}">
-                                    <ToggleSwitch IsOn="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.IsBorderless, Mode=TwoWay}" />
-                                </dev:SettingsCard>
-
-                                <dev:SettingsCard x:Uid="SettingsPageDragArea" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xEB41;}">
-                                    <ComboBox SelectedIndex="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.TitleBarArea, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
-                                        <ComboBoxItem x:Uid="SettingsPageTitleBarAreaNone" />
-                                        <ComboBoxItem x:Uid="SettingsPageTitleBarAreaTop" />
-                                        <ComboBoxItem x:Uid="SettingsPageTitleBarAreaWhole" />
-                                    </ComboBox>
-                                </dev:SettingsCard>
-
-                            </StackPanel>
-                        </Grid>
-                    </ScrollViewer>
+                <controls:Case Value="Window">
+                    <uc:WindowSettingsControl LyricsWindowStatus="{x:Bind ViewModel.LiveStates.LyricsWindowStatus, Mode=OneWay}" />
                 </controls:Case>
 
                 <!--  Layout  -->
@@ -411,7 +273,12 @@
 
                 <!--  Album art area style  -->
                 <controls:Case Value="AlbumArtStyle">
-                    <uc:AlbumArtLayoutSettingsControl AlbumArtLayoutSettings="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.AlbumArtLayoutSettings, Mode=OneWay}" />
+                    <uc:AlbumArtAreaStyleSettingsControl AlbumArtLayoutSettings="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.AlbumArtLayoutSettings, Mode=OneWay}" />
+                </controls:Case>
+
+                <!--  Album art area effect  -->
+                <controls:Case Value="AlbumArtEffect">
+                    <uc:AlbumArtAreaEffectSettingsControl AlbumArtAreaEffectSettings="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.AlbumArtAreaEffectSettings, Mode=OneWay}" />
                 </controls:Case>
 
                 <!--  Lyrics style  -->

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Controls/ShadowImage.xaml

@@ -18,7 +18,7 @@
             HorizontalAlignment="Center"
             VerticalAlignment="Center"
             SizeChanged="ShadowCastGrid_SizeChanged">
-            <Image Source="{x:Bind ImageSource, Mode=OneWay}" Stretch="Uniform" />
+            <Image Source="{x:Bind Source, Mode=OneWay}" Stretch="Uniform" />
         </Grid>
         <Border
             x:Name="ShadowRect"

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Controls/ShadowImage.xaml.cs

@@ -38,14 +38,14 @@ namespace BetterLyrics.WinUI3.Controls
         public static readonly DependencyProperty ShadowAmountProperty =
             DependencyProperty.Register(nameof(ShadowAmount), typeof(int), typeof(ShadowImage), new PropertyMetadata(0, OnDependencyPropertyChanged));
 
-        public ImageSource? ImageSource
+        public ImageSource? Source
         {
-            get { return (ImageSource?)GetValue(ImageSourceProperty); }
-            set { SetValue(ImageSourceProperty, value); }
+            get { return (ImageSource?)GetValue(SourceProperty); }
+            set { SetValue(SourceProperty, value); }
         }
 
-        public static readonly DependencyProperty ImageSourceProperty =
-            DependencyProperty.Register(nameof(ImageSource), typeof(ImageSource), typeof(ShadowImage), new PropertyMetadata(null));
+        public static readonly DependencyProperty SourceProperty =
+            DependencyProperty.Register(nameof(Source), typeof(ImageSource), typeof(ShadowImage), new PropertyMetadata(null));
 
         public ShadowImage()
         {

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Controls/WindowSettingsControl.xaml

@@ -0,0 +1,164 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<UserControl
+    x:Class="BetterLyrics.WinUI3.Controls.WindowSettingsControl"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:dev="using:DevWinUI"
+    xmlns:local="using:BetterLyrics.WinUI3.Controls"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:ui="using:CommunityToolkit.WinUI"
+    mc:Ignorable="d">
+
+    <Grid>
+        <ScrollViewer Style="{StaticResource SettingsScrollViewerStyle}">
+            <Grid Style="{StaticResource SettingsGridStyle}">
+                <StackPanel Spacing="{StaticResource SettingsCardSpacing}">
+
+                    <TextBlock x:Uid="AppSettingsControlGeneral" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
+
+                    <dev:SettingsCard x:Uid="SettingsPageConfigName" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE8AC;}">
+                        <StackPanel
+                            Margin="0,6,0,0"
+                            Orientation="Horizontal"
+                            Spacing="6">
+                            <TextBox Text="{x:Bind LyricsWindowStatus.Name, Mode=TwoWay}" TextWrapping="Wrap" />
+                            <Button Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, FontSize=12, Glyph=&#xE8FB;}" Style="{StaticResource GhostButtonStyle}" />
+                        </StackPanel>
+                    </dev:SettingsCard>
+
+                    <dev:SettingsExpander
+                        x:Uid="SettingsPageWorkArea"
+                        HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
+                                                 Glyph=&#xE78B;}"
+                        IsExpanded="{x:Bind LyricsWindowStatus.IsWorkArea, Mode=OneWay}">
+                        <ToggleSwitch IsOn="{x:Bind LyricsWindowStatus.IsWorkArea, Mode=TwoWay}" />
+                        <dev:SettingsExpander.Items>
+                            <dev:SettingsCard x:Uid="SettingsPageWorkAreaHeight" IsEnabled="{x:Bind LyricsWindowStatus.IsWorkArea, Mode=OneWay}">
+                                <local:ExtendedSlider
+                                    Default="64"
+                                    Maximum="{x:Bind LyricsWindowStatus.MonitorBounds.Height, Mode=OneWay}"
+                                    Minimum="64"
+                                    Unit="px"
+                                    Value="{x:Bind LyricsWindowStatus.DockHeight, Mode=TwoWay}" />
+                            </dev:SettingsCard>
+
+                            <dev:SettingsCard x:Uid="SettingsPageDockPlacement" IsEnabled="{x:Bind LyricsWindowStatus.IsWorkArea, Mode=OneWay}">
+                                <ComboBox SelectedIndex="{x:Bind LyricsWindowStatus.DockPlacement, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
+                                    <ComboBoxItem x:Uid="SettingsPageDockPlacementTop" />
+                                    <ComboBoxItem x:Uid="SettingsPageDockPlacementBottom" />
+                                </ComboBox>
+                            </dev:SettingsCard>
+
+                            <dev:SettingsCard x:Uid="SettingsPageDockMonitor" IsEnabled="{x:Bind LyricsWindowStatus.IsWorkArea, Mode=OneWay}">
+                                <StackPanel Orientation="Horizontal" Spacing="6">
+                                    <ComboBox ItemsSource="{x:Bind MonitorDeviceNames, Mode=OneWay}" SelectedItem="{x:Bind LyricsWindowStatus.MonitorDeviceName, Mode=TwoWay}" />
+                                    <Button
+                                        Click="RefreshMonitorButton_Click"
+                                        Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
+                                                              FontSize=12,
+                                                              Glyph=&#xE72C;}"
+                                        Style="{StaticResource GhostButtonStyle}" />
+                                </StackPanel>
+                            </dev:SettingsCard>
+
+                        </dev:SettingsExpander.Items>
+                    </dev:SettingsExpander>
+
+                    <dev:SettingsExpander
+                        x:Uid="SettingsPageAdaptEnvColor"
+                        HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
+                                                 Glyph=&#xE88F;}"
+                        IsExpanded="{x:Bind LyricsWindowStatus.IsAdaptToEnvironment, Mode=OneWay}">
+                        <ToggleSwitch IsOn="{x:Bind LyricsWindowStatus.IsAdaptToEnvironment, Mode=TwoWay}" />
+                        <dev:SettingsExpander.Items>
+                            <dev:SettingsCard
+                                x:Uid="SettingsPageEnvColorSample"
+                                Header="Environment color sample mode"
+                                IsEnabled="{x:Bind LyricsWindowStatus.IsAdaptToEnvironment, Mode=OneWay}">
+                                <ComboBox SelectedIndex="{x:Bind LyricsWindowStatus.EnvironmentSampleMode, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
+                                    <ComboBoxItem x:Uid="SettingsPageEnvColorSampleBelow" />
+                                    <ComboBoxItem x:Uid="SettingsPageEnvColorSampleAbove" />
+                                    <ComboBoxItem x:Uid="SettingsPageEnvColorSampleInner" />
+                                    <ComboBoxItem x:Uid="SettingsPageEnvColorSampleEdge" />
+                                </ComboBox>
+                            </dev:SettingsCard>
+                        </dev:SettingsExpander.Items>
+                    </dev:SettingsExpander>
+
+                    <dev:SettingsExpander
+                        x:Uid="SettingsPageWindowBounds"
+                        HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
+                                                 Glyph=&#xF16B;}"
+                        IsExpanded="True">
+                        <dev:SettingsExpander.Items>
+                            <dev:SettingsCard Header="X">
+                                <NumberBox
+                                    SmallChange="10"
+                                    SpinButtonPlacementMode="Inline"
+                                    Value="{x:Bind LyricsWindowStatus.WindowX, Mode=TwoWay}" />
+                            </dev:SettingsCard>
+                            <dev:SettingsCard Header="Y">
+                                <NumberBox
+                                    SmallChange="10"
+                                    SpinButtonPlacementMode="Inline"
+                                    Value="{x:Bind LyricsWindowStatus.WindowY, Mode=TwoWay}" />
+                            </dev:SettingsCard>
+                            <dev:SettingsCard x:Uid="SettingsPageWidth">
+                                <NumberBox
+                                    SmallChange="10"
+                                    SpinButtonPlacementMode="Inline"
+                                    Value="{x:Bind LyricsWindowStatus.WindowWidth, Mode=TwoWay}" />
+                            </dev:SettingsCard>
+                            <dev:SettingsCard x:Uid="SettingsPageHeight">
+                                <NumberBox
+                                    SmallChange="10"
+                                    SpinButtonPlacementMode="Inline"
+                                    Value="{x:Bind LyricsWindowStatus.WindowHeight, Mode=TwoWay}" />
+                            </dev:SettingsCard>
+                        </dev:SettingsExpander.Items>
+                    </dev:SettingsExpander>
+
+                    <dev:SettingsExpander
+                        x:Uid="SettingsPageAOT"
+                        HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
+                                                 Glyph=&#xE718;}"
+                        IsExpanded="True">
+                        <ToggleSwitch IsOn="{x:Bind LyricsWindowStatus.IsAlwaysOnTop, Mode=TwoWay}" />
+                        <dev:SettingsExpander.Items>
+                            <dev:SettingsCard x:Uid="SettingsPageForceAlwaysOnTop" IsEnabled="{x:Bind LyricsWindowStatus.IsAlwaysOnTop, Mode=OneWay}">
+                                <ToggleSwitch IsOn="{x:Bind LyricsWindowStatus.IsAlwaysOnTopPolling, Mode=TwoWay}" />
+                            </dev:SettingsCard>
+                        </dev:SettingsExpander.Items>
+                    </dev:SettingsExpander>
+
+                    <dev:SettingsCard x:Uid="SettingsPageHideWindow" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xED1A;}">
+                        <ToggleSwitch IsOn="{x:Bind LyricsWindowStatus.AutoShowOrHideWindow, Mode=TwoWay}" />
+                    </dev:SettingsCard>
+
+                    <dev:SettingsCard x:Uid="SettingsPageShowInSwitchers" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE7C4;}">
+                        <ToggleSwitch IsOn="{x:Bind LyricsWindowStatus.IsShownInSwitchers, Mode=TwoWay}" />
+                    </dev:SettingsCard>
+
+                    <dev:SettingsCard x:Uid="SettingsPageClickThrough" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE7C9;}">
+                        <ToggleSwitch IsOn="{x:Bind LyricsWindowStatus.IsClickThrough, Mode=TwoWay}" />
+                    </dev:SettingsCard>
+
+                    <dev:SettingsCard x:Uid="SettingsPageBorderless" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE8B2;}">
+                        <ToggleSwitch IsOn="{x:Bind LyricsWindowStatus.IsBorderless, Mode=TwoWay}" />
+                    </dev:SettingsCard>
+
+                    <dev:SettingsCard x:Uid="SettingsPageDragArea" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xEB41;}">
+                        <ComboBox SelectedIndex="{x:Bind LyricsWindowStatus.TitleBarArea, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
+                            <ComboBoxItem x:Uid="SettingsPageTitleBarAreaNone" />
+                            <ComboBoxItem x:Uid="SettingsPageTitleBarAreaTop" />
+                            <ComboBoxItem x:Uid="SettingsPageTitleBarAreaWhole" />
+                        </ComboBox>
+                    </dev:SettingsCard>
+
+                </StackPanel>
+            </Grid>
+        </ScrollViewer>
+
+    </Grid>
+</UserControl>

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Controls/WindowSettingsControl.xaml.cs

@@ -0,0 +1,56 @@
+using BetterLyrics.WinUI3.Hooks;
+using BetterLyrics.WinUI3.Models;
+using BetterLyrics.WinUI3.Models.Settings;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Controls.Primitives;
+using Microsoft.UI.Xaml.Data;
+using Microsoft.UI.Xaml.Input;
+using Microsoft.UI.Xaml.Media;
+using Microsoft.UI.Xaml.Navigation;
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+
+// 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.Controls;
+
+public sealed partial class WindowSettingsControl : UserControl
+{
+    public static readonly DependencyProperty LyricsWindowStatusProperty =
+        DependencyProperty.Register(nameof(LyricsWindowStatus), typeof(AlbumArtAreaEffectSettings), typeof(WindowSettingsControl), new PropertyMetadata(default));
+
+    public LyricsWindowStatus LyricsWindowStatus
+    {
+        get => (LyricsWindowStatus)GetValue(LyricsWindowStatusProperty);
+        set => SetValue(LyricsWindowStatusProperty, value);
+    }
+
+    public ObservableCollection<string> MonitorDeviceNames { get; set; } = [];
+
+    public WindowSettingsControl()
+    {
+        InitializeComponent();
+        MonitorDeviceNames = [.. MonitorHook.GetAllMonitorDeviceNames()];
+    }
+
+    private void RefreshMonitorDeviceNames()
+    {
+        MonitorDeviceNames = [.. MonitorHook.GetAllMonitorDeviceNames()];
+        LyricsWindowStatus.MonitorDeviceName = MonitorDeviceNames.FirstOrDefault() ?? "";
+    }
+
+    private void RefreshMonitorButton_Click(object sender, RoutedEventArgs e)
+    {
+        RefreshMonitorDeviceNames();
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Enums/ImageSwitchType.cs

@@ -0,0 +1,12 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+
+namespace BetterLyrics.WinUI3.Enums
+{
+    public enum ImageSwitchType
+    {
+        Crossfade,
+        Slide
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Models/LyricsWindowStatus.cs

@@ -30,7 +30,8 @@ namespace BetterLyrics.WinUI3.Models
         [ObservableProperty] public partial LyricsStyleSettings LyricsStyleSettings { get; set; } = new();
         [ObservableProperty] public partial LyricsEffectSettings LyricsEffectSettings { get; set; } = new(500, 500, 500, EasingType.EaseInOutQuad);
         [ObservableProperty][NotifyPropertyChangedRecipients] public partial LyricsBackgroundSettings LyricsBackgroundSettings { get; set; } = new();
-        [ObservableProperty][NotifyPropertyChangedRecipients] public partial AlbumArtLayoutSettings AlbumArtLayoutSettings { get; set; } = new();
+        [ObservableProperty][NotifyPropertyChangedRecipients] public partial AlbumArtAreaStyleSettings AlbumArtLayoutSettings { get; set; } = new();
+        [ObservableProperty] public partial AlbumArtAreaEffectSettings AlbumArtAreaEffectSettings { get; set; } = new();
         [ObservableProperty][NotifyPropertyChangedRecipients] public partial bool IsAdaptToEnvironment { get; set; } = false;
         [ObservableProperty][NotifyPropertyChangedRecipients] public partial WindowPixelSampleMode EnvironmentSampleMode { get; set; } = WindowPixelSampleMode.WindowEdge;
         [ObservableProperty][NotifyPropertyChangedRecipients] public partial bool AutoShowOrHideWindow { get; set; } = false;
@@ -65,7 +66,7 @@ namespace BetterLyrics.WinUI3.Models
             newValue.PropertyChanged += OldLyricsBackgroundSettings_PropertyChanged;
         }
 
-        partial void OnAlbumArtLayoutSettingsChanged(AlbumArtLayoutSettings oldValue, AlbumArtLayoutSettings newValue)
+        partial void OnAlbumArtLayoutSettingsChanged(AlbumArtAreaStyleSettings oldValue, AlbumArtAreaStyleSettings newValue)
         {
             oldValue.PropertyChanged -= OldAlbumArtLayoutSettings_PropertyChanged;
             newValue.PropertyChanged += OldAlbumArtLayoutSettings_PropertyChanged;
@@ -184,10 +185,13 @@ namespace BetterLyrics.WinUI3.Models
                 MonitorBounds = this.MonitorBounds,
                 DemoMonitorBounds = this.DemoMonitorBounds,
                 DockPlacement = this.DockPlacement,
+
                 LyricsStyleSettings = (LyricsStyleSettings)this.LyricsStyleSettings.Clone(),
                 LyricsEffectSettings = (LyricsEffectSettings)this.LyricsEffectSettings.Clone(),
                 LyricsBackgroundSettings = (LyricsBackgroundSettings)this.LyricsBackgroundSettings.Clone(),
-                AlbumArtLayoutSettings = (AlbumArtLayoutSettings)this.AlbumArtLayoutSettings.Clone(),
+                AlbumArtLayoutSettings = (AlbumArtAreaStyleSettings)this.AlbumArtLayoutSettings.Clone(),
+                AlbumArtAreaEffectSettings = (AlbumArtAreaEffectSettings)this.AlbumArtAreaEffectSettings.Clone(),
+
                 IsAdaptToEnvironment = this.IsAdaptToEnvironment,
                 EnvironmentSampleMode = this.EnvironmentSampleMode,
                 AutoShowOrHideWindow = this.AutoShowOrHideWindow,

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Models/Settings/AlbumArtAreaEffectSettings.cs

@@ -0,0 +1,21 @@
+using BetterLyrics.WinUI3.Enums;
+using CommunityToolkit.Mvvm.ComponentModel;
+using System;
+using System.Collections.Generic;
+using System.Text;
+
+namespace BetterLyrics.WinUI3.Models.Settings
+{
+    public partial class AlbumArtAreaEffectSettings : ObservableRecipient, ICloneable
+    {
+        [ObservableProperty][NotifyPropertyChangedRecipients] public partial ImageSwitchType ImageSwitchType { get; set; } = ImageSwitchType.Slide;
+
+        public object Clone()
+        {
+            return new AlbumArtAreaEffectSettings()
+            {
+                ImageSwitchType = this.ImageSwitchType,
+            };
+        }
+    }
+}

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Models/Settings/AlbumArtAreaStyleSettings.cs

@@ -4,7 +4,7 @@ using System;
 
 namespace BetterLyrics.WinUI3.Models.Settings
 {
-    public partial class AlbumArtLayoutSettings : ObservableRecipient, ICloneable
+    public partial class AlbumArtAreaStyleSettings : ObservableRecipient, ICloneable
     {
         [ObservableProperty][NotifyPropertyChangedRecipients] public partial TextAlignmentType SongInfoAlignmentType { get; set; } = TextAlignmentType.Left;
 
@@ -19,11 +19,11 @@ namespace BetterLyrics.WinUI3.Models.Settings
         [ObservableProperty][NotifyPropertyChangedRecipients] public partial bool ShowArtists { get; set; } = true;
         [ObservableProperty][NotifyPropertyChangedRecipients] public partial bool ShowAlbum { get; set; } = false;
 
-        public AlbumArtLayoutSettings() { }
+        public AlbumArtAreaStyleSettings() { }
 
         public object Clone()
         {
-            return new AlbumArtLayoutSettings
+            return new AlbumArtAreaStyleSettings
             {
                 SongInfoAlignmentType = this.SongInfoAlignmentType,
 

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

@@ -594,6 +594,9 @@
   <data name="SettingsPageAlbumArtSize.Header" xml:space="preserve">
     <value>Album art size</value>
   </data>
+  <data name="SettingsPageAlbumEffect.Text" xml:space="preserve">
+    <value>Album art area effect</value>
+  </data>
   <data name="SettingsPageAlbumLib.Content" xml:space="preserve">
     <value>Album art source</value>
   </data>
@@ -720,6 +723,9 @@
   <data name="SettingsPageCreateFromTemplates.Content" xml:space="preserve">
     <value>Create from templates</value>
   </data>
+  <data name="SettingsPageCrossfade.Content" xml:space="preserve">
+    <value>Crossfade</value>
+  </data>
   <data name="SettingsPageCurrentLyricsWindowStatus.Text" xml:space="preserve">
     <value>Current lyrics window status</value>
   </data>
@@ -891,6 +897,9 @@
   <data name="SettingsPageHorizontalLayoutFactor.Text" xml:space="preserve">
     <value>Horizontal layout factor</value>
   </data>
+  <data name="SettingsPageImageSwitchType.Header" xml:space="preserve">
+    <value>Album art toggle animation</value>
+  </data>
   <data name="SettingsPageImport.Content" xml:space="preserve">
     <value>Import</value>
   </data>
@@ -1389,6 +1398,9 @@
   <data name="SettingsPageShowTitle.Header" xml:space="preserve">
     <value>Show title</value>
   </data>
+  <data name="SettingsPageSlide.Content" xml:space="preserve">
+    <value>Slide</value>
+  </data>
   <data name="SettingsPageSliderPrefix.Text" xml:space="preserve">
     <value>Current value: </value>
   </data>

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Strings/ja-JP/Resources.resw

@@ -594,6 +594,9 @@
   <data name="SettingsPageAlbumArtSize.Header" xml:space="preserve">
     <value>アルバムアートサイズ</value>
   </data>
+  <data name="SettingsPageAlbumEffect.Text" xml:space="preserve">
+    <value>アルバムリージョンアニメーション</value>
+  </data>
   <data name="SettingsPageAlbumLib.Content" xml:space="preserve">
     <value>アルバムアートソース</value>
   </data>
@@ -720,6 +723,9 @@
   <data name="SettingsPageCreateFromTemplates.Content" xml:space="preserve">
     <value>テンプレートから作成</value>
   </data>
+  <data name="SettingsPageCrossfade.Content" xml:space="preserve">
+    <value>クロスフェード</value>
+  </data>
   <data name="SettingsPageCurrentLyricsWindowStatus.Text" xml:space="preserve">
     <value>現在の歌詞ウィンドウステータス</value>
   </data>
@@ -891,6 +897,9 @@
   <data name="SettingsPageHorizontalLayoutFactor.Text" xml:space="preserve">
     <value>水平レイアウト係数</value>
   </data>
+  <data name="SettingsPageImageSwitchType.Header" xml:space="preserve">
+    <value>アルバムダイアグラムアニメーションの切り替え</value>
+  </data>
   <data name="SettingsPageImport.Content" xml:space="preserve">
     <value>インポート</value>
   </data>
@@ -1389,6 +1398,9 @@
   <data name="SettingsPageShowTitle.Header" xml:space="preserve">
     <value>タイトルを表示</value>
   </data>
+  <data name="SettingsPageSlide.Content" xml:space="preserve">
+    <value>スライド</value>
+  </data>
   <data name="SettingsPageSliderPrefix.Text" xml:space="preserve">
     <value>現在の値： </value>
   </data>

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Strings/ko-KR/Resources.resw

@@ -594,6 +594,9 @@
   <data name="SettingsPageAlbumArtSize.Header" xml:space="preserve">
     <value>앨범 아트 크기</value>
   </data>
+  <data name="SettingsPageAlbumEffect.Text" xml:space="preserve">
+    <value>앨범 지역 애니메이션</value>
+  </data>
   <data name="SettingsPageAlbumLib.Content" xml:space="preserve">
     <value>앨범 아트 소스</value>
   </data>
@@ -720,6 +723,9 @@
   <data name="SettingsPageCreateFromTemplates.Content" xml:space="preserve">
     <value>템플릿에서 만들기</value>
   </data>
+  <data name="SettingsPageCrossfade.Content" xml:space="preserve">
+    <value>크로스 페이드</value>
+  </data>
   <data name="SettingsPageCurrentLyricsWindowStatus.Text" xml:space="preserve">
     <value>현재 가사 창 상태</value>
   </data>
@@ -891,6 +897,9 @@
   <data name="SettingsPageHorizontalLayoutFactor.Text" xml:space="preserve">
     <value>수평 레이아웃 요소</value>
   </data>
+  <data name="SettingsPageImageSwitchType.Header" xml:space="preserve">
+    <value>앨범 다이어그램 토글 애니메이션</value>
+  </data>
   <data name="SettingsPageImport.Content" xml:space="preserve">
     <value>가져오기</value>
   </data>
@@ -1389,6 +1398,9 @@
   <data name="SettingsPageShowTitle.Header" xml:space="preserve">
     <value>제목 표시</value>
   </data>
+  <data name="SettingsPageSlide.Content" xml:space="preserve">
+    <value>살짝 밀기</value>
+  </data>
   <data name="SettingsPageSliderPrefix.Text" xml:space="preserve">
     <value>현재 가치 : </value>
   </data>

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

@@ -594,6 +594,9 @@
   <data name="SettingsPageAlbumArtSize.Header" xml:space="preserve">
     <value>专辑封面尺寸</value>
   </data>
+  <data name="SettingsPageAlbumEffect.Text" xml:space="preserve">
+    <value>专辑区域动效</value>
+  </data>
   <data name="SettingsPageAlbumLib.Content" xml:space="preserve">
     <value>专辑封面源</value>
   </data>
@@ -720,6 +723,9 @@
   <data name="SettingsPageCreateFromTemplates.Content" xml:space="preserve">
     <value>从模板创建</value>
   </data>
+  <data name="SettingsPageCrossfade.Content" xml:space="preserve">
+    <value>交叉淡入淡出</value>
+  </data>
   <data name="SettingsPageCurrentLyricsWindowStatus.Text" xml:space="preserve">
     <value>当前歌词窗口状态</value>
   </data>
@@ -891,6 +897,9 @@
   <data name="SettingsPageHorizontalLayoutFactor.Text" xml:space="preserve">
     <value>水平布局系数</value>
   </data>
+  <data name="SettingsPageImageSwitchType.Header" xml:space="preserve">
+    <value>专辑图切换动画</value>
+  </data>
   <data name="SettingsPageImport.Content" xml:space="preserve">
     <value>导入</value>
   </data>
@@ -1389,6 +1398,9 @@
   <data name="SettingsPageShowTitle.Header" xml:space="preserve">
     <value>显示标题</value>
   </data>
+  <data name="SettingsPageSlide.Content" xml:space="preserve">
+    <value>滑动</value>
+  </data>
   <data name="SettingsPageSliderPrefix.Text" xml:space="preserve">
     <value>当前值： </value>
   </data>

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

@@ -594,6 +594,9 @@
   <data name="SettingsPageAlbumArtSize.Header" xml:space="preserve">
     <value>相簿藝術尺寸</value>
   </data>
+  <data name="SettingsPageAlbumEffect.Text" xml:space="preserve">
+    <value>專輯區域動效</value>
+  </data>
   <data name="SettingsPageAlbumLib.Content" xml:space="preserve">
     <value>專輯封面來源</value>
   </data>
@@ -720,6 +723,9 @@
   <data name="SettingsPageCreateFromTemplates.Content" xml:space="preserve">
     <value>從範本建立</value>
   </data>
+  <data name="SettingsPageCrossfade.Content" xml:space="preserve">
+    <value>交叉淡入淡出</value>
+  </data>
   <data name="SettingsPageCurrentLyricsWindowStatus.Text" xml:space="preserve">
     <value>當前歌詞窗口狀態</value>
   </data>
@@ -891,6 +897,9 @@
   <data name="SettingsPageHorizontalLayoutFactor.Text" xml:space="preserve">
     <value>水平布局系數</value>
   </data>
+  <data name="SettingsPageImageSwitchType.Header" xml:space="preserve">
+    <value>專輯圖切換動畫</value>
+  </data>
   <data name="SettingsPageImport.Content" xml:space="preserve">
     <value>匯入</value>
   </data>
@@ -1389,6 +1398,9 @@
   <data name="SettingsPageShowTitle.Header" xml:space="preserve">
     <value>顯示標題</value>
   </data>
+  <data name="SettingsPageSlide.Content" xml:space="preserve">
+    <value>滑動</value>
+  </data>
   <data name="SettingsPageSliderPrefix.Text" xml:space="preserve">
     <value>目前值： </value>
   </data>

BetterLyrics.WinUI3/BetterLyrics.WinUI3/ViewModels/LyricsWindowSettingsControlViewModel.cs

@@ -26,9 +26,6 @@ namespace BetterLyrics.WinUI3.ViewModels
         [ObservableProperty]
         public partial object ListViewSelectedItemTag { get; set; } = "General";
 
-        [ObservableProperty]
-        public partial ObservableCollection<string> MonitorDeviceNames { get; set; }
-
         [ObservableProperty]
         public partial bool IsConfigPanelOpened { get; set; } = false;
 
@@ -45,14 +42,6 @@ namespace BetterLyrics.WinUI3.ViewModels
 
             AppSettings = _settingsService.AppSettings;
             LiveStates = _liveStatesService.LiveStates;
-            MonitorDeviceNames = [.. MonitorHook.GetAllMonitorDeviceNames()];
-        }
-
-        [RelayCommand]
-        private void RefreshMonitorDeviceNames()
-        {
-            MonitorDeviceNames = [.. MonitorHook.GetAllMonitorDeviceNames()];
-            LiveStates.LyricsWindowStatus?.MonitorDeviceName = MonitorDeviceNames.FirstOrDefault() ?? "";
         }
 
         [RelayCommand]

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Views/NowPlayingPage.xaml

@@ -70,18 +70,11 @@
                     <Grid.OpacityTransition>
                         <ScalarTransition Duration="{x:Bind const:Time.AnimationDuration}" />
                     </Grid.OpacityTransition>
-                    <uc:ShadowImage
-                        x:Name="LastAlbumArtImage"
-                        HorizontalAlignment="Center"
-                        VerticalAlignment="Center"
+                    <uc:ImageSwitcher
                         CornerRadiusAmount="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.AlbumArtLayoutSettings.CoverImageRadius, Mode=OneWay}"
-                        ShadowAmount="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.AlbumArtLayoutSettings.CoverImageShadowAmount, Mode=OneWay}" />
-                    <uc:ShadowImage
-                        x:Name="AlbumArtImage"
-                        HorizontalAlignment="Center"
-                        VerticalAlignment="Center"
-                        CornerRadiusAmount="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.AlbumArtLayoutSettings.CoverImageRadius, Mode=OneWay}"
-                        ShadowAmount="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.AlbumArtLayoutSettings.CoverImageShadowAmount, Mode=OneWay}" />
+                        ShadowAmount="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.AlbumArtLayoutSettings.CoverImageShadowAmount, Mode=OneWay}"
+                        Source="{x:Bind ViewModel.MediaSessionsService.AlbumArtBitmapImage, Mode=OneWay}"
+                        SwitchType="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.AlbumArtAreaEffectSettings.ImageSwitchType, Mode=OneWay}" />
                 </Grid>
 
                 <!--  Song info  -->

BetterLyrics.WinUI3/BetterLyrics.WinUI3/Views/NowPlayingPage.xaml.cs

@@ -30,7 +30,6 @@ namespace BetterLyrics.WinUI3.Views
         IRecipient<PropertyChangedMessage<bool>>,
         IRecipient<PropertyChangedMessage<string>>,
         IRecipient<PropertyChangedMessage<SongInfo?>>,
-        IRecipient<PropertyChangedMessage<BitmapImage?>>,
         IRecipient<PropertyChangedMessage<LyricsLayoutOrientation>>,
         IRecipient<PropertyChangedMessage<LyricsDisplayType>>,
         IRecipient<PropertyChangedMessage<AlbumArtThemeColors>>,
@@ -54,7 +53,6 @@ namespace BetterLyrics.WinUI3.Views
             WeakReferenceMessenger.Default.Register<PropertyChangedMessage<bool>>(this);
             WeakReferenceMessenger.Default.Register<PropertyChangedMessage<string>>(this);
             WeakReferenceMessenger.Default.Register<PropertyChangedMessage<SongInfo?>>(this);
-            WeakReferenceMessenger.Default.Register<PropertyChangedMessage<BitmapImage?>>(this);
             WeakReferenceMessenger.Default.Register<PropertyChangedMessage<LyricsLayoutOrientation>>(this);
             WeakReferenceMessenger.Default.Register<PropertyChangedMessage<LyricsDisplayType>>(this);
             WeakReferenceMessenger.Default.Register<PropertyChangedMessage<AlbumArtThemeColors>>(this);
@@ -688,13 +686,13 @@ namespace BetterLyrics.WinUI3.Views
 
         public void Receive(PropertyChangedMessage<int> message)
         {
-            if (message.Sender is AlbumArtLayoutSettings)
+            if (message.Sender is AlbumArtAreaStyleSettings)
             {
-                if (message.PropertyName == nameof(AlbumArtLayoutSettings.SongInfoFontSize))
+                if (message.PropertyName == nameof(AlbumArtAreaStyleSettings.SongInfoFontSize))
                 {
                     RenderSongInfo();
                 }
-                else if (message.PropertyName == nameof(AlbumArtLayoutSettings.CoverImageHeight))
+                else if (message.PropertyName == nameof(AlbumArtAreaStyleSettings.CoverImageHeight))
                 {
                     OnLayoutChanged();
                 }
@@ -703,13 +701,13 @@ namespace BetterLyrics.WinUI3.Views
 
         public void Receive(PropertyChangedMessage<bool> message)
         {
-            if (message.Sender is AlbumArtLayoutSettings)
+            if (message.Sender is AlbumArtAreaStyleSettings)
             {
-                if (message.PropertyName == nameof(AlbumArtLayoutSettings.IsAutoSongInfoFontSize))
+                if (message.PropertyName == nameof(AlbumArtAreaStyleSettings.IsAutoSongInfoFontSize))
                 {
                     RenderSongInfo();
                 }
-                else if (message.PropertyName == nameof(AlbumArtLayoutSettings.IsAutoCoverImageHeight))
+                else if (message.PropertyName == nameof(AlbumArtAreaStyleSettings.IsAutoCoverImageHeight))
                 {
                     OnLayoutChanged();
                 }
@@ -746,26 +744,6 @@ namespace BetterLyrics.WinUI3.Views
             }
         }
 
-        public async void Receive(PropertyChangedMessage<BitmapImage?> message)
-        {
-            if (message.Sender is IMediaSessionsService)
-            {
-                if (message.PropertyName == nameof(IMediaSessionsService.AlbumArtBitmapImage))
-                {
-                    LastAlbumArtImage.ImageSource = AlbumArtImage.ImageSource;
-                    LastAlbumArtImage.Opacity = 1;
-                    await Task.Delay(Constants.Time.AnimationDuration);
-
-                    AlbumArtImage.Opacity = 0;
-                    await Task.Delay(Constants.Time.AnimationDuration);
-                    AlbumArtImage.ImageSource = message.NewValue;
-
-                    LastAlbumArtImage.Opacity = 0;
-                    AlbumArtImage.Opacity = 1;
-                }
-            }
-        }
-
         public void Receive(PropertyChangedMessage<LyricsLayoutOrientation> message)
         {
             if (message.Sender is LyricsWindowStatus)