From 976441de18e4f58aa0d3eb3ed0ccb32e7d509c79 Mon Sep 17 00:00:00 2001
From: DismissedLight <1686188646@qq.com>
Date: Sat, 3 Feb 2024 23:13:25 +0800
Subject: [PATCH] refine spiralabyss page

---
 .../Snap.Hutao/View/Page/AchievementPage.xaml | 186 ++--
 .../View/Page/AnnouncementPage.xaml           |  37 +-
 .../View/Page/AvatarPropertyPage.xaml         |   2 +-
 .../View/Page/SpiralAbyssRecordPage.xaml      | 873 +++++++++---------
 4 files changed, 562 insertions(+), 536 deletions(-)

diff --git a/src/Snap.Hutao/Snap.Hutao/View/Page/AchievementPage.xaml b/src/Snap.Hutao/Snap.Hutao/View/Page/AchievementPage.xaml
index 15c8eca7..d5b0d1b9 100644
--- a/src/Snap.Hutao/Snap.Hutao/View/Page/AchievementPage.xaml
+++ b/src/Snap.Hutao/Snap.Hutao/View/Page/AchievementPage.xaml
@@ -197,104 +197,108 @@
                 <RowDefinition Height="auto"/>
                 <RowDefinition/>
             </Grid.RowDefinitions>
-            <Grid Margin="16" Style="{ThemeResource AcrylicBaseHighGridCardStyle}">
-                <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="{StaticResource CompatGridLength2}"/>
-                    <ColumnDefinition/>
-                </Grid.ColumnDefinitions>
 
-                <StackPanel Orientation="Horizontal">
-                    <shcp:PanelSelector
-                        x:Name="ItemsPanelSelector"
-                        Margin="8,0,0,0"
-                        LocalSettingKeySuffixForCurrent="AchievementPage.AchievementGoals"/>
-                    <Viewbox
-                        Height="32"
-                        MaxWidth="192"
-                        Margin="8,0,0,0"
-                        HorizontalAlignment="Left"
-                        Stretch="Uniform"
-                        StretchDirection="Both">
-                        <TextBlock
+            <Border Margin="16" cw:Effects.Shadow="{ThemeResource CompatCardShadow}">
+                <Grid Style="{ThemeResource AcrylicBaseHighGridCardStyle}">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="{StaticResource CompatGridLength2}"/>
+                        <ColumnDefinition/>
+                    </Grid.ColumnDefinitions>
+
+                    <StackPanel Orientation="Horizontal">
+                        <shcp:PanelSelector
+                            x:Name="ItemsPanelSelector"
+                            Margin="8,0,0,0"
+                            LocalSettingKeySuffixForCurrent="AchievementPage.AchievementGoals"/>
+                        <Viewbox
+                            Height="32"
+                            MaxWidth="192"
+                            Margin="8,0,0,0"
                             HorizontalAlignment="Left"
-                            VerticalAlignment="Center"
-                            Text="{Binding FinishDescription}"/>
-                    </Viewbox>
-                </StackPanel>
+                            Stretch="Uniform"
+                            StretchDirection="Both">
+                            <TextBlock
+                                HorizontalAlignment="Left"
+                                VerticalAlignment="Center"
+                                Text="{Binding FinishDescription}"/>
+                        </Viewbox>
+                    </StackPanel>
 
-                <CommandBar
-                    Grid.Column="1"
-                    Margin="16,0,0,0"
-                    DefaultLabelPosition="Right">
-                    <CommandBar.Resources>
-                        <StaticResource x:Key="CommandBarBackgroundOpen" ResourceKey="ControlFillColorTransparentBrush"/>
-                        <Thickness x:Key="CommandBarBorderThicknessOpen">0</Thickness>
-                    </CommandBar.Resources>
+                    <CommandBar
+                        Grid.Column="1"
+                        Margin="16,0,0,0"
+                        DefaultLabelPosition="Right">
+                        <CommandBar.Resources>
+                            <StaticResource x:Key="CommandBarBackgroundOpen" ResourceKey="ControlFillColorTransparentBrush"/>
+                            <Thickness x:Key="CommandBarBorderThicknessOpen">0</Thickness>
+                        </CommandBar.Resources>
 
-                    <CommandBar.Content>
-                        <AutoSuggestBox
-                            Width="300"
-                            Height="36"
-                            Margin="3,6,6,0"
-                            HorizontalAlignment="Stretch"
-                            VerticalContentAlignment="Center"
-                            PlaceholderText="{shcm:ResourceString Name=ViewPageAchievementSearchPlaceholder}"
-                            QueryIcon="{shcm:FontIcon Glyph=&#xE721;}"
-                            Text="{Binding SearchText, Mode=TwoWay}">
-                            <mxi:Interaction.Behaviors>
-                                <mxic:EventTriggerBehavior EventName="QuerySubmitted">
-                                    <mxic:InvokeCommandAction Command="{Binding SearchAchievementCommand}" CommandParameter="{Binding SearchText}"/>
-                                </mxic:EventTriggerBehavior>
-                            </mxi:Interaction.Behaviors>
-                        </AutoSuggestBox>
-                    </CommandBar.Content>
+                        <CommandBar.Content>
+                            <AutoSuggestBox
+                                Width="300"
+                                Height="36"
+                                Margin="3,6,6,0"
+                                HorizontalAlignment="Stretch"
+                                VerticalContentAlignment="Center"
+                                PlaceholderText="{shcm:ResourceString Name=ViewPageAchievementSearchPlaceholder}"
+                                QueryIcon="{shcm:FontIcon Glyph=&#xE721;}"
+                                Text="{Binding SearchText, Mode=TwoWay}">
+                                <mxi:Interaction.Behaviors>
+                                    <mxic:EventTriggerBehavior EventName="QuerySubmitted">
+                                        <mxic:InvokeCommandAction Command="{Binding SearchAchievementCommand}" CommandParameter="{Binding SearchText}"/>
+                                    </mxic:EventTriggerBehavior>
+                                </mxi:Interaction.Behaviors>
+                            </AutoSuggestBox>
+                        </CommandBar.Content>
 
-                    <AppBarElementContainer>
-                        <shc:SizeRestrictedContentControl Margin="2,6,3,6">
-                            <ComboBox
-                                DisplayMemberPath="Name"
-                                ItemsSource="{Binding Archives, Mode=OneWay}"
-                                SelectedItem="{Binding SelectedArchive, Mode=TwoWay}"
-                                Style="{ThemeResource CommandBarComboBoxStyle}"/>
-                        </shc:SizeRestrictedContentControl>
-                    </AppBarElementContainer>
-                    <AppBarButton
-                        Command="{Binding AddArchiveCommand}"
-                        Icon="{shcm:FontIcon Glyph=&#xE710;}"
-                        Label="{shcm:ResourceString Name=ViewPageAchievementAddArchive}"/>
-                    <AppBarButton
-                        Command="{Binding RemoveArchiveCommand}"
-                        Icon="{shcm:FontIcon Glyph=&#xE74D;}"
-                        Label="{shcm:ResourceString Name=ViewPageAchievementRemoveArchive}"/>
-                    <AppBarSeparator/>
+                        <AppBarElementContainer>
+                            <shc:SizeRestrictedContentControl Margin="2,6,3,6">
+                                <ComboBox
+                                    DisplayMemberPath="Name"
+                                    ItemsSource="{Binding Archives, Mode=OneWay}"
+                                    SelectedItem="{Binding SelectedArchive, Mode=TwoWay}"
+                                    Style="{ThemeResource CommandBarComboBoxStyle}"/>
+                            </shc:SizeRestrictedContentControl>
+                        </AppBarElementContainer>
+                        <AppBarButton
+                            Command="{Binding AddArchiveCommand}"
+                            Icon="{shcm:FontIcon Glyph=&#xE710;}"
+                            Label="{shcm:ResourceString Name=ViewPageAchievementAddArchive}"/>
+                        <AppBarButton
+                            Command="{Binding RemoveArchiveCommand}"
+                            Icon="{shcm:FontIcon Glyph=&#xE74D;}"
+                            Label="{shcm:ResourceString Name=ViewPageAchievementRemoveArchive}"/>
+                        <AppBarSeparator/>
 
