From 431cdd12539f3ebee9772cc9b7b8aa42a287fcba Mon Sep 17 00:00:00 2001
From: Lightczx <1686188646@qq.com>
Date: Tue, 30 Jan 2024 14:11:54 +0800
Subject: [PATCH] refine achievement page

---
 src/Snap.Hutao/Snap.Hutao/App.xaml            |   1 +
 .../Snap.Hutao/Control/Panel/UniformPanel.cs  |  21 +++
 .../Snap.Hutao/View/Page/AchievementPage.xaml | 154 ++++++++++--------
 .../Snap.Hutao/View/Page/GachaLogPage.xaml    | 116 ++++++-------
 4 files changed, 171 insertions(+), 121 deletions(-)
 create mode 100644 src/Snap.Hutao/Snap.Hutao/Control/Panel/UniformPanel.cs

diff --git a/src/Snap.Hutao/Snap.Hutao/App.xaml b/src/Snap.Hutao/Snap.Hutao/App.xaml
index a7c38922..8460a421 100644
--- a/src/Snap.Hutao/Snap.Hutao/App.xaml
+++ b/src/Snap.Hutao/Snap.Hutao/App.xaml
@@ -32,6 +32,7 @@
                 x:Key="LargeGridViewItemStyle"
                 BasedOn="{StaticResource DefaultGridViewItemStyle}"
                 TargetType="GridViewItem">
+                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                 <Setter Property="Margin" Value="0,0,12,12"/>
             </Style>
             <Style
diff --git a/src/Snap.Hutao/Snap.Hutao/Control/Panel/UniformPanel.cs b/src/Snap.Hutao/Snap.Hutao/Control/Panel/UniformPanel.cs
new file mode 100644
index 00000000..7b2fea0b
--- /dev/null
+++ b/src/Snap.Hutao/Snap.Hutao/Control/Panel/UniformPanel.cs
@@ -0,0 +1,21 @@
+// Copyright (c) DGP Studio. All rights reserved.
+// Licensed under the MIT license.
+
+using CommunityToolkit.WinUI.Controls;
+
+namespace Snap.Hutao.Control.Panel;
+
+[DependencyProperty("MinItemWidth", typeof(double))]
+internal sealed partial class UniformPanel : UniformGrid
+{
+    public UniformPanel()
+    {
+        Columns = 1;
+        SizeChanged += OnSizeChanged;
+    }
+
+    private void OnSizeChanged(object sender, Microsoft.UI.Xaml.SizeChangedEventArgs e)
+    {
+        Columns = (int)((e.NewSize.Width + ColumnSpacing) / (MinItemWidth + ColumnSpacing));
+    }
+}
\ No newline at end of file
diff --git a/src/Snap.Hutao/Snap.Hutao/View/Page/AchievementPage.xaml b/src/Snap.Hutao/Snap.Hutao/View/Page/AchievementPage.xaml
index 0fb02dcd..5fc13663 100644
--- a/src/Snap.Hutao/Snap.Hutao/View/Page/AchievementPage.xaml
+++ b/src/Snap.Hutao/Snap.Hutao/View/Page/AchievementPage.xaml
@@ -2,6 +2,7 @@
     x:Class="Snap.Hutao.View.Page.AchievementPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:cw="using:CommunityToolkit.WinUI"
     xmlns:cwc="using:CommunityToolkit.WinUI.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
@@ -49,8 +50,8 @@
         </DataTemplate>
 
         <DataTemplate x:Key="AchievementGoalGridTemplate" x:DataType="shva:AchievementGoalView">
-            <Border MinWidth="180" Style="{StaticResource BorderCardStyle}">
-                <Grid>
+            <Border HorizontalAlignment="Stretch" Style="{StaticResource BorderCardStyle}">
+                <Grid HorizontalAlignment="Stretch">
                     <Grid.RowDefinitions>
                         <RowDefinition Height="auto"/>
                         <RowDefinition/>
@@ -196,10 +197,7 @@
                 <RowDefinition Height="auto"/>
                 <RowDefinition/>
             </Grid.RowDefinitions>
