fix: NowPlayingWIndow titlebar and lock/unlock button

2026-01-12 10:54:55 +08:00 · 2025-12-09 10:22:34 -05:00
parent 315c10c83c
commit 2defe620c7
6 changed files with 214 additions and 133 deletions
--- a/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Controls/NowPlayingBar.xaml
+++ b/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Controls/NowPlayingBar.xaml
@@ -10,11 +10,11 @@
    xmlns:ui="using:CommunityToolkit.WinUI"
    mc:Ignorable="d">

-    <Grid x:Name="RootGrid" Background="{x:Bind Background, Mode=OneWay}">
+    <Grid x:Name="RootGrid">

        <Grid
            x:Name="BottomCommandGrid"
-            Background="Transparent"
+            Background="{ThemeResource AcrylicInAppFillColorDefaultBrush}"
            Opacity="{x:Bind ViewModel.BottomCommandGridOpacity, Mode=OneWay}"
            PointerEntered="BottomCommandGrid_PointerEntered"
            PointerExited="BottomCommandGrid_PointerExited">
@@ -417,7 +417,7 @@
                    <Flyout.FlyoutPresenterStyle>
                        <Style TargetType="FlyoutPresenter">
                            <Setter Property="Padding" Value="0" />
-                            <Setter Property="MinWidth" Value="500" />
+                            <Setter Property="MinWidth" Value="400" />
                            <Setter Property="MinHeight" Value="100" />
                            <Setter Property="CornerRadius" Value="12" />
                        </Style>
--- a/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Services/MediaSessionsService/IMediaSessionsService.cs
+++ b/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Services/MediaSessionsService/IMediaSessionsService.cs
@@ -28,10 +28,9 @@ namespace BetterLyrics.WinUI3.Services.MediaSessionsService
        TimeSpan CurrentPosition { get; }
        LyricsData? CurrentLyricsData { get; }

-        BitmapDecoder? AlbumArtBitmapDecoder { get; }
        BitmapImage? AlbumArtBitmapImage { get; }

-        Task<AlbumArtThemeColors> CalculateAlbumArtThemeColorsAsync(LyricsWindowStatus lyricsWindowStatus, Color backdropAccentColor);
+        AlbumArtThemeColors CalculateAlbumArtThemeColors(LyricsWindowStatus lyricsWindowStatus, Color backdropAccentColor);

        LyricsSearchResult? CurrentLyricsSearchResult { get; }
    }
--- a/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Services/MediaSessionsService/MediaSessionsService.AlbumArtUpdater.cs
+++ b/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Services/MediaSessionsService/MediaSessionsService.AlbumArtUpdater.cs
@@ -12,6 +12,7 @@ using System.Collections.Generic;
 using System.Linq;
 using System.Threading;
 using System.Threading.Tasks;
+using Vanara.PInvoke;
 using Windows.Graphics.Imaging;
 using Windows.Storage.Streams;
 using Windows.UI;
@@ -21,8 +22,14 @@ namespace BetterLyrics.WinUI3.Services.MediaSessionsService
    public partial class MediaSessionsService : IMediaSessionsService
    {
        private readonly LatestOnlyTaskRunner _albumArtRefreshRunner = new();
+        
+        private List<Color> _lightAccentColorsMedianCut = Enumerable.Repeat(Colors.Black, 4).ToList();
+        private List<Color> _darkAccentColorsMedianCut = Enumerable.Repeat(Colors.Black, 4).ToList();
+        private List<Color> _lightAccentColorsOctTree = Enumerable.Repeat(Colors.Black, 4).ToList();
+        private List<Color> _darkAccentColorsOctTree = Enumerable.Repeat(Colors.Black, 4).ToList();

-        [ObservableProperty][NotifyPropertyChangedRecipients] public partial BitmapDecoder? AlbumArtBitmapDecoder { get; set; }
+        private BitmapDecoder? _albumArtBitmapDecoder = null;
+        
        [ObservableProperty][NotifyPropertyChangedRecipients] public partial BitmapImage? AlbumArtBitmapImage { get; set; }

        private void UpdateAlbumArt()
@@ -53,9 +60,22 @@ namespace BetterLyrics.WinUI3.Services.MediaSessionsService
                buffer = tempBuffer;
            }

