视频详情页播放列表Tab支持滚动到顶部、底部和当前视频

ywmoyue · Jul 18, 2024 · 44e5537 · 44e5537
1 parent 23e143e
commit 44e5537
Show file tree

Hide file tree

Showing 9 changed files with 505 additions and 39 deletions.
diff --git a/src/BiliLite.UWP/BiliLite.UWP.csproj b/src/BiliLite.UWP/BiliLite.UWP.csproj
@@ -139,6 +139,9 @@
     <Compile Include="Controls\AttentionButton.xaml.cs">
       <DependentUpon>AttentionButton.xaml</DependentUpon>
     </Compile>
+    <Compile Include="Controls\Common\PieControl.xaml.cs">
+      <DependentUpon>PieControl.xaml</DependentUpon>
+    </Compile>
     <Compile Include="Controls\DataTemplateSelectors\UserDynamicItemV2DataTemplateSelector.cs" />
     <Compile Include="Controls\Dynamic\DynamicItemV2Control.xaml.cs">
       <DependentUpon>DynamicItemV2Control.xaml</DependentUpon>
@@ -226,6 +229,7 @@
     <Compile Include="Models\Common\Rank\RankItemStatModel.cs" />
     <Compile Include="Models\Functions\SaveFunction.cs" />
     <Compile Include="Models\Common\Danmaku\DanmuFilterItem.cs" />
+    <Compile Include="ViewModels\Common\PieControlViewModel.cs" />
     <Compile Include="ViewModels\Settings\CDNServerItemViewModel.cs" />
     <Compile Include="Pages\ISavablePage.cs" />
     <Compile Include="Services\Biz\MediaListService.cs" />
@@ -1046,6 +1050,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="Controls\Common\PieControl.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Controls\Dynamic\DynamicItemV2Control.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>

