支持显示直播分区 (#994)

* 支持显示热门标签和全部标签

* 完成直播分区详情页

* 添加连接动画

src/App/App.csproj

@@ -48,6 +48,12 @@
     <Compile Include="Controls\Common\VerticalRepeaterView\VerticalRepeaterView.Properties.cs" />
     <Compile Include="Controls\Common\VideoCard\VideoCard.cs" />
     <Compile Include="Controls\Common\VideoCard\VideoCard.Properties.cs" />
+    <Compile Include="Controls\Live\LiveAreaItem.xaml.cs">
+      <DependentUpon>LiveAreaItem.xaml</DependentUpon>
+    </Compile>
+    <Compile Include="Controls\Live\LiveAreaView.xaml.cs">
+      <DependentUpon>LiveAreaView.xaml</DependentUpon>
+    </Compile>
     <Compile Include="Controls\Player\PlayerTip\PlayerTip.cs" />
     <Compile Include="Controls\Player\Related\ViewLaterView.xaml.cs">
       <DependentUpon>ViewLaterView.xaml</DependentUpon>
@@ -334,6 +340,9 @@
     <Compile Include="Pages\Overlay\HistoryPage.xaml.cs">
       <DependentUpon>HistoryPage.xaml</DependentUpon>
     </Compile>
+    <Compile Include="Pages\Overlay\LiveAreaDetailPage.xaml.cs">
+      <DependentUpon>LiveAreaDetailPage.xaml</DependentUpon>
+    </Compile>
     <Compile Include="Pages\Overlay\MessagePage.xaml.cs">
       <DependentUpon>MessagePage.xaml</DependentUpon>
     </Compile>
@@ -572,6 +581,14 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
+    <Page Include="Controls\Live\LiveAreaItem.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+    <Page Include="Controls\Live\LiveAreaView.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Controls\Player\PlayerTip\PlayerTip.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
@@ -940,6 +957,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="Pages\Overlay\LiveAreaDetailPage.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Pages\Overlay\MessagePage.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>

src/App/Controls/App/CenterPopup/CenterPopup.xaml

@@ -2,6 +2,7 @@
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:icons="using:Richasy.FluentIcon.Uwp"
+    xmlns:loc="using:Richasy.Bili.Locator.Uwp"
     xmlns:local="using:Richasy.Bili.App.Controls">
 
     <ResourceDictionary.ThemeDictionaries>
@@ -73,8 +74,10 @@
                                     TextTrimming="CharacterEllipsis" />
                                 <Button
                                     x:Name="CloseButton"
+                                    AutomationProperties.Name="{loc:LocaleLocator Name=Close}"
                                     Grid.Column="1"
-                                    VerticalAlignment="Center">
+                                    VerticalAlignment="Center"
+                                    ToolTipService.ToolTip="{loc:LocaleLocator Name=Close}">
                                     <icons:RegularFluentIcon FontSize="12" Symbol="Dismiss16" />
                                     <Button.KeyboardAccelerators>
                                         <KeyboardAccelerator Key="Escape" />

src/App/Controls/App/RootNavigationView.xaml.cs

@@ -225,6 +225,9 @@ private void CheckOverlayContentNavigation(object param)
                 case PageIds.Message:
                     pageType = typeof(MessagePage);
                     break;
+                case PageIds.LiveAreaDetail:
+                    pageType = typeof(LiveAreaDetailPage);
+                    break;
                 default:
                     break;
             }

src/App/Controls/Common/HorizontalRepeaterView.xaml

@@ -47,7 +47,7 @@
             <ScrollViewer
                 x:Name="WideScrollViewer"
                 HorizontalScrollBarVisibility="Hidden"
-                HorizontalScrollMode="Disabled"
+                HorizontalScrollMode="Enabled"
                 VerticalScrollBarVisibility="Hidden"
                 VerticalScrollMode="Disabled"
                 ViewChanged="OnWideScrollViewerChanged">

src/App/Controls/Live/LiveAreaItem.xaml