-            AlbumArtBitmapDecoder = await ImageHelper.GetBitmapDecoder(buffer);
+            _albumArtBitmapDecoder = await ImageHelper.GetBitmapDecoder(buffer);
            if (token.IsCancellationRequested) return;

+            _lightAccentColorsMedianCut = 
+                (await ImageHelper.GetAccentColorsAsync(_albumArtBitmapDecoder, 4, PaletteGeneratorType.MedianCut, false))
+                .Palette.Select(Helper.ColorHelper.FromVector3).ToList();
+            _darkAccentColorsMedianCut = 
+                (await ImageHelper.GetAccentColorsAsync(_albumArtBitmapDecoder, 4, PaletteGeneratorType.MedianCut, true))
+                .Palette.Select(Helper.ColorHelper.FromVector3).ToList();
+            _lightAccentColorsOctTree = 
+                (await ImageHelper.GetAccentColorsAsync(_albumArtBitmapDecoder, 4, PaletteGeneratorType.OctTree, false))
+                .Palette.Select(Helper.ColorHelper.FromVector3).ToList();
+            _darkAccentColorsOctTree = 
+                (await ImageHelper.GetAccentColorsAsync(_albumArtBitmapDecoder, 4, PaletteGeneratorType.OctTree, true))
+                .Palette.Select(Helper.ColorHelper.FromVector3).ToList();
+
            var bitmapImage = new BitmapImage();
            await bitmapImage.SetSourceAsync(ImageHelper.ToIRandomAccessStream(buffer));
            if (token.IsCancellationRequested) return;
@@ -63,18 +83,20 @@ namespace BetterLyrics.WinUI3.Services.MediaSessionsService
            AlbumArtBitmapImage = bitmapImage;
        }

-        public async Task<AlbumArtThemeColors> CalculateAlbumArtThemeColorsAsync(LyricsWindowStatus lyricsWindowStatus, Color backdropAccentColor)
+        public AlbumArtThemeColors CalculateAlbumArtThemeColors(LyricsWindowStatus lyricsWindowStatus, Color backdropAccentColor)
        {
-            List<Color> lightAccentColors = Enumerable.Repeat(Colors.Black, 4).ToList();
-            List<Color> darkAccentColors = Enumerable.Repeat(Colors.Black, 4).ToList();
-
-            if (AlbumArtBitmapDecoder is BitmapDecoder decoder)
+            var lightAccentColors = lyricsWindowStatus.LyricsBackgroundSettings.PaletteGeneratorType switch
            {
-                var lightPalette = await ImageHelper.GetAccentColorsAsync(AlbumArtBitmapDecoder, 4, lyricsWindowStatus.LyricsBackgroundSettings.PaletteGeneratorType, false);
-                var darkPalette = await ImageHelper.GetAccentColorsAsync(AlbumArtBitmapDecoder, 4, lyricsWindowStatus.LyricsBackgroundSettings.PaletteGeneratorType, true);
-                lightAccentColors = lightPalette.Palette.Select(Helper.ColorHelper.FromVector3).ToList();
-                darkAccentColors = darkPalette.Palette.Select(Helper.ColorHelper.FromVector3).ToList();
-            }
+                PaletteGeneratorType.MedianCut => _lightAccentColorsMedianCut,
+                PaletteGeneratorType.OctTree => _lightAccentColorsOctTree,
+                _ => _lightAccentColorsMedianCut,
+            };
+            var darkAccentColors = lyricsWindowStatus.LyricsBackgroundSettings.PaletteGeneratorType switch
+            {
+                PaletteGeneratorType.MedianCut => _darkAccentColorsMedianCut,
+                PaletteGeneratorType.OctTree => _darkAccentColorsOctTree,
+                _ => _darkAccentColorsMedianCut,
+            };

            var result = new AlbumArtThemeColors();
            result.EnvColor = backdropAccentColor;