-                    <AppBarButton Icon="{shcm:FontIcon Glyph=&#xE8B5;}" Label="{shcm:ResourceString Name=ViewPageAchievementImportLabel}">
-                        <AppBarButton.Flyout>
-                            <MenuFlyout Placement="BottomEdgeAlignedRight">
-                                <MenuFlyoutItem
-                                    Command="{Binding ImportUIAFFromClipboardCommand}"
-                                    Icon="{shcm:FontIcon Glyph=&#xE77F;}"
-                                    Text="{shcm:ResourceString Name=ViewPageAchievementImportFromClipboard}"/>
-                                <MenuFlyoutItem
-                                    Command="{Binding ImportUIAFFromFileCommand}"
-                                    Icon="{shcm:FontIcon Glyph=&#xE8E5;}"
-                                    Text="{shcm:ResourceString Name=ViewPageAchievementImportFromFile}"/>
-                            </MenuFlyout>
-                        </AppBarButton.Flyout>
-                    </AppBarButton>
-                    <AppBarButton
-                        Command="{Binding ExportAsUIAFToFileCommand}"
-                        Icon="{shcm:FontIcon Glyph=&#xEDE1;}"
-                        Label="{shcm:ResourceString Name=ViewPageAchievementExportLabel}"/>
-                    <AppBarSeparator/>
+                        <AppBarButton Icon="{shcm:FontIcon Glyph=&#xE8B5;}" Label="{shcm:ResourceString Name=ViewPageAchievementImportLabel}">
+                            <AppBarButton.Flyout>
+                                <MenuFlyout Placement="BottomEdgeAlignedRight">
+                                    <MenuFlyoutItem
+                                        Command="{Binding ImportUIAFFromClipboardCommand}"
+                                        Icon="{shcm:FontIcon Glyph=&#xE77F;}"
+                                        Text="{shcm:ResourceString Name=ViewPageAchievementImportFromClipboard}"/>
+                                    <MenuFlyoutItem
+                                        Command="{Binding ImportUIAFFromFileCommand}"
+                                        Icon="{shcm:FontIcon Glyph=&#xE8E5;}"
+                                        Text="{shcm:ResourceString Name=ViewPageAchievementImportFromFile}"/>
+                                </MenuFlyout>
+                            </AppBarButton.Flyout>
+                        </AppBarButton>
+                        <AppBarButton
+                            Command="{Binding ExportAsUIAFToFileCommand}"
+                            Icon="{shcm:FontIcon Glyph=&#xEDE1;}"
+                            Label="{shcm:ResourceString Name=ViewPageAchievementExportLabel}"/>
+                        <AppBarSeparator/>
+
+                        <AppBarToggleButton
+                            Command="{Binding SortUncompletedSwitchCommand}"
+                            Icon="{shcm:FontIcon Glyph=&#xE8CB;}"
+                            IsChecked="{Binding IsUncompletedItemsFirst, Mode=TwoWay}"
+                            Label="{shcm:ResourceString Name=ViewPageAchievementSortIncompletedItemsFirst}"/>
+                    </CommandBar>
+                </Grid>
+            </Border>
 
-                    <AppBarToggleButton
-                        Command="{Binding SortUncompletedSwitchCommand}"
-                        Icon="{shcm:FontIcon Glyph=&#xE8CB;}"
-                        IsChecked="{Binding IsUncompletedItemsFirst, Mode=TwoWay}"
-                        Label="{shcm:ResourceString Name=ViewPageAchievementSortIncompletedItemsFirst}"/>
-                </CommandBar>
-            </Grid>
             <Border
                 Grid.Row="1"
                 Margin="16,0,16,16"
diff --git a/src/Snap.Hutao/Snap.Hutao/View/Page/AnnouncementPage.xaml b/src/Snap.Hutao/Snap.Hutao/View/Page/AnnouncementPage.xaml
index 9d0f31dd..f49798c5 100644
--- a/src/Snap.Hutao/Snap.Hutao/View/Page/AnnouncementPage.xaml
+++ b/src/Snap.Hutao/Snap.Hutao/View/Page/AnnouncementPage.xaml
@@ -149,22 +149,24 @@
         </DataTemplate>
 
         <DataTemplate x:Key="AnnouncementPivotItemContentTemplate">
-            <ScrollViewer>
-                <ItemsRepeater
-                    Margin="16,16,16,16"
-                    HorizontalAlignment="Stretch"
-                    ItemTemplate="{StaticResource AnnouncementTemplate}"
-                    ItemsSource="{Binding List}">
-                    <ItemsRepeater.Layout>
-                        <UniformGridLayout
-                            ItemsJustification="Start"
-                            ItemsStretch="Fill"
-                            MinColumnSpacing="12"
-                            MinItemWidth="300"
-                            MinRowSpacing="12"/>
-                    </ItemsRepeater.Layout>
-                </ItemsRepeater>
-            </ScrollViewer>
+            <ItemsRepeaterScrollHost>
+                <ScrollViewer>
+                    <ItemsRepeater
+                        Margin="16,16,16,16"
+                        HorizontalAlignment="Stretch"
+                        ItemTemplate="{StaticResource AnnouncementTemplate}"
+                        ItemsSource="{Binding List}">
+                        <ItemsRepeater.Layout>
+                            <UniformGridLayout
+                                ItemsJustification="Start"
+                                ItemsStretch="Fill"
+                                MinColumnSpacing="12"
+                                MinItemWidth="300"
+                                MinRowSpacing="12"/>
+                        </ItemsRepeater.Layout>
+                    </ItemsRepeater>
+                </ScrollViewer>
+            </ItemsRepeaterScrollHost>
         </DataTemplate>
 
         <DataTemplate x:Key="HutaoAnnouncementTemplate">
@@ -202,7 +204,7 @@
     </shc:ScopedPage.Resources>
 
     <Grid>
-        <ScrollViewer Padding="0">
+        <ScrollViewer Padding="0" Style="{StaticResource DefaultScrollViewerStyle}">
             <StackPanel>
                 <StackPanel>
                     <TextBlock
@@ -243,7 +245,6 @@
                         ContentTemplate="{StaticResource AnnouncementPivotItemContentTemplate}"
                         Header="{shcm:ResourceString Name=ViewPageAnnouncementGame}"/>
                 </Pivot>
-
             </StackPanel>
         </ScrollViewer>
     </Grid>
diff --git a/src/Snap.Hutao/Snap.Hutao/View/Page/AvatarPropertyPage.xaml b/src/Snap.Hutao/Snap.Hutao/View/Page/AvatarPropertyPage.xaml
index b3273a99..a5976044 100644
--- a/src/Snap.Hutao/Snap.Hutao/View/Page/AvatarPropertyPage.xaml
+++ b/src/Snap.Hutao/Snap.Hutao/View/Page/AvatarPropertyPage.xaml
@@ -513,7 +513,7 @@
                                 <StackPanel Orientation="Horizontal">
                                     <shcp:PanelSelector
                                         x:Name="ItemsPanelSelector"
-                                        Margin="6,8,0,0"
+                                        Margin="4,8,0,0"
                                         LocalSettingKeySuffixForCurrent="AvatarPropertyPage.Summary.Avatars"/>
                                     <ToggleButton
                                         x:Name="RefreshTimeToggle"
