更新UX : 歌词滚动

* 天啊这个效果太爱了,我以后就用它听歌了
TonyDing1998 · Feb 20, 2021 · 28e67bc · 28e67bc
1 parent 72ae2a6
commit 28e67bc
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 7 deletions.
diff --git a/HyPlayer/Controls/LyricItem.xaml b/HyPlayer/Controls/LyricItem.xaml
@@ -8,7 +8,10 @@
     xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
     mc:Ignorable="d"
     d:DesignHeight="70"
-    d:DesignWidth="500">
+    d:DesignWidth="500"
+    FocusVisualPrimaryThickness="3"
+    FocusVisualSecondaryThickness="1"
+    >
 
     <Grid>
         <controls:DockPanel
@@ -17,11 +20,13 @@
                 controls:DockPanel.Dock="Top"
                 Name="TextBoxPureLyric"
                 Text="原句"
+                FontSize="14"
                 TextAlignment="Center"></TextBlock>
             <TextBlock
                 controls:DockPanel.Dock="Bottom"
                 Name="TextBoxTranslation"
                 Text="翻译"
+                FontSize="14"
                 TextAlignment="Center"></TextBlock>
         </controls:DockPanel>
     </Grid>

diff --git a/HyPlayer/Controls/LyricItem.xaml.cs b/HyPlayer/Controls/LyricItem.xaml.cs
@@ -5,6 +5,8 @@
 using System.Runtime.InteropServices.WindowsRuntime;
 using Windows.Foundation;
 using Windows.Foundation.Collections;
+using Windows.UI;
+using Windows.UI.Text;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
 using Windows.UI.Xaml.Controls.Primitives;
@@ -13,6 +15,9 @@
 using Windows.UI.Xaml.Media;
 using Windows.UI.Xaml.Navigation;
 using HyPlayer.Classes;
+using Microsoft.UI.Xaml.Media;
+using AcrylicBackgroundSource = Windows.UI.Xaml.Media.AcrylicBackgroundSource;
+using AcrylicBrush = Microsoft.UI.Xaml.Media.AcrylicBrush;
 
 //https://go.microsoft.com/fwlink/?LinkId=234236 上介绍了“用户控件”项模板
 
@@ -35,5 +40,21 @@ public LyricItem(SongLyric lrc)
                 TextBoxTranslation.Visibility = Visibility.Collapsed;
             }
         }
+
+        public void OnShow()
+        {
+            TextBoxPureLyric.FontWeight = FontWeights.ExtraBold;
+            TextBoxTranslation.FontWeight = FontWeights.ExtraBold;
+            TextBoxTranslation.FontSize = 20;
+            TextBoxPureLyric.FontSize = 20;
+        }
+
+        public void OnHind()
+        {
+            TextBoxPureLyric.FontWeight = FontWeights.Normal;
+            TextBoxTranslation.FontWeight = FontWeights.Normal;
+            TextBoxTranslation.FontSize = 14;
+            TextBoxPureLyric.FontSize = 14;
+        }
     }
 }
diff --git a/HyPlayer/Pages/ExpandedPlayer.xaml b/HyPlayer/Pages/ExpandedPlayer.xaml
@@ -71,7 +71,7 @@
                 FontSize="20"
                 Text="歌手" />
             <ScrollViewer
-                x:Name="scrolls"
+                x:Name="LyricBoxContainer"
                 VerticalScrollBarVisibility="Auto"
                 HorizontalScrollBarVisibility="Auto">
                 <ScrollViewer.Content>

diff --git a/HyPlayer/Pages/ExpandedPlayer.xaml.cs b/HyPlayer/Pages/ExpandedPlayer.xaml.cs
@@ -33,15 +33,50 @@ public ExpandedPlayer()
         {
             this.InitializeComponent();
             Common.PageExpandedPlayer = this;
-            
+
             timer = new Timer((state =>
             {
-                this.Invoke((() =>
+                this.Invoke((RefreshLyricTime));
+            }), null, 0, 100);
+
+        }
+
+        private void RefreshLyricTime()
+        {
+            LyricItem lastlrcitem = null;
+            bool showed = false;
+            foreach (UIElement lyricBoxChild in LyricBox.Children)
+            {
+                if (lyricBoxChild is LyricItem)
                 {
+                    LyricItem lrcitem = (LyricItem)lyricBoxChild;
+                    if (AudioPlayer.AudioMediaPlayer.PlaybackSession.Position < lrcitem.Lrc.LyricTime)
+                    {
+                        if (!showed)
+                        {
+                            lastlrcitem.OnShow();
+                            var transform = lastlrcitem.TransformToVisual((UIElement)LyricBoxContainer.Content);
+                            var position = transform.TransformPoint(new Point(0,0));
+                            LyricBoxContainer.ChangeView(null, position.Y - (LyricBoxContainer.ViewportHeight / 4), null, false);
+                            showed = true;
+                        }
+                    }
+                    else
+                    {
+                        lrcitem.OnHind();
+                    }
+                    lastlrcitem = lrcitem;
+                }
+            }
 
-                }));
-            }), null, 0, 100);
-
+            if (!showed && lastlrcitem!=null)
+            {
+                lastlrcitem.OnShow();
+                var transform = lastlrcitem.TransformToVisual((UIElement)LyricBoxContainer.Content);
+                var position = transform.TransformPoint(new Point(0, 0));
+                LyricBoxContainer.ChangeView(null, position.Y - (LyricBoxContainer.ViewportHeight / 4), null, false);
+                showed = true;
+            }
         }
 
         public void LoadLyricsBox()