@@ -142,56 +164,31 @@ namespace BetterLyrics.WinUI3.Services.MediaSessionsService
            result.ThemeType = themeTypeSent;

            // 背景字色
-            switch (lyricsWindowStatus.LyricsStyleSettings.LyricsBgFontColorType)
+            result.BgFontColor = lyricsWindowStatus.LyricsStyleSettings.LyricsBgFontColorType switch
            {
-                case LyricsFontColorType.AdaptiveGrayed:
-                    result.BgFontColor = adaptiveGrayedFontColor;
-                    break;
-                case LyricsFontColorType.AdaptiveColored:
-                    result.BgFontColor = adaptiveColoredFontColor ?? adaptiveGrayedFontColor;
-                    break;
-                case LyricsFontColorType.Custom:
-                    result.BgFontColor = lyricsWindowStatus.LyricsStyleSettings.LyricsCustomBgFontColor;
-                    break;
-                default:
-                    result.BgFontColor = adaptiveGrayedFontColor;
-                    break;
-            }
+                LyricsFontColorType.AdaptiveGrayed => adaptiveGrayedFontColor,
+                LyricsFontColorType.AdaptiveColored => adaptiveColoredFontColor ?? adaptiveGrayedFontColor,
+                LyricsFontColorType.Custom => lyricsWindowStatus.LyricsStyleSettings.LyricsCustomBgFontColor,
+                _ => adaptiveGrayedFontColor,
+            };

            // 前景字色
-            switch (lyricsWindowStatus.LyricsStyleSettings.LyricsFgFontColorType)
+            result.FgFontColor = lyricsWindowStatus.LyricsStyleSettings.LyricsFgFontColorType switch
            {
-                case LyricsFontColorType.AdaptiveGrayed:
-                    result.FgFontColor = adaptiveGrayedFontColor;
-                    break;
-                case LyricsFontColorType.AdaptiveColored:
-                    result.FgFontColor = adaptiveColoredFontColor ?? adaptiveGrayedFontColor;
-                    break;
-                case LyricsFontColorType.Custom:
-                    result.FgFontColor = lyricsWindowStatus.LyricsStyleSettings.LyricsCustomFgFontColor;
-                    break;
-                default:
-                    result.FgFontColor = adaptiveGrayedFontColor;
-                    break;
-            }
+                LyricsFontColorType.AdaptiveGrayed => adaptiveGrayedFontColor,
+                LyricsFontColorType.AdaptiveColored => adaptiveColoredFontColor ?? adaptiveGrayedFontColor,
+                LyricsFontColorType.Custom => lyricsWindowStatus.LyricsStyleSettings.LyricsCustomFgFontColor,
+                _ => adaptiveGrayedFontColor,
+            };

            // 描边颜色
-            switch (lyricsWindowStatus.LyricsStyleSettings.LyricsStrokeFontColorType)
+            result.StrokeFontColor = lyricsWindowStatus.LyricsStyleSettings.LyricsStrokeFontColorType switch
            {
-                case LyricsFontColorType.AdaptiveGrayed:
-                    result.StrokeFontColor = grayedEnvironmentalColor.WithBrightness(0.7);
-                    break;
-                case LyricsFontColorType.AdaptiveColored:
-                    result.StrokeFontColor = result.EnvColor.WithBrightness(0.7);
-                    break;
-                case LyricsFontColorType.Custom:
-                    result.StrokeFontColor = lyricsWindowStatus.LyricsStyleSettings.LyricsCustomStrokeFontColor;
-                    break;
-                default:
-                    result.StrokeFontColor = Colors.Transparent;
-                    break;
-            }
-
+                LyricsFontColorType.AdaptiveGrayed => grayedEnvironmentalColor.WithBrightness(0.7),
+                LyricsFontColorType.AdaptiveColored => result.EnvColor.WithBrightness(0.7),
+                LyricsFontColorType.Custom => lyricsWindowStatus.LyricsStyleSettings.LyricsCustomStrokeFontColor,
+                _ => Colors.Transparent,
+            };
            return result;
        }