diff --git a/src/Snap.Hutao/Snap.Hutao/View/Page/SpiralAbyssRecordPage.xaml b/src/Snap.Hutao/Snap.Hutao/View/Page/SpiralAbyssRecordPage.xaml
index 167943ae..2614bd10 100644
--- a/src/Snap.Hutao/Snap.Hutao/View/Page/SpiralAbyssRecordPage.xaml
+++ b/src/Snap.Hutao/Snap.Hutao/View/Page/SpiralAbyssRecordPage.xaml
@@ -3,6 +3,7 @@
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:clw="using:CommunityToolkit.Labs.WinUI"
+    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"
@@ -11,6 +12,7 @@
     xmlns:shcb="using:Snap.Hutao.Control.Behavior"
     xmlns:shci="using:Snap.Hutao.Control.Image"
     xmlns:shcm="using:Snap.Hutao.Control.Markup"
+    xmlns:shcp="using:Snap.Hutao.Control.Panel"
     xmlns:shct="using:Snap.Hutao.Control.Text"
     xmlns:shvcom="using:Snap.Hutao.ViewModel.Complex"
     xmlns:shvcon="using:Snap.Hutao.View.Control"
@@ -301,15 +303,8 @@
             <RowDefinition Height="auto"/>
             <RowDefinition/>
         </Grid.RowDefinitions>
-        <Border
-            Grid.Row="0"
-            Height="{ThemeResource AppBarThemeCompactHeight}"
-            VerticalAlignment="Top"
-            Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
-            BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
-            BorderThickness="0,0,0,1"/>
 
-        <Pivot Grid.RowSpan="2">
+        <Pivot Grid.RowSpan="2" Style="{ThemeResource CardPivotStyle}">
             <Pivot.RightHeader>
                 <CommandBar Grid.Row="0" DefaultLabelPosition="Right">
                     <AppBarButton
@@ -324,176 +319,180 @@
             </Pivot.RightHeader>
 
             <PivotItem Header="{shcm:ResourceString Name=ViewSpiralAbyssDetail}">
-                <SplitView
-                    Grid.Row="1"
-                    DisplayMode="Inline"
-                    IsPaneOpen="True"
-                    OpenPaneLength="248"
-                    PaneBackground="Transparent">
-                    <SplitView.Pane>
-                        <ListView
-                            Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
-                            ItemTemplate="{StaticResource SpiralAbyssListTemplate}"
-                            ItemsSource="{Binding SpiralAbyssEntries}"
-                            SelectedItem="{Binding SelectedView, Mode=TwoWay}"/>
-                    </SplitView.Pane>
-                    <SplitView.Content>
-                        <ScrollViewer>
-                            <StackPanel DataContext="{Binding SelectedView}">
-                                <Grid Margin="16,12,16,0">
-                                    <Grid.ColumnDefinitions>
-                                        <ColumnDefinition/>
-                                        <ColumnDefinition Width="auto"/>
-                                    </Grid.ColumnDefinitions>
-                                    <StackPanel Grid.Column="0" Margin="1,0,0,0">
-                                        <!--  渊月祝福  -->
-                                        <TextBlock
-                                            Margin="0,0,16,0"
-                                            Style="{ThemeResource SubtitleTextBlockStyle}"
-                                            Text="{Binding BlessingName}"/>
+                <Border Margin="16" cw:Effects.Shadow="{ThemeResource CompatCardShadow}">
+                    <Border Style="{ThemeResource AcrylicBorderCardStyle}">
+                        <SplitView
+                            DisplayMode="Inline"
+                            IsPaneOpen="True"
+                            OpenPaneLength="248"
+                            PaneBackground="Transparent">
+                            <SplitView.Pane>
+                                <ListView
+                                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
+                                    ItemTemplate="{StaticResource SpiralAbyssListTemplate}"
+                                    ItemsSource="{Binding SpiralAbyssEntries}"
+                                    SelectedItem="{Binding SelectedView, Mode=TwoWay}"/>
+                            </SplitView.Pane>
+                            <SplitView.Content>
+                                <ScrollViewer>
+                                    <StackPanel DataContext="{Binding SelectedView}">
+                                        <Grid Margin="16,12,16,0">
+                                            <Grid.ColumnDefinitions>
+                                                <ColumnDefinition/>
+                                                <ColumnDefinition Width="auto"/>
+                                            </Grid.ColumnDefinitions>
+                                            <StackPanel Grid.Column="0" Margin="1,0,0,0">
+                                                <!--  渊月祝福  -->
+                                                <TextBlock
+                                                    Margin="0,0,16,0"
+                                                    Style="{ThemeResource SubtitleTextBlockStyle}"
+                                                    Text="{Binding BlessingName}"/>
+                                                <ItemsControl
+                                                    Margin="0,0,16,0"
+                                                    ItemTemplate="{StaticResource DescriptionTextTemplate}"
+                                                    ItemsSource="{Binding Blessings}"/>
+                                            </StackPanel>
+
+                                            <AppBarButton
+                                                Grid.Column="1"
+                                                Icon="{shcm:FontIcon Glyph=&#xE8A1;}"
+                                                Label="{shcm:ResourceString Name=ViewSpiralAbyssStatistics}"
+                                                Visibility="{Binding Engaged, Converter={StaticResource BoolToVisibilityConverter}}">
+                                                <AppBarButton.Flyout>
+                                                    <Flyout Placement="BottomEdgeAlignedRight">
+                                                        <Flyout.FlyoutPresenterStyle>
+                                                            <Style BasedOn="{StaticResource DefaultFlyoutPresenterStyle}" TargetType="FlyoutPresenter">
+                                                                <Setter Property="MaxWidth" Value="1920"/>
+                                                            </Style>
+                                                        </Flyout.FlyoutPresenterStyle>
+                                                        <Grid ColumnSpacing="6">
+                                                            <Grid.Resources>
+                                                                <x:Double x:Key="SettingsCardWrapThreshold">0</x:Double>
+                                                                <x:Double x:Key="SettingsCardWrapNoIconThreshold">0</x:Double>
+                                                                <x:Double x:Key="SettingsCardMinHeight">0</x:Double>
+                                                            </Grid.Resources>
+                                                            <Grid.ColumnDefinitions>
+                                                                <ColumnDefinition Width="305"/>
+                                                                <ColumnDefinition Width="225"/>
+                                                            </Grid.ColumnDefinitions>
+
+                                                            <StackPanel Grid.Column="0" Spacing="{StaticResource SettingsCardSpacing}">
+                                                                <cwc:SettingsCard Header="{shcm:ResourceString Name=ViewSpiralAbyssDefeat}">
+                                                                    <StackPanel Orientation="Horizontal">
+                                                                        <TextBlock
+                                                                            Margin="0,0,16,0"
+                                                                            VerticalAlignment="Center"
+                                                                            Text="{Binding Defeat.Value}"/>
+                                                                        <shci:CachedImage
+                                                                            Width="48"
+                                                                            Height="48"
+                                                                            Margin="-8,-24,-8,-8"
+                                                                            Source="{Binding Defeat.SideIcon}"/>
+                                                                    </StackPanel>
+                                                                </cwc:SettingsCard>
+
+                                                                <cwc:SettingsCard Header="{shcm:ResourceString Name=ViewSpiralAbyssDamage}">
+                                                                    <StackPanel Orientation="Horizontal">
+                                                                        <TextBlock
+                                                                            Margin="0,0,16,0"
+                                                                            VerticalAlignment="Center"
+                                                                            Text="{Binding Damage.Value}"/>
+                                                                        <shci:CachedImage
+                                                                            Width="48"
+                                                                            Height="48"
+                                                                            Margin="-8,-24,-8,-8"
+                                                                            Source="{Binding Damage.SideIcon}"/>
+                                                                    </StackPanel>
+                                                                </cwc:SettingsCard>
+
+                                                                <cwc:SettingsCard Header="{shcm:ResourceString Name=ViewSpiralAbyssTakeDamage}">
+                                                                    <StackPanel Orientation="Horizontal">
+                                                                        <TextBlock
+                                                                            Margin="0,0,16,0"
+                                                                            VerticalAlignment="Center"
+                                                                            Text="{Binding TakeDamage.Value}"/>
+                                                                        <shci:CachedImage
+                                                                            Width="48"
+                                                                            Height="48"
+                                                                            Margin="-8,-24,-8,-8"
+                                                                            Source="{Binding TakeDamage.SideIcon}"/>
+                                                                    </StackPanel>
+                                                                </cwc:SettingsCard>
+
+                                                                <cwc:SettingsCard Header="{shcm:ResourceString Name=ViewSpiralAbyssNormalSkill}">
+                                                                    <StackPanel Orientation="Horizontal">
+                                                                        <TextBlock
+                                                                            Margin="0,0,16,0"
+                                                                            VerticalAlignment="Center"
+                                                                            Text="{Binding NormalSkill.Value}"/>
+                                                                        <shci:CachedImage
+                                                                            Width="48"
+                                                                            Height="48"
+                                                                            Margin="-8,-24,-8,-8"
+                                                                            Source="{Binding NormalSkill.SideIcon}"/>
+                                                                    </StackPanel>
+                                                                </cwc:SettingsCard>
+
+                                                                <cwc:SettingsCard Header="{shcm:ResourceString Name=ViewSpiralAbyssEnergySkill}">
+                                                                    <StackPanel Orientation="Horizontal">
+                                                                        <TextBlock
+                                                                            Margin="0,0,16,0"
+                                                                            VerticalAlignment="Center"
+                                                                            Text="{Binding EnergySkill.Value}"/>
+                                                                        <shci:CachedImage
+                                                                            Width="48"
+                                                                            Height="48"
+                                                                            Margin="-8,-24,-8,-8"
+                                                                            Source="{Binding EnergySkill.SideIcon}"/>
+                                                                    </StackPanel>
+                                                                </cwc:SettingsCard>
+                                                            </StackPanel>
+                                                            <StackPanel Grid.Column="1" Spacing="{StaticResource SettingsCardSpacing}">
+                                                                <cwc:SettingsCard Content="{Binding MaxFloor}" Header="{shcm:ResourceString Name=ViewSpiralAbyssMaxFloor}"/>
+                                                                <cwc:SettingsCard Content="{Binding TotalBattleTimes}" Header="{shcm:ResourceString Name=ViewSpiralAbyssBattleTimes}"/>
+                                                                <cwc:SettingsCard Content="{Binding TotalStar}" Header="{shcm:ResourceString Name=ViewSpiralAbyssTotalStar}"/>
+
+                                                                <TextBlock
+                                                                    Margin="1,6,0,5"
+                                                                    Style="{StaticResource SettingsSectionHeaderTextBlockStyle}"
+                                                                    Text="{shcm:ResourceString Name=ViewSpiralAbyssReveal}"/>
+                                                                <ItemsControl HorizontalAlignment="Left" ItemsSource="{Binding Reveals}">
+                                                                    <ItemsControl.ItemsPanel>
+                                                                        <ItemsPanelTemplate>
+                                                                            <cwc:UniformGrid ColumnSpacing="3" Columns="4"/>
+                                                                        </ItemsPanelTemplate>
+                                                                    </ItemsControl.ItemsPanel>
+                                                                    <ItemsControl.ItemTemplate>
+                                                                        <DataTemplate>
+                                                                            <shvcon:BottomTextControl Text="{Binding Value}">
+                                                                                <shvcon:ItemIcon
+                                                                                    Width="52"
+                                                                                    Height="52"
+                                                                                    Icon="{Binding Icon}"
+                                                                                    Quality="{Binding Quality}"/>
+                                                                            </shvcon:BottomTextControl>
+                                                                        </DataTemplate>
+                                                                    </ItemsControl.ItemTemplate>
+                                                                </ItemsControl>
+                                                            </StackPanel>
+                                                        </Grid>
+                                                    </Flyout>
+                                                </AppBarButton.Flyout>
+                                            </AppBarButton>
+                                        </Grid>
+
+                                        <!--  各层信息  -->
                                         <ItemsControl
