fix #42

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

@@ -10,6 +10,7 @@ using CommunityToolkit.Mvvm.Input;
 using CommunityToolkit.Mvvm.Messaging;
 using CommunityToolkit.Mvvm.Messaging.Messages;
 using Microsoft.UI.Xaml;
+using System.Numerics;
 using System.Threading.Tasks;
 
 namespace BetterLyrics.WinUI3.ViewModels
@@ -62,6 +63,9 @@ namespace BetterLyrics.WinUI3.ViewModels
         //[ObservableProperty]
         //public partial int Volume { get; set; }
 
+        [ObservableProperty]
+        public partial Vector3 BottomCenterCommandGridTranslation { get; set; } = new Vector3(0, 0, 0);
+
         [ObservableProperty]
         public partial bool IsImmersiveMode { get; set; }
 

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

@@ -18,7 +18,7 @@
     xmlns:ui="using:CommunityToolkit.WinUI"
     mc:Ignorable="d">
 
-    <Grid x:Name="RootGrid">
+    <Grid x:Name="RootGrid" SizeChanged="RootGrid_SizeChanged">
         <!--  Lyrics area  -->
         <renderer:LyricsRenderer />
 
@@ -140,14 +140,15 @@
             <Grid
                 Padding="3"
                 HorizontalAlignment="Center"
-                Style="{StaticResource CardGridStyle}">
+                Style="{StaticResource CardGridStyle}"
+                Translation="{x:Bind ViewModel.BottomCenterCommandGridTranslation, Mode=OneWay}">
+                <Grid.TranslationTransition>
+                    <Vector3Transition />
+                </Grid.TranslationTransition>
                 <StackPanel
                     x:Name="BottomCenterCommandStackPanel"
                     Orientation="Horizontal"
                     Spacing="3">
-                    <StackPanel.OpacityTransition>
-                        <ScalarTransition />
-                    </StackPanel.OpacityTransition>
                     <Button
                         Command="{x:Bind ViewModel.PreviousSongCommand}"
                         Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily},

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

@@ -14,7 +14,7 @@ namespace BetterLyrics.WinUI3.Views
     public sealed partial class LyricsPage : Page
     {
         private readonly ISettingsService _settingsService = Ioc.Default.GetRequiredService<ISettingsService>();
-        
+
         public LyricsPage()
         {
             this.InitializeComponent();
@@ -82,5 +82,17 @@ namespace BetterLyrics.WinUI3.Views
         {
             TranslationFlyout.ShowAt(BottomRightCommandStackPanel);
         }
+
+        private void RootGrid_SizeChanged(object sender, SizeChangedEventArgs e)
+        {
+            if (e.NewSize.Width < 500)
+            {
+                ViewModel.BottomCenterCommandGridTranslation = new System.Numerics.Vector3(0, -48, 0);
+            }
+            else
+            {
+                ViewModel.BottomCenterCommandGridTranslation = new System.Numerics.Vector3(0, 0, 0);
+            }
+        }
     }
 }