-            <Grid
-                Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
-                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
-                BorderThickness="0,0,0,1">
+            <Grid Margin="16" Style="{ThemeResource AcrylicBaseHighGridCardStyle}">
                 <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="{StaticResource CompatGridLength2}"/>
                     <ColumnDefinition/>
@@ -297,76 +295,102 @@
                         Label="{shcm:ResourceString Name=ViewPageAchievementSortIncompletedItemsFirst}"/>
                 </CommandBar>
             </Grid>
-            <cwc:SwitchPresenter
+            <Border
                 Grid.Row="1"
-                ContentTransitions="{StaticResource EntranceThemeTransitions}"
-                Value="{Binding ElementName=ItemsPanelSelector, Path=Current}">
-                <cwc:Case Value="List">
-                    <SplitView
-                        DisplayMode="Inline"
-                        IsPaneOpen="True"
-                        OpenPaneLength="{StaticResource CompatSplitViewOpenPaneLength2}"
-                        PaneBackground="{x:Null}">
-                        <SplitView.Pane>
-                            <ListView
-                                ItemContainerStyle="{StaticResource AchievementGoalListViewItemStyle}"
-                                ItemTemplate="{StaticResource AchievementGoalListTemplate}"
+                Margin="16,0,16,16"
+                cw:Effects.Shadow="{ThemeResource CompatCardShadow}">
+                <Border Style="{ThemeResource AcrylicBorderCardStyle}">
+                    <cwc:SwitchPresenter ContentTransitions="{StaticResource EntranceThemeTransitions}" Value="{Binding ElementName=ItemsPanelSelector, Path=Current}">
+                        <cwc:Case Value="List">
+                            <SplitView
+                                DisplayMode="Inline"
+                                IsPaneOpen="True"
+                                OpenPaneLength="{StaticResource CompatSplitViewOpenPaneLength2}"
+                                PaneBackground="{ThemeResource CardBackgroundFillColorSecondaryBrush}">
+                                <SplitView.Pane>
+                                    <ListView
+                                        ItemContainerStyle="{StaticResource AchievementGoalListViewItemStyle}"
+                                        ItemTemplate="{StaticResource AchievementGoalListTemplate}"
+                                        ItemsSource="{Binding AchievementGoals}"
+                                        SelectedItem="{Binding SelectedAchievementGoal, Mode=TwoWay}"
+                                        SelectionMode="Single">
+                                        <mxi:Interaction.Behaviors>
+                                            <shcb:SelectedItemInViewBehavior/>
+                                        </mxi:Interaction.Behaviors>
+                                    </ListView>
+                                </SplitView.Pane>
+
+                                <SplitView.Content>
+                                    <ListView
+                                        Margin="8,0,0,0"
+                                        Padding="0,0,0,8"
+                                        ItemContainerStyle="{StaticResource AchievementListViewItemStyle}"
+                                        ItemTemplate="{StaticResource AchievementTemplate}"
+                                        ItemsSource="{Binding Achievements}"
+                                        SelectionMode="None"/>
+                                </SplitView.Content>
+                            </SplitView>
+                        </cwc:Case>
+                        <cwc:Case Value="Grid">
+                            <GridView
+                                HorizontalAlignment="Stretch"
+                                HorizontalContentAlignment="Stretch"
+                                ItemTemplate="{StaticResource AchievementGoalGridTemplate}"
                                 ItemsSource="{Binding AchievementGoals}"
                                 SelectedItem="{Binding SelectedAchievementGoal, Mode=TwoWay}"
                                 SelectionMode="Single">
+                                <GridView.ItemContainerStyle>
+                                    <Style BasedOn="{StaticResource DefaultGridViewItemStyle}" TargetType="GridViewItem">
+                                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
+                                    </Style>
+                                </GridView.ItemContainerStyle>
+                                <GridView.ItemsPanel>
+                                    <ItemsPanelTemplate>
+                                        <shcp:UniformPanel
+                                            Margin="16,16,12,0"
+                                            ColumnSpacing="0"
+                                            MinItemWidth="200"/>
+                                    </ItemsPanelTemplate>
+                                </GridView.ItemsPanel>
                                 <mxi:Interaction.Behaviors>
                                     <shcb:SelectedItemInViewBehavior/>
                                 </mxi:Interaction.Behaviors>