-                                            Margin="0,0,16,0"
-                                            ItemTemplate="{StaticResource DescriptionTextTemplate}"
-                                            ItemsSource="{Binding Blessings}"/>
+                                            Margin="16,12,0,0"
+                                            ItemTemplate="{StaticResource SpiralAbyssFloorTemplate}"
+                                            ItemsSource="{Binding Floors}"/>
                                     </StackPanel>
+                                </ScrollViewer>
+                            </SplitView.Content>
+                        </SplitView>
+                    </Border>
+                </Border>
 
-                                    <AppBarButton
-                                        Grid.Column="1"
-                                        Icon="{shcm:FontIcon Glyph=&#xE8A1;}"
-                                        Label="{shcm:ResourceString Name=ViewSpiralAbyssStatistics}"
-                                        Visibility="{Binding Engaged, Converter={StaticResource BoolToVisibilityConverter}}">
-                                        <AppBarButton.Flyout>
-                                            <Flyout Placement="BottomEdgeAlignedRight">
-                                                <Flyout.FlyoutPresenterStyle>
-                                                    <Style BasedOn="{StaticResource DefaultFlyoutPresenterStyle}" TargetType="FlyoutPresenter">
-                                                        <Setter Property="MaxWidth" Value="1920"/>
-                                                    </Style>
-                                                </Flyout.FlyoutPresenterStyle>
-                                                <Grid ColumnSpacing="6">
-                                                    <Grid.Resources>
-                                                        <x:Double x:Key="SettingsCardWrapThreshold">0</x:Double>
-                                                        <x:Double x:Key="SettingsCardWrapNoIconThreshold">0</x:Double>
-                                                        <x:Double x:Key="SettingsCardMinHeight">0</x:Double>
-                                                    </Grid.Resources>
-                                                    <Grid.ColumnDefinitions>
-                                                        <ColumnDefinition Width="305"/>
-                                                        <ColumnDefinition Width="225"/>
-                                                    </Grid.ColumnDefinitions>
-
-                                                    <StackPanel Grid.Column="0" Spacing="{StaticResource SettingsCardSpacing}">
-                                                        <cwc:SettingsCard Header="{shcm:ResourceString Name=ViewSpiralAbyssDefeat}">
-                                                            <StackPanel Orientation="Horizontal">
-                                                                <TextBlock
-                                                                    Margin="0,0,16,0"
-                                                                    VerticalAlignment="Center"
-                                                                    Text="{Binding Defeat.Value}"/>
-                                                                <shci:CachedImage
-                                                                    Width="48"
-                                                                    Height="48"
-                                                                    Margin="-8,-24,-8,-8"
-                                                                    Source="{Binding Defeat.SideIcon}"/>
-                                                            </StackPanel>
-                                                        </cwc:SettingsCard>
-
-                                                        <cwc:SettingsCard Header="{shcm:ResourceString Name=ViewSpiralAbyssDamage}">
-                                                            <StackPanel Orientation="Horizontal">
-                                                                <TextBlock
-                                                                    Margin="0,0,16,0"
-                                                                    VerticalAlignment="Center"
-                                                                    Text="{Binding Damage.Value}"/>
-                                                                <shci:CachedImage
-                                                                    Width="48"
-                                                                    Height="48"
-                                                                    Margin="-8,-24,-8,-8"
-                                                                    Source="{Binding Damage.SideIcon}"/>
-                                                            </StackPanel>
-                                                        </cwc:SettingsCard>
-
-                                                        <cwc:SettingsCard Header="{shcm:ResourceString Name=ViewSpiralAbyssTakeDamage}">
-                                                            <StackPanel Orientation="Horizontal">
-                                                                <TextBlock
-                                                                    Margin="0,0,16,0"
-                                                                    VerticalAlignment="Center"
-                                                                    Text="{Binding TakeDamage.Value}"/>
-                                                                <shci:CachedImage
-                                                                    Width="48"
-                                                                    Height="48"
-                                                                    Margin="-8,-24,-8,-8"
-                                                                    Source="{Binding TakeDamage.SideIcon}"/>
-                                                            </StackPanel>
-                                                        </cwc:SettingsCard>
-
-                                                        <cwc:SettingsCard Header="{shcm:ResourceString Name=ViewSpiralAbyssNormalSkill}">
-                                                            <StackPanel Orientation="Horizontal">
-                                                                <TextBlock
-                                                                    Margin="0,0,16,0"
-                                                                    VerticalAlignment="Center"
-                                                                    Text="{Binding NormalSkill.Value}"/>
-                                                                <shci:CachedImage
-                                                                    Width="48"
-                                                                    Height="48"
-                                                                    Margin="-8,-24,-8,-8"
-                                                                    Source="{Binding NormalSkill.SideIcon}"/>
-                                                            </StackPanel>
-                                                        </cwc:SettingsCard>
-
-                                                        <cwc:SettingsCard Header="{shcm:ResourceString Name=ViewSpiralAbyssEnergySkill}">
-                                                            <StackPanel Orientation="Horizontal">
-                                                                <TextBlock
-                                                                    Margin="0,0,16,0"
-                                                                    VerticalAlignment="Center"
-                                                                    Text="{Binding EnergySkill.Value}"/>
-                                                                <shci:CachedImage
-                                                                    Width="48"
-                                                                    Height="48"
-                                                                    Margin="-8,-24,-8,-8"
-                                                                    Source="{Binding EnergySkill.SideIcon}"/>
-                                                            </StackPanel>
-                                                        </cwc:SettingsCard>
-                                                    </StackPanel>
-                                                    <StackPanel Grid.Column="1" Spacing="{StaticResource SettingsCardSpacing}">
-                                                        <cwc:SettingsCard Content="{Binding MaxFloor}" Header="{shcm:ResourceString Name=ViewSpiralAbyssMaxFloor}"/>
-                                                        <cwc:SettingsCard Content="{Binding TotalBattleTimes}" Header="{shcm:ResourceString Name=ViewSpiralAbyssBattleTimes}"/>
-                                                        <cwc:SettingsCard Content="{Binding TotalStar}" Header="{shcm:ResourceString Name=ViewSpiralAbyssTotalStar}"/>
-
-                                                        <TextBlock
-                                                            Margin="1,6,0,5"
-                                                            Style="{StaticResource SettingsSectionHeaderTextBlockStyle}"
-                                                            Text="{shcm:ResourceString Name=ViewSpiralAbyssReveal}"/>
-                                                        <ItemsControl HorizontalAlignment="Left" ItemsSource="{Binding Reveals}">
-                                                            <ItemsControl.ItemsPanel>
-                                                                <ItemsPanelTemplate>
-                                                                    <cwc:UniformGrid ColumnSpacing="3" Columns="4"/>
-                                                                </ItemsPanelTemplate>
-                                                            </ItemsControl.ItemsPanel>
-                                                            <ItemsControl.ItemTemplate>
-                                                                <DataTemplate>
-                                                                    <shvcon:BottomTextControl Text="{Binding Value}">
-                                                                        <shvcon:ItemIcon
-                                                                            Width="52"
-                                                                            Height="52"
-                                                                            Icon="{Binding Icon}"
-                                                                            Quality="{Binding Quality}"/>
-                                                                    </shvcon:BottomTextControl>
-                                                                </DataTemplate>
-                                                            </ItemsControl.ItemTemplate>
-                                                        </ItemsControl>
-                                                    </StackPanel>
-                                                </Grid>
-                                            </Flyout>
-                                        </AppBarButton.Flyout>
-                                    </AppBarButton>
-                                </Grid>
-
-                                <!--  各层信息  -->
-                                <ItemsControl
-                                    Margin="16,12,0,0"
-                                    ItemTemplate="{StaticResource SpiralAbyssFloorTemplate}"
-                                    ItemsSource="{Binding Floors}"/>
-                            </StackPanel>
-                        </ScrollViewer>
-                    </SplitView.Content>
-                </SplitView>
             </PivotItem>
 
             <PivotItem Header="{shcm:ResourceString Name=ViewSpiralAbyssHutaoStatistics}">