@@ -0,0 +1,33 @@
+<UserControl
+    x:Class="Richasy.Bili.App.Controls.LiveAreaItem"
+    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:local="using:Richasy.Bili.App.Controls"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="300"
+    d:DesignWidth="400"
+    mc:Ignorable="d">
+
+    <local:CardPanel
+        x:Name="ContentContainer"
+        Click="OnAreaClick"
+        IsEnableHoverAnimation="False"
+        IsEnableShadow="False">
+        <StackPanel
+            Margin="4"
+            HorizontalAlignment="Center"
+            VerticalAlignment="Center"
+            Spacing="12">
+            <local:CommonImageEx
+                Width="40"
+                HorizontalAlignment="Center"
+                ImageUrl="{x:Bind Cover, Mode=OneWay}" />
+            <TextBlock
+                HorizontalAlignment="Center"
+                Text="{x:Bind Title, Mode=OneWay}"
+                TextAlignment="Center"
+                TextWrapping="Wrap" />
+        </StackPanel>
+    </local:CardPanel>
+</UserControl>

src/App/Controls/Live/LiveAreaItem.xaml.cs

@@ -0,0 +1,62 @@
+// Copyright (c) Richasy. All rights reserved.
+
+using System;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Media.Animation;
+
+namespace Richasy.Bili.App.Controls
+{
+    /// <summary>
+    /// 直播分区条目.
+    /// </summary>
+    public sealed partial class LiveAreaItem : UserControl
+    {
+        /// <summary>
+        /// <see cref="Cover"/> 的依赖属性.
+        /// </summary>
+        public static readonly DependencyProperty CoverProperty =
+            DependencyProperty.Register(nameof(Cover), typeof(string), typeof(LiveAreaItem), new PropertyMetadata(default));
+
+        /// <summary>
+        /// <see cref="Title"/> 的依赖属性.
+        /// </summary>
+        public static readonly DependencyProperty TitleProperty =
+            DependencyProperty.Register(nameof(Title), typeof(string), typeof(LiveAreaItem), new PropertyMetadata(default));
+
+        /// <summary>
+        /// Initializes a new instance of the <see cref="LiveAreaItem"/> class.
+        /// </summary>
+        public LiveAreaItem() => InitializeComponent();
+
+        /// <summary>
+        /// 在条目被点击时发生.
+        /// </summary>
+        public event EventHandler ItemClick;
+
+        /// <summary>
+        /// 封面.
+        /// </summary>
+        public string Cover
+        {
+            get { return (string)GetValue(CoverProperty); }
+            set { SetValue(CoverProperty, value); }
+        }
+
+        /// <summary>
+        /// 标题.
+        /// </summary>
+        public string Title
+        {
+            get { return (string)GetValue(TitleProperty); }
+            set { SetValue(TitleProperty, value); }
+        }
+
+        private void OnAreaClick(object sender, RoutedEventArgs e)
+        {
+            var animationService = ConnectedAnimationService.GetForCurrentView();
+            animationService.PrepareToAnimate("LiveAreaAnimate", ContentContainer);
+            ItemClick?.Invoke(this, EventArgs.Empty);
+        }
+    }
+}

src/App/Controls/Live/LiveAreaView.xaml