--- a/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Views/MusicGalleryWindow.xaml.cs
+++ b/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Views/MusicGalleryWindow.xaml.cs
@@ -9,6 +9,7 @@ using CommunityToolkit.Mvvm.Messaging.Messages;
 using Microsoft.UI;
 using Microsoft.UI.Windowing;
 using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Media.Imaging;
 using System.Threading.Tasks;
 using Windows.Graphics.Imaging;

@@ -21,7 +22,7 @@ namespace BetterLyrics.WinUI3.Views
    /// An empty window that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MusicGalleryWindow : Window,
-         IRecipient<PropertyChangedMessage<BitmapDecoder?>>,
+         IRecipient<PropertyChangedMessage<BitmapImage?>>,
         IRecipient<PropertyChangedMessage<ElementTheme>>
    {
        public MusicGalleryWindowViewModel ViewModel { get; private set; } = Ioc.Default.GetRequiredService<MusicGalleryWindowViewModel>();
@@ -38,12 +39,12 @@ namespace BetterLyrics.WinUI3.Views

            WeakReferenceMessenger.Default.RegisterAll(this);

-            _ = UpdateAlbumArtThemeColorsAsync();
+            UpdateAlbumArtThemeColors();
        }

-        private async Task UpdateAlbumArtThemeColorsAsync()
+        private void UpdateAlbumArtThemeColors()
        {
-            var result = await _mediaSessionsService.CalculateAlbumArtThemeColorsAsync(
+            var result = _mediaSessionsService.CalculateAlbumArtThemeColors(
                ViewModel.AppSettings.MusicGallerySettings.LyricsWindowStatus, Colors.Transparent);

            NowPlayingPage.AlbumArtThemeColors = result;
@@ -63,27 +64,24 @@ namespace BetterLyrics.WinUI3.Views
            }
        }

-        public async void Receive(PropertyChangedMessage<BitmapDecoder?> message)
+        public void Receive(PropertyChangedMessage<BitmapImage?> message)
        {
            if (message.Sender is IMediaSessionsService)
            {
-                if (message.PropertyName == nameof(IMediaSessionsService.AlbumArtBitmapDecoder))
+                if (message.PropertyName == nameof(IMediaSessionsService.AlbumArtBitmapImage))
                {
-                    if (message.NewValue is BitmapDecoder decoder)
-                    {
-                        await UpdateAlbumArtThemeColorsAsync();
-                    }
+                    UpdateAlbumArtThemeColors();
                }
            }
        }

-        public async void Receive(PropertyChangedMessage<ElementTheme> message)
+        public void Receive(PropertyChangedMessage<ElementTheme> message)
        {
            if (message.Sender == ViewModel.AppSettings.MusicGallerySettings.LyricsWindowStatus.LyricsBackgroundSettings)
            {
                if (message.PropertyName == nameof(LyricsBackgroundSettings.LyricsBackgroundTheme))
                {
-                    await UpdateAlbumArtThemeColorsAsync();
+                    UpdateAlbumArtThemeColors();
                }
            }
        }
--- a/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Views/NowPlayingWindow.xaml
+++ b/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Views/NowPlayingWindow.xaml
@@ -4,6 +4,7 @@
    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:controls="using:CommunityToolkit.WinUI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:BetterLyrics.WinUI3.Views"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
@@ -26,7 +27,7 @@
        <Grid
            x:Name="TopCommandGrid"
            VerticalAlignment="Top"
-            Background="Transparent"
+            Background="{ThemeResource AcrylicInAppFillColorDefaultBrush}"
            Opacity="{x:Bind ViewModel.TopCommandGridOpacity, Mode=OneWay}"
            PointerEntered="TopCommandGrid_PointerEntered"
            PointerExited="TopCommandGrid_PointerExited">
@@ -34,9 +35,11 @@
                <ScalarTransition />
            </Grid.OpacityTransition>