@@ -505,40 +504,41 @@
                     <Grid.Resources>
                         <DataTemplate x:Key="TeamItemTemplate" d:DataType="shvcom:Team">
                             <Border Margin="0,0,16,8" Style="{StaticResource BorderCardStyle}">
-                                <Viewbox Stretch="Uniform">
-                                    <Grid Margin="6">
-                                        <Grid.ColumnDefinitions>
-                                            <ColumnDefinition Width="auto"/>
-                                            <ColumnDefinition Width="120"/>
-                                        </Grid.ColumnDefinitions>
-                                        <ItemsControl
-                                            MinWidth="210"
-                                            HorizontalAlignment="Left"
-                                            ItemsSource="{Binding}">
-                                            <ItemsControl.ItemsPanel>
-                                                <ItemsPanelTemplate>
-                                                    <StackPanel Orientation="Horizontal" Spacing="6"/>
-                                                </ItemsPanelTemplate>
-                                            </ItemsControl.ItemsPanel>
-                                            <ItemsControl.ItemTemplate>
-                                                <DataTemplate>
-                                                    <shvcon:ItemIcon
-                                                        Width="48"
-                                                        Height="48"
-                                                        Icon="{Binding Icon}"
-                                                        Quality="{Binding Quality}"/>
-                                                </DataTemplate>
-                                            </ItemsControl.ItemTemplate>
-                                        </ItemsControl>
-                                        <Viewbox Grid.Column="1" Stretch="Uniform">
-                                            <TextBlock
-                                                Margin="16,8"
-                                                HorizontalAlignment="Center"
-                                                VerticalAlignment="Center"
-                                                Text="{Binding Rate}"/>
-                                        </Viewbox>
-                                    </Grid>
-                                </Viewbox>
+                                <Grid Margin="6">
+                                    <Grid.ColumnDefinitions>
+                                        <ColumnDefinition Width="184"/>
+                                        <ColumnDefinition Width="*"/>
+                                    </Grid.ColumnDefinitions>
+                                    <ItemsControl
+                                        MinWidth="210"
+                                        HorizontalAlignment="Left"
+                                        ItemsSource="{Binding}">
+                                        <ItemsControl.ItemsPanel>
+                                            <ItemsPanelTemplate>
+                                                <StackPanel Orientation="Horizontal" Spacing="6"/>
+                                            </ItemsPanelTemplate>
+                                        </ItemsControl.ItemsPanel>
+                                        <ItemsControl.ItemTemplate>
+                                            <DataTemplate>
+                                                <shvcon:ItemIcon
+                                                    Width="40"
+                                                    Height="40"
+                                                    Icon="{Binding Icon}"
+                                                    Quality="{Binding Quality}"/>
+                                            </DataTemplate>
+                                        </ItemsControl.ItemTemplate>
+                                    </ItemsControl>
+                                    <Viewbox
+                                        Grid.Column="1"
+                                        Height="40"
+                                        Stretch="Uniform">
+                                        <TextBlock
+                                            Margin="4,8"
+                                            HorizontalAlignment="Center"
+                                            VerticalAlignment="Center"
+                                            Text="{Binding Rate}"/>
+                                    </Viewbox>
+                                </Grid>
                             </Border>
                         </DataTemplate>
 
@@ -549,7 +549,7 @@
                         </DataTemplate>
                     </Grid.Resources>
 
-                    <Pivot Visibility="{Binding Overview, Converter={StaticResource EmptyObjectToVisibilityConverter}}">
+                    <Pivot Style="{ThemeResource CardPivotStyle}" Visibility="{Binding Overview, Converter={StaticResource EmptyObjectToVisibilityConverter}}">
                         <Pivot.RightHeader>
                             <CommandBar DefaultLabelPosition="Right">
                                 <AppBarButton Icon="{shcm:FontIcon Glyph=&#xE946;}" Label="{shcm:ResourceString Name=ViewPageHutaoDatabaseOverview}">