@@ -0,0 +1,64 @@
+<local:CenterPopup
+    x:Class="Richasy.Bili.App.Controls.LiveAreaView"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:bilibili="using:Richasy.Bili.Models.BiliBili"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:loc="using:Richasy.Bili.Locator.Uwp"
+    xmlns:local="using:Richasy.Bili.App.Controls"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
+    Title="{loc:LocaleLocator Name=TotalTags}"
+    d:DesignHeight="300"
+    d:DesignWidth="400"
+    mc:Ignorable="d">
+
+    <Grid MinHeight="200">
+        <Grid Visibility="{x:Bind _viewModel.IsAreaError, Mode=OneWay, Converter={StaticResource BoolToVisibilityReverseConverter}}">
+            <muxc:NavigationView
+                IsBackButtonVisible="Collapsed"
+                IsPaneToggleButtonVisible="False"
+                IsSettingsVisible="False"
+                MenuItemsSource="{x:Bind _viewModel.LiveAreaGroupCollection}"
+                PaneDisplayMode="Top"
+                SelectedItem="{x:Bind _viewModel.SelectedAreaGroup, Mode=TwoWay}"
+                Visibility="{x:Bind _viewModel.IsLiveAreaRequesting, Mode=OneWay, Converter={StaticResource BoolToVisibilityReverseConverter}}">
+                <muxc:NavigationView.MenuItemTemplate>
+                    <DataTemplate x:DataType="bilibili:LiveAreaGroup">
+                        <muxc:NavigationViewItem Content="{x:Bind Name}" />
+                    </DataTemplate>
+                </muxc:NavigationView.MenuItemTemplate>
+                <ScrollViewer HorizontalScrollMode="Disabled" VerticalScrollBarVisibility="Hidden">
+                    <muxc:ItemsRepeater Margin="0,8,0,20" ItemsSource="{x:Bind _viewModel.DisplayAreaCollection}">
+                        <muxc:ItemsRepeater.Layout>
+                            <muxc:UniformGridLayout
+                                ItemsStretch="Fill"
+                                MinColumnSpacing="12"
+                                MinItemHeight="118"
+                                MinItemWidth="120"
+                                MinRowSpacing="12" />
+                        </muxc:ItemsRepeater.Layout>
+                        <muxc:ItemsRepeater.ItemTemplate>
+                            <DataTemplate x:DataType="bilibili:LiveArea">
+                                <local:LiveAreaItem
+                                    Title="{x:Bind Name}"
+                                    Cover="{x:Bind Cover}"
+                                    DataContext="{x:Bind}"
+                                    ItemClick="OnAreaClick" />
+                            </DataTemplate>
+                        </muxc:ItemsRepeater.ItemTemplate>
+                    </muxc:ItemsRepeater>
+                </ScrollViewer>
+            </muxc:NavigationView>
+        </Grid>
+
+        <muxc:ProgressRing Style="{StaticResource PageProgressRingStyle}" IsActive="{x:Bind _viewModel.IsLiveAreaRequesting, Mode=OneWay}" />
+
+        <local:ErrorPanel
+            x:Name="ErrorPanel"
+            ActionButtonClick="OnRefreshButtonClickAsync"
+            ActionContent="{loc:LocaleLocator Name=Refresh}"
+            Text="{loc:LocaleLocator Name=RequestLiveTagsFailed}"
+            Visibility="{x:Bind _viewModel.IsAreaError, Mode=OneWay}" />
+    </Grid>
+</local:CenterPopup>

src/App/Controls/Live/LiveAreaView.xaml.cs

@@ -0,0 +1,45 @@
+// Copyright (c) Richasy. All rights reserved.
+
+using System.Threading.Tasks;
+using Richasy.Bili.Models.BiliBili;
+using Richasy.Bili.ViewModels.Uwp;
+using Windows.UI.Xaml;
+
+namespace Richasy.Bili.App.Controls
+{
+    /// <summary>
+    /// 直播分区视图.
+    /// </summary>
+    public sealed partial class LiveAreaView : CenterPopup
+    {
+        private readonly LiveModuleViewModel _viewModel = LiveModuleViewModel.Instance;
+
+        /// <summary>
+        /// Initializes a new instance of the <see cref="LiveAreaView"/> class.
+        /// </summary>
+        public LiveAreaView() => InitializeComponent();
+
+        /// <summary>
+        /// 显示视图.
+        /// </summary>
+        /// <returns><see cref="Task"/>.</returns>
+        public async Task ShowAsync()
+        {
+            Show();
+            if (_viewModel.LiveAreaGroupCollection.Count == 0)
+            {
+                await _viewModel.InitializeAreaIndexAsync();
+            }
+        }
+
+        private async void OnRefreshButtonClickAsync(object sender, RoutedEventArgs e)
+            => await _viewModel.InitializeAreaIndexAsync();
+
+        private void OnAreaClick(object sender, System.EventArgs e)
+        {
+            var data = (sender as FrameworkElement).DataContext as LiveArea;
+            AppViewModel.Instance.SetOverlayContentId(Models.Enums.PageIds.LiveAreaDetail, data);
+            Hide();
+        }
+    }
+}