-                            </ListView>
-                        </SplitView.Pane>
-
-                        <SplitView.Content>
-                            <ListView
-                                Margin="8,0,0,0"
-                                Padding="0,0,0,8"
-                                ItemContainerStyle="{StaticResource AchievementListViewItemStyle}"
-                                ItemTemplate="{StaticResource AchievementTemplate}"
-                                ItemsSource="{Binding Achievements}"
-                                SelectionMode="None"/>
-                        </SplitView.Content>
-                    </SplitView>
-                </cwc:Case>
-                <cwc:Case Value="Grid">
-                    <GridView
-                        Padding="12,12,6,0"
-                        HorizontalAlignment="Stretch"
-                        HorizontalContentAlignment="Left"
-                        ItemContainerStyle="{StaticResource LargeGridViewItemStyle}"
-                        ItemTemplate="{StaticResource AchievementGoalGridTemplate}"
-                        ItemsSource="{Binding AchievementGoals}"
-                        SelectedItem="{Binding SelectedAchievementGoal, Mode=TwoWay}"
-                        SelectionMode="Single">
-                        <mxi:Interaction.Behaviors>
-                            <shcb:SelectedItemInViewBehavior/>
-                        </mxi:Interaction.Behaviors>
-                    </GridView>
-                </cwc:Case>
-            </cwc:SwitchPresenter>
+                            </GridView>
+                        </cwc:Case>
+                    </cwc:SwitchPresenter>
+                </Border>
+            </Border>
         </Grid>
 
         <Grid Visibility="{Binding SelectedArchive, Converter={StaticResource EmptyObjectToVisibilityRevertConverter}}">
-            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
-                <Image
-                    Width="120"
-                    Height="120"
-                    Source="ms-appx:///Resource/Navigation/Achievement.png"/>
-                <TextBlock
-                    Margin="0,16,0,0"
-                    HorizontalAlignment="Center"
-                    Style="{StaticResource SubtitleTextBlockStyle}"
-                    Text="{shcm:ResourceString Name=ViewPageAchievementAddArchiveHint}"/>
-                <Button
-                    Margin="0,16,0,0"
+            <Border
+                HorizontalAlignment="Center"
+                VerticalAlignment="Center"
+                cw:Effects.Shadow="{ThemeResource CompatCardShadow}">
+                <Border
+                    MinWidth="480"
                     Padding="16"
-                    HorizontalAlignment="Stretch"
-                    Command="{Binding AddArchiveCommand}"
-                    Content="{shcm:ResourceString Name=ViewPageAchievementAddArchive}"/>
-            </StackPanel>
+                    Style="{ThemeResource AcrylicBorderCardStyle}">
+                    <StackPanel>
+                        <Image
+                            Width="120"
+                            Height="120"
+                            Source="ms-appx:///Resource/Navigation/Achievement.png"/>
+                        <TextBlock
+                            Margin="0,16,0,0"
+                            HorizontalAlignment="Center"
+                            Style="{StaticResource SubtitleTextBlockStyle}"
+                            Text="{shcm:ResourceString Name=ViewPageAchievementAddArchiveHint}"/>
+                        <Button
+                            Margin="0,16,0,0"
+                            Padding="16,8"
+                            HorizontalAlignment="Stretch"
+                            Command="{Binding AddArchiveCommand}"
+                            Content="{shcm:ResourceString Name=ViewPageAchievementAddArchive}"/>
+                    </StackPanel>
+                </Border>
+            </Border>
+
         </Grid>
     </Grid>
 </shc:ScopedPage>