@@ -599,235 +599,256 @@
                             </CommandBar>
                         </Pivot.RightHeader>
                         <PivotItem Header="{shcm:ResourceString Name=ViewPageHutaoDatabaseOverviewAvatarUsageRank}">
-                            <Grid>
-                                <Grid.RowDefinitions>
-                                    <RowDefinition Height="auto"/>
-                                    <RowDefinition/>
-                                </Grid.RowDefinitions>
-                                <Grid Grid.Row="0" Margin="16,6,0,0">
-                                    <Grid.ColumnDefinitions>
-                                        <ColumnDefinition Width="auto"/>
-                                        <ColumnDefinition/>
-                                    </Grid.ColumnDefinitions>
-                                    <cwc:Segmented
-                                        DisplayMemberPath="Floor"
-                                        ItemsSource="{Binding AvatarUsageRanks}"
-                                        SelectedItem="{Binding SelectedAvatarUsageRank, Mode=TwoWay}"/>
-                                    <TextBlock
-                                        Grid.Column="1"
-                                        Margin="12,0,0,0"
-                                        VerticalAlignment="Center"
-                                        Text="{shcm:ResourceString Name=ViewSpiralAbyssAvatarUsageRankDescription}"/>
-                                </Grid>
+                            <Border Margin="16" cw:Effects.Shadow="{ThemeResource CompatCardShadow}">
+                                <Grid Style="{ThemeResource AcrylicGridCardStyle}">
+                                    <Grid.RowDefinitions>
+                                        <RowDefinition Height="auto"/>
+                                        <RowDefinition/>
+                                    </Grid.RowDefinitions>
+                                    <Grid Grid.Row="0" Margin="16,16,0,16">
+                                        <Grid.ColumnDefinitions>
+                                            <ColumnDefinition Width="auto"/>
+                                            <ColumnDefinition/>
+                                        </Grid.ColumnDefinitions>
+                                        <cwc:Segmented
+                                            DisplayMemberPath="Floor"
+                                            ItemsSource="{Binding AvatarUsageRanks}"
+                                            SelectedItem="{Binding SelectedAvatarUsageRank, Mode=TwoWay}"/>
+                                        <TextBlock
+                                            Grid.Column="1"
+                                            Margin="12,0,0,0"
+                                            VerticalAlignment="Center"
+                                            Text="{shcm:ResourceString Name=ViewSpiralAbyssAvatarUsageRankDescription}"/>
+                                    </Grid>
 
-                                <GridView
-                                    Grid.Row="1"
-                                    Padding="16,16,4,0"
-                                    DataContext="{Binding SelectedAvatarUsageRank}"
-                                    ItemContainerStyle="{StaticResource LargeGridViewItemStyle}"
-                                    ItemTemplate="{StaticResource RatedAvatarTemplate}"
-                                    ItemsSource="{Binding Avatars}"
-                                    SelectionMode="None"/>
-                            </Grid>
+                                    <GridView
+                                        Grid.Row="1"
+                                        Padding="16,0,4,0"
+                                        DataContext="{Binding SelectedAvatarUsageRank}"
+                                        ItemContainerStyle="{StaticResource LargeGridViewItemStyle}"
+                                        ItemTemplate="{StaticResource RatedAvatarTemplate}"
+                                        ItemsSource="{Binding Avatars}"
+                                        SelectionMode="None"/>
+                                </Grid>
+                            </Border>
                         </PivotItem>
                         <PivotItem Header="{shcm:ResourceString Name=ViewPageHutaoDatabaseOverviewAvatarAppearanceRank}">
-                            <Grid>
-                                <Grid.RowDefinitions>
-                                    <RowDefinition Height="auto"/>
-                                    <RowDefinition/>
-                                </Grid.RowDefinitions>
-                                <Grid Grid.Row="0" Margin="16,6,0,0">
-                                    <Grid.ColumnDefinitions>
-                                        <ColumnDefinition Width="auto"/>
-                                        <ColumnDefinition/>
-                                    </Grid.ColumnDefinitions>
-                                    <cwc:Segmented
-                                        DisplayMemberPath="Floor"
-                                        ItemsSource="{Binding AvatarAppearanceRanks}"
-                                        SelectedItem="{Binding SelectedAvatarAppearanceRank, Mode=TwoWay}"/>
-                                    <TextBlock
-                                        Grid.Column="1"
-                                        Margin="12,0,0,0"
-                                        VerticalAlignment="Center"
-                                        Text="{shcm:ResourceString Name=ViewSpiralAbyssAvatarAppearanceRankDescription}"/>
-                                </Grid>
+                            <Border Margin="16" cw:Effects.Shadow="{ThemeResource CompatCardShadow}">
+                                <Grid Style="{ThemeResource AcrylicGridCardStyle}">
+                                    <Grid.RowDefinitions>
+                                        <RowDefinition Height="auto"/>
+                                        <RowDefinition/>
+                                    </Grid.RowDefinitions>
+                                    <Grid Grid.Row="0" Margin="16,16,0,16">
+                                        <Grid.ColumnDefinitions>
+                                            <ColumnDefinition Width="auto"/>
+                                            <ColumnDefinition/>
+                                        </Grid.ColumnDefinitions>
+                                        <cwc:Segmented
+                                            DisplayMemberPath="Floor"
+                                            ItemsSource="{Binding AvatarAppearanceRanks}"
+                                            SelectedItem="{Binding SelectedAvatarAppearanceRank, Mode=TwoWay}"/>
+                                        <TextBlock
+                                            Grid.Column="1"
+                                            Margin="12,0,0,0"
+                                            VerticalAlignment="Center"
+                                            Text="{shcm:ResourceString Name=ViewSpiralAbyssAvatarAppearanceRankDescription}"/>
+                                    </Grid>
 
-                                <GridView
-                                    Grid.Row="1"
-                                    Padding="16,16,4,0"
-                                    DataContext="{Binding SelectedAvatarAppearanceRank}"
-                                    ItemContainerStyle="{StaticResource LargeGridViewItemStyle}"
-                                    ItemTemplate="{StaticResource RatedAvatarTemplate}"
-                                    ItemsSource="{Binding Avatars}"
-                                    SelectionMode="None"/>
-                            </Grid>
+                                    <GridView
+                                        Grid.Row="1"
+                                        Padding="16,0,4,0"
+                                        DataContext="{Binding SelectedAvatarAppearanceRank}"
+                                        ItemContainerStyle="{StaticResource LargeGridViewItemStyle}"
+                                        ItemTemplate="{StaticResource RatedAvatarTemplate}"
+                                        ItemsSource="{Binding Avatars}"
+                                        SelectionMode="None"/>
+                                </Grid>
+                            </Border>
                         </PivotItem>
                         <PivotItem Header="{shcm:ResourceString Name=ViewPageHutaoDatabaseOverviewTeamAppearance}">
-                            <Grid>
-                                <Grid.RowDefinitions>
-                                    <RowDefinition Height="auto"/>
-                                    <RowDefinition/>
-                                </Grid.RowDefinitions>
-                                <cwc:Segmented
-                                    Grid.Row="0"
-                                    Margin="16,6,0,0"
-                                    DisplayMemberPath="Floor"
-                                    ItemsSource="{Binding TeamAppearances}"
-                                    SelectedItem="{Binding SelectedTeamAppearance, Mode=TwoWay}"/>
+                            <Border Margin="16" cw:Effects.Shadow="{ThemeResource CompatCardShadow}">
+                                <Grid Style="{ThemeResource AcrylicGridCardStyle}">
+                                    <Grid.RowDefinitions>
+                                        <RowDefinition Height="auto"/>
+                                        <RowDefinition/>
+                                    </Grid.RowDefinitions>
+                                    <cwc:Segmented
+                                        Grid.Row="0"
+                                        Margin="16,16,0,16"
+                                        DisplayMemberPath="Floor"
+                                        ItemsSource="{Binding TeamAppearances}"
+                                        SelectedItem="{Binding SelectedTeamAppearance, Mode=TwoWay}"/>
 