src/App/Pages/LivePage.xaml

@@ -2,6 +2,7 @@
     x:Class="Richasy.Bili.App.Pages.LivePage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:bilibili="using:Richasy.Bili.Models.BiliBili"
     xmlns:controls="using:Richasy.Bili.App.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:icons="using:Richasy.FluentIcon.Uwp"
@@ -47,6 +48,7 @@
                         <RowDefinition x:Name="Row1" Height="Auto" />
                         <RowDefinition x:Name="Row2" Height="Auto" />
                         <RowDefinition x:Name="Row3" Height="Auto" />
+                        <RowDefinition x:Name="Row4" Height="Auto" />
                     </Grid.RowDefinitions>
                     <Grid
                         x:Name="BannerContainer"
@@ -56,17 +58,43 @@
                         <controls:BannerView VerticalAlignment="Top" ItemsSource="{x:Bind ViewModel.BannerCollection}" />
                     </Grid>
 
+                    <Grid x:Name="PartitionContainer" Grid.Row="1">
+                        <controls:HorizontalRepeaterView
+                            x:Name="PartitionView"
+                            Header="{loc:LocaleLocator Name=HotTags}"
+                            HeaderVisibility="Visible"
+                            ItemsSource="{x:Bind ViewModel.HotTagCollection}">
+                            <controls:HorizontalRepeaterView.WideItemTemplate>
+                                <DataTemplate x:DataType="bilibili:LiveFeedHotArea">
+                                    <controls:LiveAreaItem
+                                        Title="{x:Bind Title}"
+                                        Width="120"
+                                        Height="116"
+                                        Cover="{x:Bind Cover}"
+                                        DataContext="{x:Bind}"
+                                        ItemClick="OnAreaItemClick" />
+                                </DataTemplate>
+                            </controls:HorizontalRepeaterView.WideItemTemplate>
+                            <controls:HorizontalRepeaterView.AdditionalContent>
+                                <Button
+                                    x:Name="SeeAllTagsButton"
+                                    Click="OnSeeAllTagsButtonClickAsync"
+                                    Content="{loc:LocaleLocator Name=SeeAll}" />
+                            </controls:HorizontalRepeaterView.AdditionalContent>
+                        </controls:HorizontalRepeaterView>
+                    </Grid>
+
                     <Grid
                         x:Name="InlineFollowContainer"
-                        Grid.Row="1"
+                        Grid.Row="2"
                         HorizontalAlignment="Stretch"
                         Visibility="Collapsed">
                         <controls:FollowLiveView ItemOrientation="Vertical" Visibility="{x:Bind ViewModel.IsShowFollowList, Mode=OneWay}" />
                     </Grid>
 
                     <Grid
                         x:Name="FeedsContainer"
-                        Grid.Row="2"
+                        Grid.Row="3"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch">
                         <controls:VerticalRepeaterView

src/App/Pages/LivePage.xaml.cs

@@ -1,6 +1,8 @@
 // Copyright (c) Richasy. All rights reserved.
 
 using System;
+using Richasy.Bili.App.Controls;
+using Richasy.Bili.Models.BiliBili;
 using Richasy.Bili.ViewModels.Uwp;
 using Windows.UI.Xaml;
 
@@ -65,5 +67,24 @@ private void OnFollowListViewItemClick(object sender, EventArgs e)
         {
             StandardFollowFlyout.Hide();
         }
+
+        private async void OnSeeAllTagsButtonClickAsync(object sender, RoutedEventArgs e)
+            => await new LiveAreaView().ShowAsync();
+
+        private void OnAreaItemClick(object sender, EventArgs e)
+        {
+            if ((sender as FrameworkElement)?.DataContext is LiveFeedHotArea context)
+            {
+                var area = new LiveArea()
+                {
+                    Cover = context.Cover,
+                    Id = context.Id,
+                    ParentId = context.ParentAreaId,
+                    Name = context.Title,
+                };
+
+                AppViewModel.Instance.SetOverlayContentId(Models.Enums.PageIds.LiveAreaDetail, area);
+            }
+        }
     }
 }