-            <Grid Padding="3" HorizontalAlignment="Left">
+            <Grid
+                x:Name="TopLeftCommandGrid"
+                Padding="3"
+                HorizontalAlignment="Left">
                <StackPanel
-                    x:Name="TopLeftCommandStackPanel"
                    HorizontalAlignment="Left"
                    Orientation="Horizontal"
                    Spacing="3">
@@ -83,15 +86,31 @@
                </StackPanel>
            </Grid>

-            <Grid Padding="3" HorizontalAlignment="Right">
+            <Grid
+                x:Name="TopRightCommandGrid"
+                Padding="3"
+                HorizontalAlignment="Right">
                <StackPanel
-                    x:Name="TopRightCommandStackPanel"
+                    HorizontalAlignment="Right"
                    Orientation="Horizontal"
                    Spacing="3">
                    <StackPanel.OpacityTransition>
                        <ScalarTransition />
                    </StackPanel.OpacityTransition>

+                    <!--  Lock button  -->
+                    <Button
+                        x:Name="LockButton"
+                        Click="LockButton_Click"
+                        Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
+                                              FontSize=12,
+                                              Glyph=&#xE72E;}"
+                        Style="{StaticResource TitleBarButtonStyle}">
+                        <Button.OpacityTransition>
+                            <ScalarTransition />
+                        </Button.OpacityTransition>
+                    </Button>
+
                    <!--  Always on top  -->
                    <Button
                        x:Name="AOTButton"
@@ -189,6 +208,30 @@
                </StackPanel>
            </Grid>

+            <Grid
+                x:Name="TopCenterCommandGrid"
+                Padding="3"
+                HorizontalAlignment="Stretch">
+                <Button
+                    HorizontalAlignment="Stretch"
+                    Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
+                                          FontSize=12,
+                                          Glyph=&#xE712;}"
+                    Style="{StaticResource TitleBarButtonStyle}">
+                    <Button.OpacityTransition>
+                        <ScalarTransition />
+                    </Button.OpacityTransition>
+                    <Button.Flyout>
+                        <Flyout FlyoutPresenterStyle="{StaticResource FlyoutGhostStyle}" ShouldConstrainToRootBounds="False">
+                            <Grid
+                                x:Name="TopCommandFlyoutContainer"
+                                Width="400"
+                                Height="36" />
+                        </Flyout>
+                    </Button.Flyout>
+                </Button>
+            </Grid>
+
        </Grid>

        <!--  Bottom command  -->
@@ -201,24 +244,27 @@

        <Grid
            x:Name="LockToggleButtonContainer"
+            Padding="3"
            HorizontalAlignment="Center"
-            VerticalAlignment="Top">
-            <!--  Lock button  -->
-            <ToggleButton
-                x:Name="LockToggleButton"
-                Click="LockToggleButton_Click"
+            VerticalAlignment="Center">
+
+            <!--  Unlock button  -->
+            <Button
+                x:Name="UnlockButton"
+                Click="UnlockButton_Click"
                Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                      FontSize=12,
-                                      Glyph=&#xE72E;}"
+                                      Glyph=&#xE785;}"
                IsHitTestVisible="True"
                Opacity="0"
-                PointerEntered="LockToggleButton_PointerEntered"
-                PointerExited="LockToggleButton_PointerExited"
-                Style="{StaticResource TitleBarToggleButtonStyle}">
-                <ToggleButton.OpacityTransition>
+                PointerEntered="UnlockButton_PointerEntered"
+                PointerExited="UnlockButton_PointerExited"
+                Style="{StaticResource AccentButtonStyle}">
+                <Button.OpacityTransition>
                    <ScalarTransition />
-                </ToggleButton.OpacityTransition>
-            </ToggleButton>
+                </Button.OpacityTransition>
+            </Button>
+
        </Grid>

    </Grid>