-                                <Grid
-                                    Grid.Row="1"
-                                    Margin="16,0,0,0"
-                                    ColumnSpacing="8"
-                                    DataContext="{Binding SelectedTeamAppearance}">
-                                    <Grid.ColumnDefinitions>
-                                        <ColumnDefinition/>
-                                        <ColumnDefinition/>
-                                    </Grid.ColumnDefinitions>
-                                    <ListView
-                                        Grid.Column="0"
-                                        Padding="0,8,0,0"
-                                        ItemContainerStyle="{ThemeResource NoneSelectionListViewItemStyle}"
-                                        ItemTemplate="{StaticResource TeamItemTemplate}"
-                                        ItemsSource="{Binding Up}"
-                                        SelectionMode="None"/>
-                                    <ListView
-                                        Grid.Column="1"
-                                        Padding="0,8,0,0"
-                                        ItemContainerStyle="{ThemeResource NoneSelectionListViewItemStyle}"
-                                        ItemTemplate="{StaticResource TeamItemTemplate}"
-                                        ItemsSource="{Binding Down}"
-                                        SelectionMode="None"/>
+                                    <Grid
+                                        Grid.Row="1"
+                                        Margin="16,0,0,0"
+                                        ColumnSpacing="8"
+                                        DataContext="{Binding SelectedTeamAppearance}">
+                                        <Grid.ColumnDefinitions>
+                                            <ColumnDefinition/>
+                                            <ColumnDefinition/>
+                                        </Grid.ColumnDefinitions>
+                                        <ListView
+                                            Grid.Column="0"
+                                            Padding="0,0,0,0"
+                                            ItemContainerStyle="{ThemeResource NoneSelectionListViewItemStyle}"
+                                            ItemTemplate="{StaticResource TeamItemTemplate}"
+                                            ItemsSource="{Binding Up}"
+                                            SelectionMode="None">
+                                            <ListView.ItemsPanel>
+                                                <ItemsPanelTemplate>
+                                                    <shcp:UniformPanel MinItemWidth="240"/>
+                                                </ItemsPanelTemplate>
+                                            </ListView.ItemsPanel>
+                                        </ListView>
+                                        <ListView
+                                            Grid.Column="1"
+                                            Padding="0,0,0,0"
+                                            ItemContainerStyle="{ThemeResource NoneSelectionListViewItemStyle}"
+                                            ItemTemplate="{StaticResource TeamItemTemplate}"
+                                            ItemsSource="{Binding Down}"
+                                            SelectionMode="None">
+                                            <ListView.ItemsPanel>
+                                                <ItemsPanelTemplate>
+                                                    <shcp:UniformPanel MinItemWidth="240"/>
+                                                </ItemsPanelTemplate>
+                                            </ListView.ItemsPanel>
+                                        </ListView>
+                                    </Grid>
                                 </Grid>
-                            </Grid>
+                            </Border>
                         </PivotItem>
                         <PivotItem Header="{shcm:ResourceString Name=ViewPageHutaoDatabaseOverviewAvatarConstellation}">