diff --git a/src/BiliLite.UWP/Controls/Common/PieControl.xaml b/src/BiliLite.UWP/Controls/Common/PieControl.xaml
@@ -0,0 +1,152 @@
+<UserControl
+    x:Class="BiliLite.Controls.Common.PieControl"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:BiliLite.Controls.Common"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d"
+    d:DesignHeight="300"
+    d:DesignWidth="400">
+    <UserControl.Resources>
+        <ResourceDictionary>
+            <Storyboard x:Name="ExtentPieStory">
+                <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" 
+                                               Storyboard.TargetName="PieExtendGrid" 
+                                               Storyboard.TargetProperty="(FrameworkElement.Width)">
+                    <EasingDoubleKeyFrame KeyTime="00:00:00" Value="{x:Bind m_viewModel.PieExtendGridLittleWidth,Mode=OneWay}"/>
+                    <EasingDoubleKeyFrame KeyTime="00:00:00.3000000" Value="{x:Bind m_viewModel.PieExtendGridExtendWidth,Mode=OneWay}"/>
+                </DoubleAnimationUsingKeyFrames>
+                <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" 
+                                               Storyboard.TargetName="PieExtendGrid" 
+                                               Storyboard.TargetProperty="(FrameworkElement.Height)">
+                    <EasingDoubleKeyFrame KeyTime="00:00:00" Value="{x:Bind m_viewModel.PieExtendGridLittleHeight,Mode=OneWay}"/>
+                    <EasingDoubleKeyFrame KeyTime="00:00:00.3000000" Value="{x:Bind m_viewModel.PieExtendGridExtendHeight,Mode=OneWay}"/>
+                </DoubleAnimationUsingKeyFrames>
+                <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" 
+                                               Storyboard.TargetName="PieExtendSubGrid" 
+                                               Storyboard.TargetProperty="(FrameworkElement.Width)">
+                    <EasingDoubleKeyFrame KeyTime="00:00:00" Value="{x:Bind m_viewModel.PieExtendGridLittleHeight,Mode=OneWay}"/>
+                    <EasingDoubleKeyFrame KeyTime="00:00:00.3000000" Value="{x:Bind m_viewModel.PieExtendGridExtendHeight,Mode=OneWay}"/>
+                </DoubleAnimationUsingKeyFrames>
+                <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" 
+                                               Storyboard.TargetName="PieExtendSubGrid" 
+                                               Storyboard.TargetProperty="(FrameworkElement.Height)">
+                    <EasingDoubleKeyFrame KeyTime="00:00:00" Value="{x:Bind m_viewModel.PieExtendGridLittleHeight,Mode=OneWay}"/>
+                    <EasingDoubleKeyFrame KeyTime="00:00:00.3000000" Value="{x:Bind m_viewModel.PieExtendGridExtendHeight,Mode=OneWay}"/>
+                </DoubleAnimationUsingKeyFrames>
+            </Storyboard>
+            <Storyboard x:Name="ClosePieStory">
+                <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" 
+                                               Storyboard.TargetName="PieExtendGrid" 
+                                               Storyboard.TargetProperty="(FrameworkElement.Width)">
+                    <EasingDoubleKeyFrame KeyTime="00:00:00.3000000" Value="{x:Bind m_viewModel.PieExtendGridLittleWidth,Mode=OneWay}"/>
+                    <EasingDoubleKeyFrame KeyTime="00:00:00" Value="{x:Bind m_viewModel.PieExtendGridExtendWidth,Mode=OneWay}"/>
+                </DoubleAnimationUsingKeyFrames>
+                <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" 
+                                               Storyboard.TargetName="PieExtendGrid" 
+                                               Storyboard.TargetProperty="(FrameworkElement.Height)">
+                    <EasingDoubleKeyFrame KeyTime="00:00:00.3000000" Value="{x:Bind m_viewModel.PieExtendGridLittleHeight,Mode=OneWay}"/>
+                    <EasingDoubleKeyFrame KeyTime="00:00:00" Value="{x:Bind m_viewModel.PieExtendGridExtendHeight,Mode=OneWay}"/>
+                </DoubleAnimationUsingKeyFrames>
+                <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" 
+                                               Storyboard.TargetName="PieExtendSubGrid" 
+                                               Storyboard.TargetProperty="(FrameworkElement.Width)">
+                    <EasingDoubleKeyFrame KeyTime="00:00:00.3000000" Value="{x:Bind m_viewModel.PieExtendGridLittleHeight,Mode=OneWay}"/>
+                    <EasingDoubleKeyFrame KeyTime="00:00:00" Value="{x:Bind m_viewModel.PieExtendGridExtendHeight,Mode=OneWay}"/>
+                </DoubleAnimationUsingKeyFrames>
+                <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" 
+                                               Storyboard.TargetName="PieExtendSubGrid" 
+                                               Storyboard.TargetProperty="(FrameworkElement.Height)">
+                    <EasingDoubleKeyFrame KeyTime="00:00:00.3000000" Value="{x:Bind m_viewModel.PieExtendGridLittleHeight,Mode=OneWay}"/>
+                    <EasingDoubleKeyFrame KeyTime="00:00:00" Value="{x:Bind m_viewModel.PieExtendGridExtendHeight,Mode=OneWay}"/>
+                </DoubleAnimationUsingKeyFrames>
+            </Storyboard>
+        </ResourceDictionary>
+    </UserControl.Resources>
+
+    <Grid x:Name="PieControlGrid" HorizontalAlignment="Right">
+        <Grid.RenderTransform>
+            <CompositeTransform TranslateY="200"/>
+        </Grid.RenderTransform>
+        <Grid Height="{x:Bind m_viewModel.PieExtendGridLittleHeight,Mode=OneWay}" 
+              Width="{x:Bind m_viewModel.PieExtendGridLittleWidth,Mode=OneWay}" >
+            <Button CornerRadius="50" 
+                    Height="{x:Bind m_viewModel.LittleBtnHeight}" 
+                    Width="{x:Bind m_viewModel.LittleBtnWidth}" 
+                    Background="{ThemeResource PieControlColor}"
+                    Tapped="BtnExtentPie_OnTapped">
+                <FontIcon Foreground="{ThemeResource PieControlIconColor}"
+                          FontFamily="Segoe MDL2 Assets"
+                          Glyph="&#xE760;">
+                    <FontIcon.RenderTransform>
+                        <CompositeTransform TranslateX="-9" ScaleX="0.8" ScaleY="0.8" TranslateY="3"/>
+                    </FontIcon.RenderTransform>
+                </FontIcon>
+            </Button>
+        </Grid>
+        <Grid x:Name="PieExtendGrid"
+              Height="{x:Bind m_viewModel.PieExtendGridLittleHeight,Mode=OneWay}" 
+              Width="{x:Bind m_viewModel.PieExtendGridLittleWidth,Mode=OneWay}" 
+              Visibility="{x:Bind m_viewModel.ExtendVisibility,Mode=OneWay}">
+            <Grid x:Name="PieExtendSubGrid" Background="{ThemeResource PieControlColor}" 
+                  Height="{x:Bind m_viewModel.PieExtendGridLittleHeight,Mode=OneWay}" 
+                  Width="{x:Bind m_viewModel.PieExtendGridLittleHeight,Mode=OneWay}" 
+                  CornerRadius="999">
+                <Button x:Name="SecondBtn" CornerRadius="999"
+                        Tapped="SecondBtn_OnTapped" Background="{ThemeResource PieControlColor}"
+                  Height="50" 
+                  Width="50" RenderTransformOrigin="0.5,0.5" >
+                    <Button.RenderTransform>
+                        <CompositeTransform/>
+                    </Button.RenderTransform>
+                    <ToolTipService.ToolTip>
+                        <ToolTip Content="{x:Bind SecondBtnToolTip,Mode=OneWay}" Visibility="{x:Bind SecondBtnToolTip,Converter={StaticResource display}}"/>
+                    </ToolTipService.ToolTip>
+                    <ContentPresenter Padding="0 4 0 0" 
+                                      Content="{x:Bind Path=SecondBtnIcon,Mode=OneWay}"
+                                      Foreground="{ThemeResource PieControlIconColor}"></ContentPresenter>
+                </Button>
+                <Button x:Name="ThirdBtn" CornerRadius="999"
+                        Tapped="ThirdBtn_OnTapped" Background="{ThemeResource PieControlColor}"
+                  Height="50" 
+                  Width="50" >
+                    <Button.RenderTransform>
+                        <CompositeTransform TranslateX="40" TranslateY="50"/>
+                    </Button.RenderTransform>
+                    <ToolTipService.ToolTip>
+                        <ToolTip Content="{x:Bind ThirdBtnToolTip,Mode=OneWay}" Visibility="{x:Bind ThirdBtnToolTip,Converter={StaticResource display}}"/>
+                    </ToolTipService.ToolTip>
+                    <ContentPresenter Padding="0 4 0 0" 
+                                      Content="{x:Bind Path=ThirdBtnIcon,Mode=OneWay}"
+                                      Foreground="{ThemeResource PieControlIconColor}"></ContentPresenter>
+                </Button>
+                <Button x:Name="FirstBtn" CornerRadius="999"
+                        Tapped="FirstBtn_OnTapped" Background="{ThemeResource PieControlColor}"
+                  Height="50" 
+                  Width="50" >
+                    <Button.RenderTransform>
+                        <CompositeTransform TranslateX="40" TranslateY="-50"/>
+                    </Button.RenderTransform>
+                    <ToolTipService.ToolTip>
+                        <ToolTip Content="{x:Bind FirstBtnToolTip,Mode=OneWay}" Visibility="{x:Bind FirstBtnToolTip,Converter={StaticResource display}}"/>
+                    </ToolTipService.ToolTip>
+                    <ContentPresenter Padding="0 4 0 0" 
+                                      Content="{x:Bind Path=FirstBtnIcon,Mode=OneWay}" 
+                                      Foreground="{ThemeResource PieControlIconColor}"></ContentPresenter>
+                </Button>
+                <Button CornerRadius="999"
+                  Height="50"  Background="{ThemeResource PieControlColor}"
+                  Width="50" 
+                  Click="BtnClosePie_Click">
+                    <Button.RenderTransform>
+                        <CompositeTransform TranslateX="40"/>
+                    </Button.RenderTransform>
+                    <FontIcon Foreground="{ThemeResource PieControlIconColor}"
+                              FontFamily="Segoe MDL2 Assets"
+                              Glyph="&#xE761;"></FontIcon>
+                </Button>
+            </Grid>
+        </Grid>
+    </Grid>
+</UserControl>
diff --git a/src/BiliLite.UWP/Controls/Common/PieControl.xaml.cs b/src/BiliLite.UWP/Controls/Common/PieControl.xaml.cs
@@ -0,0 +1,162 @@
+using System;
+using System.Threading.Tasks;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Input;
+using Windows.UI.Xaml.Media.Animation;
+using BiliLite.ViewModels.Common;
+
+//https://go.microsoft.com/fwlink/?LinkId=234236 上介绍了“用户控件”项模板
+
+namespace BiliLite.Controls.Common
+{
+    public sealed partial class PieControl : UserControl
+    {
+        private readonly PieControlViewModel m_viewModel;
+
+        public PieControl()
+        {
+            m_viewModel = new PieControlViewModel();
+            this.InitializeComponent();
+        }
+
+        public event EventHandler<TappedRoutedEventArgs> FirstBtnTapped;
+
+        public event EventHandler<TappedRoutedEventArgs> SecondBtnTapped;
+
+        public event EventHandler<TappedRoutedEventArgs> ThirdBtnTapped;
+
+        public IconElement FirstBtnIcon
+        {
+            get => (IconElement)GetValue(FirstBtnIconProperty);
+            set => SetValue(FirstBtnIconProperty, value);
+        }
+
+        public static readonly DependencyProperty FirstBtnIconProperty =
+            DependencyProperty.Register(nameof(IconElement),
+                typeof(FrameworkElement),
+                typeof(PieControl),
+                new PropertyMetadata(null));
+
+        public IconElement SecondBtnIcon
+        {
+            get => (IconElement)GetValue(SecondBtnIconProperty);
+            set => SetValue(SecondBtnIconProperty, value);
+        }
+
+        public static readonly DependencyProperty SecondBtnIconProperty =
+            DependencyProperty.Register(nameof(IconElement),
+                typeof(FrameworkElement),
+                typeof(PieControl),
+                new PropertyMetadata(null));
+
+        public IconElement ThirdBtnIcon
+        {
+            get => (IconElement)GetValue(ThirdBtnIconProperty);
+            set => SetValue(ThirdBtnIconProperty, value);
+        }
+
+        public static readonly DependencyProperty ThirdBtnIconProperty =
+            DependencyProperty.Register(nameof(IconElement),
+                typeof(FrameworkElement),
+                typeof(PieControl),
+                new PropertyMetadata(null));
+
+        public string FirstBtnToolTip
+        {
+            get => (string)GetValue(FirstBtnToolTipProperty);
+            set => SetValue(FirstBtnToolTipProperty, value);
+        }
+
+        public static readonly DependencyProperty FirstBtnToolTipProperty =
+            DependencyProperty.Register(nameof(FirstBtnToolTip),
+                typeof(string),
+                typeof(PieControl),
+                new PropertyMetadata(null));
+
+        public string SecondBtnToolTip
+        {
+            get => (string)GetValue(SecondBtnToolTipProperty);
+            set => SetValue(SecondBtnToolTipProperty, value);
+        }
+
+        public static readonly DependencyProperty SecondBtnToolTipProperty =
+            DependencyProperty.Register(nameof(SecondBtnToolTip),
+                typeof(string),
+                typeof(PieControl),
+                new PropertyMetadata(null));
+
+        public string ThirdBtnToolTip
+        {
+            get => (string)GetValue(ThirdBtnToolTipProperty);
+            set => SetValue(ThirdBtnToolTipProperty, value);
+        }
+
+        public static readonly DependencyProperty ThirdBtnToolTipProperty =
+            DependencyProperty.Register(nameof(ThirdBtnToolTip),
+                typeof(string),
+                typeof(PieControl),
+                new PropertyMetadata(null));
+
+        private async void BtnClosePie_Click(object sender, RoutedEventArgs args)
+        {
+            await ClosePie();
+        }
+
+        private async void BtnExtentPie_OnTapped(object sender, TappedRoutedEventArgs e)
+        {
+            await ExtentPie();
+        }
+
+        private async Task ClosePie()
+        {
+            m_viewModel.ExtendVisibility = true;
+            var storyboard = (Storyboard)this.Resources["ClosePieStory"];
+            //storyboard.Begin();
+            var tcs = new TaskCompletionSource<bool>();
+
+            EventHandler<object> completeAction = (s, e) =>
+            {
+                tcs.SetResult(true);
+            };
+            storyboard.Completed += completeAction;
+            storyboard.Begin();
+            await tcs.Task;
+            m_viewModel.ExtendVisibility = false;
+            storyboard.Completed -= completeAction;
+        }
+
+        private async Task ExtentPie()
+        {
+            m_viewModel.ExtendVisibility = true;
+            var storyboard = (Storyboard)this.Resources["ExtentPieStory"];
+            //storyboard.Begin();
+            var tcs = new TaskCompletionSource<bool>();
+
+            EventHandler<object> completeAction = (s, e) =>
+            {
+                tcs.SetResult(true);
+            };
+
+            storyboard.Completed += completeAction;
+            storyboard.Begin();
+            await tcs.Task;
+            storyboard.Completed -= completeAction;
+        }
+
+        private void ThirdBtn_OnTapped(object sender, TappedRoutedEventArgs e)
+        {
+            ThirdBtnTapped?.Invoke(this, e);
+        }
+
+        private void FirstBtn_OnTapped(object sender, TappedRoutedEventArgs e)
+        {
+            FirstBtnTapped?.Invoke(this, e);
+        }
+
+        private void SecondBtn_OnTapped(object sender, TappedRoutedEventArgs e)
+        {
+            SecondBtnTapped?.Invoke(this, e);
+        }
+    }
+}