--- a/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Views/NowPlayingWindow.xaml.cs
+++ b/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Views/NowPlayingWindow.xaml.cs
@@ -16,6 +16,7 @@ using Microsoft.UI.Dispatching;
 using Microsoft.UI.Windowing;
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Input;
+using Microsoft.UI.Xaml.Media.Imaging;
 using System.Threading.Tasks;
 using Windows.Foundation;
 using Windows.Graphics.Imaging;
@@ -31,7 +32,7 @@ namespace BetterLyrics.WinUI3.Views
        IRecipient<PropertyChangedMessage<DockPlacement>>,
        IRecipient<PropertyChangedMessage<TitleBarArea>>,
        IRecipient<PropertyChangedMessage<ElementTheme>>,
-        IRecipient<PropertyChangedMessage<BitmapDecoder?>>,
+        IRecipient<PropertyChangedMessage<BitmapImage?>>,
        IRecipient<PropertyChangedMessage<LyricsFontColorType>>,
        IRecipient<PropertyChangedMessage<Color>>
    {
@@ -65,7 +66,7 @@ namespace BetterLyrics.WinUI3.Views

            WeakReferenceMessenger.Default.RegisterAll(this);

-            _ = UpdateAlbumArtThemeColorsAsync();
+            UpdateAlbumArtThemeColors();
        }

        public void InitStatus()
@@ -85,13 +86,19 @@ namespace BetterLyrics.WinUI3.Views
            LyricsWindowStatus.UpdateDemoWindowAndMonitorBounds();
        }

-        public async Task UpdateBackdropAccentColorAsync(nint hwnd)
+        public void UpdateBackdropAccentColor(nint hwnd)
        {
-            _backdropAccentColor = Helper.ColorHelper.GetAccentColor(
+            var oldValue = _backdropAccentColor;
+            var newValue = Helper.ColorHelper.GetAccentColor(
                hwnd,
                LyricsWindowStatus.MonitorDeviceName,
                LyricsWindowStatus.EnvironmentSampleMode);
-            await UpdateAlbumArtThemeColorsAsync();
+            // <20><>ֹ<EFBFBD><D6B9><EFBFBD><EFBFBD>Ҫˢ<D2AA>µ<EFBFBD><C2B5>½<EFBFBD><C2BD>治<EFBFBD><E6B2BB><EFBFBD><EFBFBD>
+            if (newValue != oldValue)
+            {
+                _backdropAccentColor = newValue;
+                UpdateAlbumArtThemeColors();
+            }
        }

        public void InitFgWindowWatcher()
@@ -102,7 +109,7 @@ namespace BetterLyrics.WinUI3.Views
                hwnd,
                fgHwnd =>
                {
-                    _fgWindowWatcherTimer?.Debounce(async () =>
+                    _fgWindowWatcherTimer?.Debounce(() =>
                    {
                        if (LyricsWindowStatus.IsAlwaysOnTop &&
                            LyricsWindowStatus.IsAlwaysOnTopPolling &&
@@ -113,21 +120,21 @@ namespace BetterLyrics.WinUI3.Views
                        }
                        if (LyricsWindowStatus.IsAdaptToEnvironment)
                        {
-                            await UpdateBackdropAccentColorAsync(hwnd);
+                            UpdateBackdropAccentColor(hwnd);
                        }
                    }, Constants.Time.DebounceTimeout);
                }
            );
            if (LyricsWindowStatus.IsAdaptToEnvironment)
            {
-                _ = UpdateBackdropAccentColorAsync(hwnd);
+                UpdateBackdropAccentColor(hwnd);
            }
            OnIsAdaptToEnvironmentChanged();
        }