-                            <Grid>
-                                <Grid.RowDefinitions>
-                                    <RowDefinition Height="auto"/>
-                                    <RowDefinition/>
-                                </Grid.RowDefinitions>
-                                <Grid Margin="16,0,16,0">
-                                    <Grid.ColumnDefinitions>
-                                        <ColumnDefinition Width="48"/>
-                                        <ColumnDefinition/>
-                                        <ColumnDefinition/>
-                                        <ColumnDefinition/>
-                                        <ColumnDefinition/>
-                                        <ColumnDefinition/>
-                                        <ColumnDefinition/>
-                                        <ColumnDefinition/>
-                                        <ColumnDefinition/>
-                                    </Grid.ColumnDefinitions>
-                                    <TextBlock
-                                        Grid.Column="0"
-                                        Margin="6"
-                                        HorizontalAlignment="Center"
-                                        Style="{StaticResource CaptionTextBlockStyle}"
-                                        Text="{shcm:ResourceString Name=ViewPageHutaoDatabaseOverviewConstellationAvatar}"/>
-                                    <TextBlock
-                                        Grid.Column="1"
-                                        Margin="6"
-                                        HorizontalAlignment="Center"
-                                        Style="{StaticResource CaptionTextBlockStyle}"
-                                        Text="{shcm:ResourceString Name=ViewPageHutaoDatabaseOverviewConstellationHolding}"/>
-                                    <TextBlock
-                                        Grid.Column="2"
-                                        Margin="6"
-                                        HorizontalAlignment="Center"
-                                        Style="{StaticResource CaptionTextBlockStyle}"
-                                        Text="{shcm:ResourceString Name=ViewPageHutaoDatabaseOverviewConstellation0}"/>
-                                    <TextBlock
-                                        Grid.Column="3"
-                                        Margin="6"
-                                        HorizontalAlignment="Center"
-                                        Style="{StaticResource CaptionTextBlockStyle}"
-                                        Text="{shcm:ResourceString Name=ViewPageHutaoDatabaseOverviewConstellation1}"/>
-                                    <TextBlock
-                                        Grid.Column="4"
-                                        Margin="6"
-                                        HorizontalAlignment="Center"
-                                        Style="{StaticResource CaptionTextBlockStyle}"
-                                        Text="{shcm:ResourceString Name=ViewPageHutaoDatabaseOverviewConstellation2}"/>
-                                    <TextBlock
-                                        Grid.Column="5"
-                                        Margin="6"
-                                        HorizontalAlignment="Center"
-                                        Style="{StaticResource CaptionTextBlockStyle}"
-                                        Text="{shcm:ResourceString Name=ViewPageHutaoDatabaseOverviewConstellation3}"/>
-                                    <TextBlock
-                                        Grid.Column="6"
-                                        Margin="6"
-                                        HorizontalAlignment="Center"
-                                        Style="{StaticResource CaptionTextBlockStyle}"
-                                        Text="{shcm:ResourceString Name=ViewPageHutaoDatabaseOverviewConstellation4}"/>
-                                    <TextBlock
-                                        Grid.Column="7"
-                                        Margin="6"
-                                        HorizontalAlignment="Center"
-                                        Style="{StaticResource CaptionTextBlockStyle}"
-                                        Text="{shcm:ResourceString Name=ViewPageHutaoDatabaseOverviewConstellation5}"/>
-                                    <TextBlock
-                                        Grid.Column="8"
-                                        Margin="6"
-                                        HorizontalAlignment="Center"
-                                        Style="{StaticResource CaptionTextBlockStyle}"
-                                        Text="{shcm:ResourceString Name=ViewPageHutaoDatabaseOverviewConstellation6}"/>
-                                </Grid>
-                                <ListView
-                                    Grid.Row="1"
-                                    Margin="0,0,4,0"
-                                    HorizontalContentAlignment="Stretch"
-                                    ItemsPanel="{StaticResource ItemsStackPanelTemplate}"
-                                    ItemsSource="{Binding AvatarConstellationInfos}"
-                                    SelectionMode="None"
-                                    VirtualizingStackPanel.VirtualizationMode="Standard">
-                                    <ItemsControl.ItemTemplate>
-                                        <DataTemplate>
-                                            <Border Margin="0,0,0,8" Style="{StaticResource BorderCardStyle}">
-                                                <Grid>
-                                                    <Grid.ColumnDefinitions>
-                                                        <ColumnDefinition Width="auto"/>
-                                                        <ColumnDefinition/>
-                                                    </Grid.ColumnDefinitions>
-
-                                                    <shvcon:ItemIcon
-                                                        Width="48"
-                                                        Height="48"
-                                                        Icon="{Binding Icon}"
-                                                        Quality="{Binding Quality}"/>
-
-                                                    <Grid Grid.Column="1">
+                            <Border Margin="16" cw:Effects.Shadow="{ThemeResource CompatCardShadow}">
+                                <Grid Style="{ThemeResource AcrylicGridCardStyle}">
+                                    <Grid.RowDefinitions>
+                                        <RowDefinition Height="auto"/>
+                                        <RowDefinition/>
+                                    </Grid.RowDefinitions>
+                                    <Grid Margin="16,4,16,4">
+                                        <Grid.ColumnDefinitions>
+                                            <ColumnDefinition Width="48"/>
+                                            <ColumnDefinition/>
+                                            <ColumnDefinition/>
+                                            <ColumnDefinition/>
+                                            <ColumnDefinition/>
+                                            <ColumnDefinition/>
+                                            <ColumnDefinition/>
+                                            <ColumnDefinition/>
+                                            <ColumnDefinition/>
+                                        </Grid.ColumnDefinitions>
+                                        <TextBlock
+                                            Grid.Column="0"
+                                            Margin="6"
+                                            HorizontalAlignment="Center"
+                                            Style="{StaticResource CaptionTextBlockStyle}"
+                                            Text="{shcm:ResourceString Name=ViewPageHutaoDatabaseOverviewConstellationAvatar}"/>
+                                        <TextBlock
+                                            Grid.Column="1"
+                                            Margin="6"
+                                            HorizontalAlignment="Center"
+                                            Style="{StaticResource CaptionTextBlockStyle}"
+                                            Text="{shcm:ResourceString Name=ViewPageHutaoDatabaseOverviewConstellationHolding}"/>
+                                        <TextBlock
+                                            Grid.Column="2"
+                                            Margin="6"
+                                            HorizontalAlignment="Center"
+                                            Style="{StaticResource CaptionTextBlockStyle}"
+                                            Text="{shcm:ResourceString Name=ViewPageHutaoDatabaseOverviewConstellation0}"/>
+                                        <TextBlock
+                                            Grid.Column="3"
+                                            Margin="6"
+                                            HorizontalAlignment="Center"
+                                            Style="{StaticResource CaptionTextBlockStyle}"
+                                            Text="{shcm:ResourceString Name=ViewPageHutaoDatabaseOverviewConstellation1}"/>
+                                        <TextBlock
+                                            Grid.Column="4"
+                                            Margin="6"
+                                            HorizontalAlignment="Center"
+                                            Style="{StaticResource CaptionTextBlockStyle}"
+                                            Text="{shcm:ResourceString Name=ViewPageHutaoDatabaseOverviewConstellation2}"/>
+                                        <TextBlock
+                                            Grid.Column="5"
+                                            Margin="6"
+                                            HorizontalAlignment="Center"
+                                            Style="{StaticResource CaptionTextBlockStyle}"
+                                            Text="{shcm:ResourceString Name=ViewPageHutaoDatabaseOverviewConstellation3}"/>
+                                        <TextBlock
+                                            Grid.Column="6"
+                                            Margin="6"
+                                            HorizontalAlignment="Center"
+                                            Style="{StaticResource CaptionTextBlockStyle}"
+                                            Text="{shcm:ResourceString Name=ViewPageHutaoDatabaseOverviewConstellation4}"/>
+                                        <TextBlock
+                                            Grid.Column="7"
+                                            Margin="6"
+                                            HorizontalAlignment="Center"
+                                            Style="{StaticResource CaptionTextBlockStyle}"
+                                            Text="{shcm:ResourceString Name=ViewPageHutaoDatabaseOverviewConstellation5}"/>
+                                        <TextBlock
+                                            Grid.Column="8"
+                                            Margin="6"
+                                            HorizontalAlignment="Center"
+                                            Style="{StaticResource CaptionTextBlockStyle}"
+                                            Text="{shcm:ResourceString Name=ViewPageHutaoDatabaseOverviewConstellation6}"/>
+                                    </Grid>
+                                    <ListView
+                                        Grid.Row="1"
+                                        Margin="0,0,4,0"
+                                        HorizontalContentAlignment="Stretch"
+                                        ItemsPanel="{StaticResource ItemsStackPanelTemplate}"
+                                        ItemsSource="{Binding AvatarConstellationInfos}"
+                                        SelectionMode="None"
+                                        VirtualizingStackPanel.VirtualizationMode="Standard">
+                                        <ItemsControl.ItemTemplate>
+                                            <DataTemplate>
+                                                <Border Margin="0,0,0,8" Style="{StaticResource BorderCardStyle}">
+                                                    <Grid>
                                                         <Grid.ColumnDefinitions>
-                                                            <ColumnDefinition Width="1*"/>
-                                                            <ColumnDefinition Width="7*"/>
+                                                            <ColumnDefinition Width="auto"/>
+                                                            <ColumnDefinition/>
                                                         </Grid.ColumnDefinitions>
-                                                        <TextBlock
-                                                            HorizontalAlignment="Center"
-                                                            VerticalAlignment="Center"
-                                                            Text="{Binding Rate}"/>
-                                                        <ItemsControl Grid.Column="1" ItemsSource="{Binding Rates}">
-                                                            <ItemsControl.ItemsPanel>
-                                                                <ItemsPanelTemplate>
-                                                                    <cwc:UniformGrid Columns="7"/>
-                                                                </ItemsPanelTemplate>
-                                                            </ItemsControl.ItemsPanel>
-                                                            <ItemsControl.ItemTemplate>
-                                                                <DataTemplate>
-                                                                    <TextBlock
-                                                                        HorizontalAlignment="Center"
-                                                                        VerticalAlignment="Center"
-                                                                        Text="{Binding}"/>
-                                                                </DataTemplate>
-                                                            </ItemsControl.ItemTemplate>
-                                                        </ItemsControl>
+
+                                                        <shvcon:ItemIcon
+                                                            Width="48"
+                                                            Height="48"
+                                                            Icon="{Binding Icon}"
+                                                            Quality="{Binding Quality}"/>
+
+                                                        <Grid Grid.Column="1">
+                                                            <Grid.ColumnDefinitions>
+                                                                <ColumnDefinition Width="1*"/>
+                                                                <ColumnDefinition Width="7*"/>
+                                                            </Grid.ColumnDefinitions>
+                                                            <TextBlock
+                                                                HorizontalAlignment="Center"
+                                                                VerticalAlignment="Center"
+                                                                Text="{Binding Rate}"/>
+                                                            <ItemsControl Grid.Column="1" ItemsSource="{Binding Rates}">
+                                                                <ItemsControl.ItemsPanel>
+                                                                    <ItemsPanelTemplate>
+                                                                        <cwc:UniformGrid Columns="7"/>
+                                                                    </ItemsPanelTemplate>
+                                                                </ItemsControl.ItemsPanel>
+                                                                <ItemsControl.ItemTemplate>
+                                                                    <DataTemplate>
+                                                                        <TextBlock
+                                                                            HorizontalAlignment="Center"
+                                                                            VerticalAlignment="Center"
+                                                                            Text="{Binding}"/>
+                                                                    </DataTemplate>
+                                                                </ItemsControl.ItemTemplate>
+                                                            </ItemsControl>
+                                                        </Grid>
                                                     </Grid>
-                                                </Grid>
-                                            </Border>
-                                        </DataTemplate>
-                                    </ItemsControl.ItemTemplate>
-                                </ListView>
-                            </Grid>
+                                                </Border>
+                                            </DataTemplate>
+                                        </ItemsControl.ItemTemplate>
+                                    </ListView>
+                                </Grid>
+                            </Border>
+
                         </PivotItem>
                     </Pivot>
                     <shvcon:LoadingView IsLoading="{Binding Overview, Converter={StaticResource EmptyObjectToBoolRevertConverter}}"/>