\ No newline at end of file
diff --git a/src/Snap.Hutao/Snap.Hutao/View/Page/GachaLogPage.xaml b/src/Snap.Hutao/Snap.Hutao/View/Page/GachaLogPage.xaml
index 00ea51be..6f7818d6 100644
--- a/src/Snap.Hutao/Snap.Hutao/View/Page/GachaLogPage.xaml
+++ b/src/Snap.Hutao/Snap.Hutao/View/Page/GachaLogPage.xaml
@@ -492,62 +492,66 @@
             </Pivot>
         </Grid>
         <Grid Visibility="{Binding Statistics, Converter={StaticResource EmptyObjectToVisibilityRevertConverter}}">
-            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
-                <shci:CachedImage
-                    Width="120"
-                    Height="120"
-                    Source="{StaticResource UI_EmotionIcon71}"/>
-                <TextBlock
-                    Margin="0,16,0,0"
-                    HorizontalAlignment="Center"
-                    Style="{StaticResource SubtitleTextBlockStyle}"
-                    Text="{shcm:ResourceString Name=ViewPageGachaLogHint}"/>
-                <StackPanel
-                    Margin="0,24,0,0"
-                    HorizontalAlignment="Center"
-                    Spacing="{StaticResource SettingsCardSpacing}">
-                    <cwc:SettingsCard
-                        ActionIconToolTip="{shcm:ResourceString Name=ViewPageGachaLogRefreshAction}"
-                        Command="{Binding RefreshBySTokenCommand}"
-                        Description="{shcm:ResourceString Name=ViewPageGachaLogRefreshBySTokenDescription}"
-                        Header="{shcm:ResourceString Name=ViewPageGachaLogRefreshBySToken}"
-                        HeaderIcon="{shcm:FontIcon Glyph=&#xE192;}"
-                        IsClickEnabled="True"/>
-                    <cwc:SettingsCard
-                        ActionIconToolTip="{shcm:ResourceString Name=ViewPageGachaLogRefreshAction}"
-                        Command="{Binding RefreshByWebCacheCommand}"
-                        Description="{shcm:ResourceString Name=ViewPageGachaLogRefreshByWebCacheDescription}"
-                        Header="{shcm:ResourceString Name=ViewPageGachaLogRefreshByWebCache}"
-                        HeaderIcon="{shcm:FontIcon Glyph=&#xE81E;}"
-                        IsClickEnabled="True"/>
-                    <cwc:SettingsCard
-                        ActionIconToolTip="{shcm:ResourceString Name=ViewPageGachaLogInputAction}"
-                        Command="{Binding RefreshByManualInputCommand}"
-                        Description="{shcm:ResourceString Name=ViewPageGachaLogRefreshByManualInputDescription}"
-                        Header="{shcm:ResourceString Name=ViewPageGachaLogRefreshByManualInput}"
-                        HeaderIcon="{shcm:FontIcon Glyph=&#xE765;}"
-                        IsClickEnabled="True"/>
-                    <cwc:SettingsCard
-                        ActionIconToolTip="{shcm:ResourceString Name=ViewPageGachaLogImportAction}"
-                        Command="{Binding ImportFromUIGFJsonCommand}"
-                        Description="{shcm:ResourceString Name=ViewPageGachaLogImportDescription}"
-                        Header="{shcm:ResourceString Name=ViewPageGachaLogImportHeader}"
-                        HeaderIcon="{shcm:FontIcon Glyph=&#xE8B5;}"
-                        IsClickEnabled="True"/>
-                    <cwc:SettingsCard
-                        Description="{shcm:ResourceString Name=ViewPageGachaLogRecoverFromHutaoCloudDescription}"
-                        FlyoutBase.AttachedFlyout="{StaticResource HutaoCloudFlyout}"
-                        Header="{shcm:ResourceString Name=ViewPageGachaLogHutaoCloud}"
-                        HeaderIcon="{shcm:FontIcon Glyph=&#xE8B5;}"
-                        IsClickEnabled="True">
-                        <mxi:Interaction.Behaviors>
-                            <mxic:EventTriggerBehavior EventName="Click">
-                                <shcb:ShowAttachedFlyoutAction/>
-                            </mxic:EventTriggerBehavior>
-                        </mxi:Interaction.Behaviors>
-                    </cwc:SettingsCard>
-                </StackPanel>
-            </StackPanel>
+            <Border
+                HorizontalAlignment="Center"
+                VerticalAlignment="Center"
+                cw:Effects.Shadow="{ThemeResource CompatCardShadow}">
+                <Border Padding="16" Style="{ThemeResource AcrylicBorderCardStyle}">
+                    <StackPanel>
+                        <shci:CachedImage Height="120" Source="{StaticResource UI_EmotionIcon71}"/>
+                        <TextBlock
+                            Margin="0,16,0,0"
+                            HorizontalAlignment="Center"
+                            Style="{StaticResource SubtitleTextBlockStyle}"
+                            Text="{shcm:ResourceString Name=ViewPageGachaLogHint}"/>
+                        <StackPanel
+                            Margin="0,24,0,0"
+                            HorizontalAlignment="Center"
+                            Spacing="{StaticResource SettingsCardSpacing}">
+                            <cwc:SettingsCard
+                                ActionIconToolTip="{shcm:ResourceString Name=ViewPageGachaLogRefreshAction}"
+                                Command="{Binding RefreshBySTokenCommand}"
+                                Description="{shcm:ResourceString Name=ViewPageGachaLogRefreshBySTokenDescription}"
+                                Header="{shcm:ResourceString Name=ViewPageGachaLogRefreshBySToken}"
+                                HeaderIcon="{shcm:FontIcon Glyph=&#xE192;}"
+                                IsClickEnabled="True"/>
+                            <cwc:SettingsCard
+                                ActionIconToolTip="{shcm:ResourceString Name=ViewPageGachaLogRefreshAction}"
+                                Command="{Binding RefreshByWebCacheCommand}"
+                                Description="{shcm:ResourceString Name=ViewPageGachaLogRefreshByWebCacheDescription}"
+                                Header="{shcm:ResourceString Name=ViewPageGachaLogRefreshByWebCache}"
+                                HeaderIcon="{shcm:FontIcon Glyph=&#xE81E;}"
+                                IsClickEnabled="True"/>
+                            <cwc:SettingsCard
+                                ActionIconToolTip="{shcm:ResourceString Name=ViewPageGachaLogInputAction}"
+                                Command="{Binding RefreshByManualInputCommand}"
+                                Description="{shcm:ResourceString Name=ViewPageGachaLogRefreshByManualInputDescription}"
+                                Header="{shcm:ResourceString Name=ViewPageGachaLogRefreshByManualInput}"
+                                HeaderIcon="{shcm:FontIcon Glyph=&#xE765;}"
+                                IsClickEnabled="True"/>
+                            <cwc:SettingsCard
+                                ActionIconToolTip="{shcm:ResourceString Name=ViewPageGachaLogImportAction}"
+                                Command="{Binding ImportFromUIGFJsonCommand}"
+                                Description="{shcm:ResourceString Name=ViewPageGachaLogImportDescription}"
+                                Header="{shcm:ResourceString Name=ViewPageGachaLogImportHeader}"
+                                HeaderIcon="{shcm:FontIcon Glyph=&#xE8B5;}"
+                                IsClickEnabled="True"/>
+                            <cwc:SettingsCard
+                                Description="{shcm:ResourceString Name=ViewPageGachaLogRecoverFromHutaoCloudDescription}"
+                                FlyoutBase.AttachedFlyout="{StaticResource HutaoCloudFlyout}"
+                                Header="{shcm:ResourceString Name=ViewPageGachaLogHutaoCloud}"
+                                HeaderIcon="{shcm:FontIcon Glyph=&#xE753;}"
+                                IsClickEnabled="True">
+                                <mxi:Interaction.Behaviors>
+                                    <mxic:EventTriggerBehavior EventName="Click">
+                                        <shcb:ShowAttachedFlyoutAction/>
+                                    </mxic:EventTriggerBehavior>
+                                </mxi:Interaction.Behaviors>
+                            </cwc:SettingsCard>
+                        </StackPanel>
+                    </StackPanel>
+                </Border>
+            </Border>
         </Grid>
     </Grid>
 </shc:ScopedPage>
\ No newline at end of file