-        private async Task UpdateAlbumArtThemeColorsAsync()
+        private void UpdateAlbumArtThemeColors()
        {
-            var result = await _mediaSessionsService.CalculateAlbumArtThemeColorsAsync(LyricsWindowStatus, _backdropAccentColor);
+            var result = _mediaSessionsService.CalculateAlbumArtThemeColors(LyricsWindowStatus, _backdropAccentColor);

            NowPlayingPage.AlbumArtThemeColors = result;
            RootGrid.RequestedTheme = result.ThemeType;
@@ -161,12 +168,11 @@ namespace BetterLyrics.WinUI3.Views
            this.SetIsLocked(LyricsWindowStatus.IsLocked);
            if (LyricsWindowStatus.IsLocked)
            {
-                LockToggleButton.IsChecked = true;
                StartOverlayInputHelper();
            }
            else
            {
-                LockToggleButton.IsChecked = false;
+                UnlockButton.Opacity = 0;
                StopOverlayInputHelper();
            }
        }
@@ -314,7 +320,40 @@ namespace BetterLyrics.WinUI3.Views

        private void RootGrid_SizeChanged(object sender, SizeChangedEventArgs e)
        {
-            NowPlayingBar.IsCompactMode = RootGrid.ActualWidth < 300 || RootGrid.ActualHeight < 100;
+            NowPlayingBar.IsCompactMode = RootGrid.ActualWidth < 400 || RootGrid.ActualHeight < 100;
+            if (RootGrid.ActualWidth < 400)
+            {
+                TopCenterCommandGrid.Visibility = Visibility.Visible;
+                if (TopCommandGrid.Children.Contains(TopLeftCommandGrid))
+                {
+                    TopCommandGrid.Children.Remove(TopLeftCommandGrid);
+                }
+                if (TopCommandGrid.Children.Contains(TopRightCommandGrid))
+                {
+                    TopCommandGrid.Children.Remove(TopRightCommandGrid);
+                }
+                if (!TopCommandFlyoutContainer.Children.Contains(TopLeftCommandGrid))
+                {
+                    TopCommandFlyoutContainer.Children.Add(TopLeftCommandGrid);
+                }
+                if (!TopCommandFlyoutContainer.Children.Contains(TopRightCommandGrid))
+                {
+                    TopCommandFlyoutContainer.Children.Add(TopRightCommandGrid);
+                }
+            }
+            else
+            {
+                TopCenterCommandGrid.Visibility = Visibility.Collapsed;
+                TopCommandFlyoutContainer.Children.Clear();
+                if (!TopCommandGrid.Children.Contains(TopLeftCommandGrid))
+                {
+                    TopCommandGrid.Children.Add(TopLeftCommandGrid);
+                }
+                if (!TopCommandGrid.Children.Contains(TopRightCommandGrid))
+                {
+                    TopCommandGrid.Children.Add(TopRightCommandGrid);
+                }
+            }
        }

        private void StartOverlayInputHelper()
@@ -330,13 +369,13 @@ namespace BetterLyrics.WinUI3.Views
                }
                else
                {
-                    LockToggleButton.Opacity = 1;
+                    UnlockButton.Opacity = 1;
                    this.SetIsClickThrough(true);
                }
            };
            _overlayInputHelper.OnInteractiveAreaExited = () =>
            {
-                LockToggleButton.Opacity = 0;
+                UnlockButton.Opacity = 0;
            };
            _overlayInputHelper.Start();
        }
@@ -347,26 +386,30 @@ namespace BetterLyrics.WinUI3.Views
            _overlayInputHelper = null;
        }

-        private void LockToggleButton_PointerEntered(object sender, PointerRoutedEventArgs e)
+        private void UnlockButton_PointerEntered(object sender, PointerRoutedEventArgs e)
        {
-            LockToggleButton.Opacity = 1;
+            if (LyricsWindowStatus.IsLocked)
+            {
+                UnlockButton.Opacity = 1;
+            }
        }

-        private void LockToggleButton_PointerExited(object sender, PointerRoutedEventArgs e)
+        private void UnlockButton_PointerExited(object sender, PointerRoutedEventArgs e)
        {
-            LockToggleButton.Opacity = 0;
+            if (LyricsWindowStatus.IsLocked)
+            {
+                UnlockButton.Opacity = 0;
+            }
        }

-        private void LockToggleButton_Click(object sender, RoutedEventArgs e)
+        private void UnlockButton_Click(object sender, RoutedEventArgs e)
        {
-            if (LockToggleButton.IsChecked == true)
-            {
-                LyricsWindowStatus.IsLocked = true;
-            }
-            else
-            {
-                LyricsWindowStatus.IsLocked = false;
-            }
+            LyricsWindowStatus.IsLocked = false;
+        }
+
+        private void LockButton_Click(object sender, RoutedEventArgs e)
+        {
+            LyricsWindowStatus.IsLocked = true;
        }

        private void AOTButton_Click(object sender, RoutedEventArgs e)
@@ -430,16 +473,13 @@ namespace BetterLyrics.WinUI3.Views
            }
        }

-        public async void Receive(PropertyChangedMessage<BitmapDecoder?> message)
+        public void Receive(PropertyChangedMessage<BitmapImage?> message)
        {
            if (message.Sender is IMediaSessionsService)
            {
-                if (message.PropertyName == nameof(IMediaSessionsService.AlbumArtBitmapDecoder))
+                if (message.PropertyName == nameof(IMediaSessionsService.AlbumArtBitmapImage))
                {
-                    if (message.NewValue is BitmapDecoder)
-                    {
-                        await UpdateAlbumArtThemeColorsAsync();
-                    }
+                    UpdateAlbumArtThemeColors();
                }
            }
        }
@@ -488,53 +528,54 @@ namespace BetterLyrics.WinUI3.Views
            }
        }

-        public async void Receive(PropertyChangedMessage<ElementTheme> message)
+        public void Receive(PropertyChangedMessage<ElementTheme> message)
        {
            if (message.Sender == LyricsWindowStatus.LyricsBackgroundSettings)
            {
                if (message.PropertyName == nameof(LyricsWindowStatus.LyricsBackgroundSettings.LyricsBackgroundTheme))
                {
-                    await UpdateAlbumArtThemeColorsAsync();
+                    UpdateAlbumArtThemeColors();
                }
            }
        }

-        public async void Receive(PropertyChangedMessage<LyricsFontColorType> message)
+        public void Receive(PropertyChangedMessage<LyricsFontColorType> message)
        {
            if (message.Sender == LyricsWindowStatus.LyricsStyleSettings)
            {
                if (message.PropertyName == nameof(LyricsWindowStatus.LyricsStyleSettings.LyricsBgFontColorType))
                {
-                    await UpdateAlbumArtThemeColorsAsync();
+                    UpdateAlbumArtThemeColors();
                }
                else if (message.PropertyName == nameof(LyricsWindowStatus.LyricsStyleSettings.LyricsFgFontColorType))
                {
-                    await UpdateAlbumArtThemeColorsAsync();
+                    UpdateAlbumArtThemeColors();
                }
                else if (message.PropertyName == nameof(LyricsWindowStatus.LyricsStyleSettings.LyricsStrokeFontColorType))
                {
-                    await UpdateAlbumArtThemeColorsAsync();
+                    UpdateAlbumArtThemeColors();
                }
            }
        }

-        public async void Receive(PropertyChangedMessage<Color> message)
+        public void Receive(PropertyChangedMessage<Color> message)
        {
            if (message.Sender == LyricsWindowStatus.LyricsStyleSettings)
            {
                if (message.PropertyName == nameof(LyricsWindowStatus.LyricsStyleSettings.LyricsCustomBgFontColor))
                {
-                    await UpdateAlbumArtThemeColorsAsync();
+                    UpdateAlbumArtThemeColors();
                }
                else if (message.PropertyName == nameof(LyricsWindowStatus.LyricsStyleSettings.LyricsCustomFgFontColor))
                {
-                    await UpdateAlbumArtThemeColorsAsync();
+                    UpdateAlbumArtThemeColors();
                }
                else if (message.PropertyName == nameof(LyricsWindowStatus.LyricsStyleSettings.LyricsCustomStrokeFontColor))
                {
-                    await UpdateAlbumArtThemeColorsAsync();
+                    UpdateAlbumArtThemeColors();
                }
            }
        }
+
    }
 }