From 6999103aaabdfc1febd8ca7ed1bb6338a4ca943a Mon Sep 17 00:00:00 2001
From: DismissedLight <1686188646@qq.com>
Date: Sun, 26 Nov 2023 14:35:33 +0800
Subject: [PATCH] refine wiki avatar page ui

---
 .../Control/Image/CompositionImage.cs         |  18 -
 .../Snap.Hutao/Control/Image/MonoChrome.cs    |  10 -
 .../Control/Layout/UniformStaggeredLayout.cs  |   5 +-
 .../Layout/UniformStaggeredLayoutState.cs     |   4 +-
 .../Snap.Hutao/Control/Theme/FontStyle.xaml   |  15 +
 .../Control/Theme/ItemsPanelTemplate.xaml     |   3 +
 src/Snap.Hutao/Snap.Hutao/MainWindow.xaml.cs  |   4 +-
 src/Snap.Hutao/Snap.Hutao/Snap.Hutao.csproj   |   6 +
 .../View/Card/Primitive/HorizontalCard.xaml   |  24 +
 .../Card/Primitive/HorizontalCard.xaml.cs     |  17 +
 .../View/Control/BaseValueSlider.xaml         |  66 +-
 .../View/Control/DescParamComboBox.xaml       |  40 +-
 .../View/Control/DescParamComboBox.xaml.cs    |  12 +-
 .../Snap.Hutao/View/Control/SkillPivot.xaml   |  23 +-
 .../View/Control/SkillPivot.xaml.cs           |  21 +-
 .../Snap.Hutao/View/Page/WikiAvatarPage.xaml  | 853 ++++++++++--------
 .../ViewModel/Complex/ReliquarySetView.cs     |  12 +-
 17 files changed, 653 insertions(+), 480 deletions(-)
 create mode 100644 src/Snap.Hutao/Snap.Hutao/View/Card/Primitive/HorizontalCard.xaml
 create mode 100644 src/Snap.Hutao/Snap.Hutao/View/Card/Primitive/HorizontalCard.xaml.cs

diff --git a/src/Snap.Hutao/Snap.Hutao/Control/Image/CompositionImage.cs b/src/Snap.Hutao/Snap.Hutao/Control/Image/CompositionImage.cs
index 9cbc5d20..c049e8aa 100644
--- a/src/Snap.Hutao/Snap.Hutao/Control/Image/CompositionImage.cs
+++ b/src/Snap.Hutao/Snap.Hutao/Control/Image/CompositionImage.cs
@@ -30,7 +30,6 @@ internal abstract partial class CompositionImage : Microsoft.UI.Xaml.Controls.Co
 
     private readonly IServiceProvider serviceProvider;
 
-    private readonly RoutedEventHandler unloadEventHandler;
     private readonly SizeChangedEventHandler sizeChangedEventHandler;
     private readonly TypedEventHandler<LoadedImageSurface, LoadedImageSourceLoadCompletedEventArgs> loadedImageSourceLoadCompletedEventHandler;
 
@@ -46,9 +45,6 @@ internal abstract partial class CompositionImage : Microsoft.UI.Xaml.Controls.Co
         serviceProvider = this.ServiceProvider();
         this.DisableInteraction();
 
-        unloadEventHandler = OnUnload;
-        Unloaded += unloadEventHandler;
-
         sizeChangedEventHandler = OnSizeChanged;
         SizeChanged += sizeChangedEventHandler;
 
@@ -67,10 +63,6 @@ internal abstract partial class CompositionImage : Microsoft.UI.Xaml.Controls.Co
     {
     }
 
-    protected virtual void Unloading()
-    {
-    }
-
     /// <summary>
     /// 更新视觉对象
     /// </summary>
@@ -240,14 +232,4 @@ internal abstract partial class CompositionImage : Microsoft.UI.Xaml.Controls.Co
             UpdateVisual(spriteVisual);
         }
     }
-
-    private void OnUnload(object sender, RoutedEventArgs e)
-    {
-        Unloading();
-        spriteVisual?.Dispose();
-        spriteVisual = null;
-
-        SizeChanged -= sizeChangedEventHandler;
-        Unloaded -= unloadEventHandler;
-    }
 }
\ No newline at end of file
diff --git a/src/Snap.Hutao/Snap.Hutao/Control/Image/MonoChrome.cs b/src/Snap.Hutao/Snap.Hutao/Control/Image/MonoChrome.cs
index ac491620..f7fac999 100644
--- a/src/Snap.Hutao/Snap.Hutao/Control/Image/MonoChrome.cs
+++ b/src/Snap.Hutao/Snap.Hutao/Control/Image/MonoChrome.cs
@@ -45,16 +45,6 @@ internal sealed class MonoChrome : CompositionImage
         return compositor.CompositeSpriteVisual(alphaMaskEffectBrush);
     }
 
-    protected override void Unloading()
-    {
-        ActualThemeChanged -= actualThemeChangedEventHandler;
-
-        backgroundBrush?.Dispose();
-        backgroundBrush = null;
-
-        base.Unloading();
-    }
-
     private void OnActualThemeChanged(FrameworkElement sender, object args)
     {
         if (backgroundBrush is not null)
diff --git a/src/Snap.Hutao/Snap.Hutao/Control/Layout/UniformStaggeredLayout.cs b/src/Snap.Hutao/Snap.Hutao/Control/Layout/UniformStaggeredLayout.cs
index 58b31d1a..96f69e44 100644
--- a/src/Snap.Hutao/Snap.Hutao/Control/Layout/UniformStaggeredLayout.cs
+++ b/src/Snap.Hutao/Snap.Hutao/Control/Layout/UniformStaggeredLayout.cs
@@ -202,11 +202,8 @@ internal sealed partial class UniformStaggeredLayout : VirtualizingLayout
         for (int columnIndex = 0; columnIndex < state.NumberOfColumns; columnIndex++)
         {
             UniformStaggeredColumnLayout layout = state.GetColumnLayout(columnIndex);
-            Span<UniformStaggeredItem> layoutSpan = CollectionsMarshal.AsSpan(layout);
-            for (int i = 0; i < layoutSpan.Length; i++)
+            foreach (ref readonly UniformStaggeredItem item in CollectionsMarshal.AsSpan(layout))
             {
-                ref readonly UniformStaggeredItem item = ref layoutSpan[i];
-
                 double bottom = item.Top + item.Height;
                 if (bottom < context.RealizationRect.Top)
                 {
diff --git a/src/Snap.Hutao/Snap.Hutao/Control/Layout/UniformStaggeredLayoutState.cs b/src/Snap.Hutao/Snap.Hutao/Control/Layout/UniformStaggeredLayoutState.cs
index e39662f3..31f8a0ab 100644
--- a/src/Snap.Hutao/Snap.Hutao/Control/Layout/UniformStaggeredLayoutState.cs
+++ b/src/Snap.Hutao/Snap.Hutao/Control/Layout/UniformStaggeredLayoutState.cs
@@ -62,11 +62,9 @@ internal sealed class UniformStaggeredLayoutState
         }
     }
 
-    [SuppressMessage("", "SH007")]
     internal UniformStaggeredColumnLayout GetColumnLayout(int columnIndex)
     {
-        this.columnLayout.TryGetValue(columnIndex, out UniformStaggeredColumnLayout? columnLayout);
-        return columnLayout!;
+        return columnLayout[columnIndex];
     }
 
     /// <summary>
diff --git a/src/Snap.Hutao/Snap.Hutao/Control/Theme/FontStyle.xaml b/src/Snap.Hutao/Snap.Hutao/Control/Theme/FontStyle.xaml
index df613a0d..bffb9f4e 100644
--- a/src/Snap.Hutao/Snap.Hutao/Control/Theme/FontStyle.xaml
+++ b/src/Snap.Hutao/Snap.Hutao/Control/Theme/FontStyle.xaml
@@ -93,4 +93,19 @@
     <Style BasedOn="{StaticResource DefaultScrollViewerStyle}" TargetType="ScrollViewer">
         <Setter Property="FontFamily" Value="{StaticResource MiSans}"/>
     </Style>
+
+    <SolidColorBrush x:Key="TextControlTextForeground" Color="{ThemeResource TextFillColorPrimary}"/>
+    <Thickness x:Key="TextControlTextMargin">1,0</Thickness>
+    <Style
+        x:Key="TextControlTextBlockStyle"
+        BasedOn="{StaticResource BodyTextBlockStyle}"
+        TargetType="TextBlock">
+        <Setter Property="Foreground" Value="{StaticResource TextControlTextForeground}"/>
+        <Setter Property="Margin" Value="{StaticResource TextControlTextMargin}"/>
+        <Setter Property="HorizontalAlignment" Value="Stretch"/>
+        <Setter Property="VerticalAlignment" Value="Center"/>
+        <Setter Property="HorizontalTextAlignment" Value="Center"/>
+        <Setter Property="TextTrimming" Value="CharacterEllipsis"/>
+        <Setter Property="TextWrapping" Value="NoWrap"/>
+    </Style>
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Snap.Hutao/Snap.Hutao/Control/Theme/ItemsPanelTemplate.xaml b/src/Snap.Hutao/Snap.Hutao/Control/Theme/ItemsPanelTemplate.xaml
index 28a32452..2778290c 100644
--- a/src/Snap.Hutao/Snap.Hutao/Control/Theme/ItemsPanelTemplate.xaml
+++ b/src/Snap.Hutao/Snap.Hutao/Control/Theme/ItemsPanelTemplate.xaml
@@ -17,6 +17,9 @@
     <ItemsPanelTemplate x:Key="HorizontalStackPanelSpacing2Template">
         <StackPanel Orientation="Horizontal" Spacing="2"/>
     </ItemsPanelTemplate>
+    <ItemsPanelTemplate x:Key="StackPanelSpacing4Template">
+        <StackPanel Spacing="4"/>
+    </ItemsPanelTemplate>
     <ItemsPanelTemplate x:Key="UniformGridColumns2Spacing2Template">
         <cwcont:UniformGrid
             ColumnSpacing="2"
diff --git a/src/Snap.Hutao/Snap.Hutao/MainWindow.xaml.cs b/src/Snap.Hutao/Snap.Hutao/MainWindow.xaml.cs
index 85e8f047..2e720421 100644
--- a/src/Snap.Hutao/Snap.Hutao/MainWindow.xaml.cs
+++ b/src/Snap.Hutao/Snap.Hutao/MainWindow.xaml.cs
@@ -16,8 +16,8 @@ namespace Snap.Hutao;
 [SuppressMessage("", "CA1001")]
 internal sealed partial class MainWindow : Window, IWindowOptionsSource, IMinMaxInfoHandler
 {
-    private const int MinWidth = 1200;
-    private const int MinHeight = 750;
+    private const int MinWidth = 1000;
+    private const int MinHeight = 600;
 
     private readonly WindowOptions windowOptions;
     private readonly ILogger<MainWindow> logger;
diff --git a/src/Snap.Hutao/Snap.Hutao/Snap.Hutao.csproj b/src/Snap.Hutao/Snap.Hutao/Snap.Hutao.csproj
index 55b4bf4e..8400f6ce 100644
--- a/src/Snap.Hutao/Snap.Hutao/Snap.Hutao.csproj
+++ b/src/Snap.Hutao/Snap.Hutao/Snap.Hutao.csproj
@@ -135,6 +135,7 @@
     <None Remove="View\Card\GachaStatisticsCard.xaml" />
     <None Remove="View\Card\LaunchGameCard.xaml" />
     <None Remove="View\Card\Primitive\CardProgressBar.xaml" />
+    <None Remove="View\Card\Primitive\HorizontalCard.xaml" />
     <None Remove="View\Control\BaseValueSlider.xaml" />
     <None Remove="View\Control\BottomTextControl.xaml" />
     <None Remove="View\Control\DescParamComboBox.xaml" />
@@ -318,6 +319,11 @@
   <ItemGroup>
     <None Include="..\.editorconfig" Link=".editorconfig" />
   </ItemGroup>
+  <ItemGroup>
+    <Page Update="View\Card\Primitive\HorizontalCard.xaml">
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+  </ItemGroup>
   <ItemGroup>
     <Page Update="Control\Theme\ComboBox.xaml">
       <Generator>MSBuild:Compile</Generator>
diff --git a/src/Snap.Hutao/Snap.Hutao/View/Card/Primitive/HorizontalCard.xaml b/src/Snap.Hutao/Snap.Hutao/View/Card/Primitive/HorizontalCard.xaml
new file mode 100644
index 00000000..14c6d654
--- /dev/null
+++ b/src/Snap.Hutao/Snap.Hutao/View/Card/Primitive/HorizontalCard.xaml
@@ -0,0 +1,24 @@
+<UserControl
+    x:Class="Snap.Hutao.View.Card.Primitive.HorizontalCard"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d">
+
+    <Border Style="{StaticResource BorderCardStyle}">
+        <Grid Background="{x:Bind Background, Mode=OneWay}">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="auto"/>
+                <ColumnDefinition Width="*"/>
+            </Grid.ColumnDefinitions>
+            <Border Child="{x:Bind Left, Mode=OneWay}"/>
+            <Border
+                Grid.Column="1"
+                HorizontalAlignment="Stretch"
+                VerticalAlignment="Center"
+                Child="{x:Bind Right, Mode=OneWay}"/>
+        </Grid>
+    </Border>
+
+</UserControl>
diff --git a/src/Snap.Hutao/Snap.Hutao/View/Card/Primitive/HorizontalCard.xaml.cs b/src/Snap.Hutao/Snap.Hutao/View/Card/Primitive/HorizontalCard.xaml.cs
new file mode 100644
index 00000000..b31a5606
--- /dev/null
+++ b/src/Snap.Hutao/Snap.Hutao/View/Card/Primitive/HorizontalCard.xaml.cs
@@ -0,0 +1,17 @@
+// Copyright (c) DGP Studio. All rights reserved.
+// Licensed under the MIT license.
+
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+
+namespace Snap.Hutao.View.Card.Primitive;
+
+[DependencyProperty("Left", typeof(UIElement), default!)]
+[DependencyProperty("Right", typeof(UIElement), default!)]
+internal sealed partial class HorizontalCard : UserControl
+{
+    public HorizontalCard()
+    {
+        InitializeComponent();
+    }
+}
diff --git a/src/Snap.Hutao/Snap.Hutao/View/Control/BaseValueSlider.xaml b/src/Snap.Hutao/Snap.Hutao/View/Control/BaseValueSlider.xaml
index d50800c2..aeb7ba4b 100644
--- a/src/Snap.Hutao/Snap.Hutao/View/Control/BaseValueSlider.xaml
+++ b/src/Snap.Hutao/Snap.Hutao/View/Control/BaseValueSlider.xaml
@@ -13,44 +13,44 @@
         <x:Double x:Key="SettingsCardMinHeight">0</x:Double>
 
         <DataTemplate x:Key="BaseValueTemplate">
-            <cwc:SettingsCard Margin="0,2,0,0" Header="{Binding Name}">
+            <cwc:SettingsCard
+                MinHeight="40"
+                Padding="16,0,42,0"
+                Header="{Binding Name}">
                 <TextBlock Text="{Binding Value}"/>
             </cwc:SettingsCard>
         </DataTemplate>
     </UserControl.Resources>
 
-    <StackPanel>
-        <StackPanel VerticalAlignment="Top">
-            <cwc:SettingsCard Header="{shcm:ResourceString Name=ViewControlBaseValueSliderLevel}">
-                <StackPanel Orientation="Horizontal">
-                    <TextBlock
-                        Margin="8,0"
-                        VerticalAlignment="Center"
-                        Text="{x:Bind BaseValueInfo.CurrentLevelFormatted, Mode=OneWay}"/>
-                    <CheckBox
-                        MinWidth="0"
-                        Margin="16,0,8,0"
-                        Padding="8,0,0,0"
-                        VerticalAlignment="Center"
-                        VerticalContentAlignment="Center"
-                        Content="{shcm:ResourceString Name=ViewControlBaseValueSliderPromoted}"
-                        IsChecked="{x:Bind BaseValueInfo.Promoted, Mode=TwoWay}"
-                        Visibility="{x:Bind IsPromoteVisible, Converter={StaticResource BoolToVisibilityConverter}}"/>
-                    <Slider
-                        MinWidth="240"
-                        Margin="16,0,8,0"
-                        VerticalAlignment="Center"
-                        Maximum="{x:Bind BaseValueInfo.MaxLevel, Mode=OneWay}"
-                        Minimum="1"
-                        StepFrequency="1"
-                        Value="{x:Bind BaseValueInfo.CurrentLevel, Mode=TwoWay}"/>
-                </StackPanel>
-            </cwc:SettingsCard>
+    <cwc:SettingsExpander
+        Header="{shcm:ResourceString Name=ViewControlBaseValueSliderLevel}"
+        IsExpanded="True"
+        ItemTemplate="{StaticResource BaseValueTemplate}"
+        ItemsSource="{x:Bind BaseValueInfo.Values, Mode=OneWay}">
+        <StackPanel
+            Height="16"
+            Margin="8,0,0,0"
+            Orientation="Horizontal"
+            Spacing="16">
+            <TextBlock VerticalAlignment="Center" Text="{x:Bind BaseValueInfo.CurrentLevelFormatted, Mode=OneWay}"/>
+            <CheckBox
+                MinWidth="0"
+                Margin="0,-8,0,-8"
+                Padding="8,0,0,0"
+                VerticalAlignment="Center"
+                VerticalContentAlignment="Center"
+                Content="{shcm:ResourceString Name=ViewControlBaseValueSliderPromoted}"
+                IsChecked="{x:Bind BaseValueInfo.Promoted, Mode=TwoWay}"
+                Visibility="{x:Bind IsPromoteVisible, Converter={StaticResource BoolToVisibilityConverter}}"/>
+            <Slider
+                MinWidth="240"
+                Margin="0,-16,0,-16"
+                VerticalAlignment="Center"
+                Maximum="{x:Bind BaseValueInfo.MaxLevel, Mode=OneWay}"
+                Minimum="1"
+                StepFrequency="1"
+                Value="{x:Bind BaseValueInfo.CurrentLevel, Mode=TwoWay}"/>
         </StackPanel>
+    </cwc:SettingsExpander>
 
-        <ItemsControl
-            VerticalAlignment="Top"
-            ItemTemplate="{StaticResource BaseValueTemplate}"
-            ItemsSource="{x:Bind BaseValueInfo.Values, Mode=OneWay}"/>
-    </StackPanel>
 </UserControl>
diff --git a/src/Snap.Hutao/Snap.Hutao/View/Control/DescParamComboBox.xaml b/src/Snap.Hutao/Snap.Hutao/View/Control/DescParamComboBox.xaml
index 7b6262a2..a48d31d2 100644
--- a/src/Snap.Hutao/Snap.Hutao/View/Control/DescParamComboBox.xaml
+++ b/src/Snap.Hutao/Snap.Hutao/View/Control/DescParamComboBox.xaml
@@ -12,31 +12,31 @@
     <UserControl.Resources>
         <Thickness x:Key="SettingsCardPadding">16,8</Thickness>
         <x:Double x:Key="SettingsCardMinHeight">0</x:Double>
+        <x:Double x:Key="SettingsCardWrapThreshold">0</x:Double>
+        <x:Double x:Key="SettingsCardWrapNoIconThreshold">0</x:Double>
 
         <DataTemplate x:Key="ParameterDescriptionTemplate" x:DataType="shmm:ParameterDescription">
-            <cwc:SettingsCard Margin="0,3,0,0" Header="{Binding Description}">
+            <cwc:SettingsCard
+                MinHeight="40"
+                Padding="16,0,42,0"
+                Header="{Binding Description}">
                 <TextBlock Text="{Binding Parameter}"/>
             </cwc:SettingsCard>
         </DataTemplate>
     </UserControl.Resources>
 
-    <StackPanel>
-        <StackPanel Margin="0,0,0,0" VerticalAlignment="Top">
-            <cwc:SettingsCard Header="{shcm:ResourceString Name=ViewControlBaseValueSliderLevel}">
-                <shc:SizeRestrictedContentControl>
-                    <ComboBox
-                        DisplayMemberPath="Level"
-                        ItemsSource="{x:Bind Source, Mode=OneWay}"
-                        SelectedItem="{x:Bind SelectedItem, Mode=TwoWay}"
-                        Style="{StaticResource SettingsContentComboBoxStyle}"/>
-                </shc:SizeRestrictedContentControl>
-            </cwc:SettingsCard>
-        </StackPanel>
-
-        <ItemsControl
-            VerticalAlignment="Top"
-            ItemContainerTransitions="{StaticResource ContentThemeTransitions}"
-            ItemTemplate="{StaticResource ParameterDescriptionTemplate}"
-            ItemsSource="{x:Bind SelectedItem.Parameters, Mode=OneWay}"/>
-    </StackPanel>
+    <cwc:SettingsExpander
+        Header="{shcm:ResourceString Name=ViewControlBaseValueSliderLevel}"
+        IsExpanded="True"
+        ItemTemplate="{StaticResource ParameterDescriptionTemplate}"
+        ItemsSource="{x:Bind SelectedItem.Parameters, Mode=OneWay}"
+        Visibility="{x:Bind SelectedItem.Parameters.Count, Converter={StaticResource Int32ToVisibilityConverter}, Mode=OneWay}">
+        <shc:SizeRestrictedContentControl Margin="0,-8">
+            <ComboBox
+                x:Name="LevelSelectorComboBox"
+                DisplayMemberPath="Level"
+                SelectionChanged="OnLevelSelectorComboBoxSelectionChanged"
+                Style="{StaticResource SettingsContentComboBoxStyle}"/>
+        </shc:SizeRestrictedContentControl>
+    </cwc:SettingsExpander>
 </UserControl>
diff --git a/src/Snap.Hutao/Snap.Hutao/View/Control/DescParamComboBox.xaml.cs b/src/Snap.Hutao/Snap.Hutao/View/Control/DescParamComboBox.xaml.cs
index 9f76e5aa..9a33c89c 100644
--- a/src/Snap.Hutao/Snap.Hutao/View/Control/DescParamComboBox.xaml.cs
+++ b/src/Snap.Hutao/Snap.Hutao/View/Control/DescParamComboBox.xaml.cs
@@ -30,8 +30,16 @@ internal sealed partial class DescParamComboBox : UserControl
         {
             if (args.NewValue != args.OldValue && args.NewValue is List<LevelParameters<string, ParameterDescription>> list)
             {
-                descParamComboBox.SelectedItem = list.ElementAtOrLastOrDefault(descParamComboBox.PreferredSelectedIndex);
+                LevelParameters<string, ParameterDescription>? target = list.ElementAtOrLastOrDefault(descParamComboBox.PreferredSelectedIndex);
+                descParamComboBox.SelectedItem = target;
+                descParamComboBox.LevelSelectorComboBox.ItemsSource = list;
+                descParamComboBox.LevelSelectorComboBox.SelectedItem = target;
             }
         }
     }
-}
+
+    private void OnLevelSelectorComboBoxSelectionChanged(object sender, SelectionChangedEventArgs e)
+    {
+        SelectedItem = (LevelParameters<string, ParameterDescription>)((ComboBox)sender).SelectedItem;
+    }
+}
\ No newline at end of file
diff --git a/src/Snap.Hutao/Snap.Hutao/View/Control/SkillPivot.xaml b/src/Snap.Hutao/Snap.Hutao/View/Control/SkillPivot.xaml
index 709ee786..ada71d01 100644
--- a/src/Snap.Hutao/Snap.Hutao/View/Control/SkillPivot.xaml
+++ b/src/Snap.Hutao/Snap.Hutao/View/Control/SkillPivot.xaml
@@ -2,6 +2,7 @@
     x:Class="Snap.Hutao.View.Control.SkillPivot"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:cwc="using:CommunityToolkit.WinUI.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:shch="using:Snap.Hutao.Control.Helper"
@@ -17,22 +18,18 @@
         </Style>
 
         <DataTemplate x:Key="SkillHeaderTemplate">
-            <StackPanel>
+            <StackPanel Background="Transparent" ToolTipService.ToolTip="{Binding Name}">
                 <shci:MonoChrome shch:FrameworkElementHelper.SquareLength="36" Source="{Binding Icon, Converter={StaticResource SkillIconConverter}}"/>
-                <TextBlock
-                    Margin="0,8,0,0"
-                    HorizontalAlignment="Center"
-                    Style="{StaticResource CaptionTextBlockStyle}"
-                    Text="{Binding Name}"/>
             </StackPanel>
         </DataTemplate>
     </UserControl.Resources>
 
-    <Pivot
-        HeaderTemplate="{StaticResource SkillHeaderTemplate}"
-        ItemTemplate="{x:Bind ItemTemplate}"
-        ItemsSource="{x:Bind Skills, Mode=OneWay}"
-        SelectedItem="{x:Bind Selected}"
-        Style="{StaticResource DefaultPivotStyle}"/>
-
+    <StackPanel>
+        <cwc:Segmented
+            x:Name="SkillSelectorSegmented"
+            HorizontalAlignment="Stretch"
+            SelectionChanged="OnSkillSelectorSegmentedSelectionChanged"
+            ItemTemplate="{StaticResource SkillHeaderTemplate}"/>
+        <ContentPresenter Content="{x:Bind Selected, Mode=OneWay}" ContentTemplate="{x:Bind ItemTemplate}"/>
+    </StackPanel>
 </UserControl>
diff --git a/src/Snap.Hutao/Snap.Hutao/View/Control/SkillPivot.xaml.cs b/src/Snap.Hutao/Snap.Hutao/View/Control/SkillPivot.xaml.cs
index deb26f50..b8f2cf13 100644
--- a/src/Snap.Hutao/Snap.Hutao/View/Control/SkillPivot.xaml.cs
+++ b/src/Snap.Hutao/Snap.Hutao/View/Control/SkillPivot.xaml.cs
@@ -1,6 +1,7 @@
 // Copyright (c) DGP Studio. All rights reserved.
 // Licensed under the MIT license.
 
+using CommunityToolkit.WinUI.Controls;
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
 using System.Collections;
@@ -11,7 +12,7 @@ namespace Snap.Hutao.View.Control;
 /// 技能展柜
 /// </summary>
 [HighQuality]
-[DependencyProperty("Skills", typeof(IList))]
+[DependencyProperty("Skills", typeof(IList), null, nameof(OnSkillsChanged))]
 [DependencyProperty("Selected", typeof(object))]
 [DependencyProperty("ItemTemplate", typeof(DataTemplate))]
 internal sealed partial class SkillPivot : UserControl
@@ -23,4 +24,22 @@ internal sealed partial class SkillPivot : UserControl
     {
         InitializeComponent();
     }
+
+    private static void OnSkillsChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)
+    {
+        if (sender is SkillPivot skillPivot)
+        {
+            if (args.OldValue != args.NewValue && args.NewValue as IList is [object target, ..] list)
+            {
+                skillPivot.Selected = target;
+                skillPivot.SkillSelectorSegmented.ItemsSource = list;
+                skillPivot.SkillSelectorSegmented.SelectedItem = target;
+            }
+        }
+    }
+
+    private void OnSkillSelectorSegmentedSelectionChanged(object sender, SelectionChangedEventArgs e)
+    {
+        Selected = ((Segmented)sender).SelectedItem;
+    }
 }
\ No newline at end of file
diff --git a/src/Snap.Hutao/Snap.Hutao/View/Page/WikiAvatarPage.xaml b/src/Snap.Hutao/Snap.Hutao/View/Page/WikiAvatarPage.xaml
index 42aaf799..5dc419d4 100644
--- a/src/Snap.Hutao/Snap.Hutao/View/Page/WikiAvatarPage.xaml
+++ b/src/Snap.Hutao/Snap.Hutao/View/Page/WikiAvatarPage.xaml
@@ -15,6 +15,7 @@
     xmlns:shcp="using:Snap.Hutao.Control.Panel"
     xmlns:shct="using:Snap.Hutao.Control.Text"
     xmlns:shvc="using:Snap.Hutao.View.Control"
+    xmlns:shvcp="using:Snap.Hutao.View.Card.Primitive"
     xmlns:shvw="using:Snap.Hutao.ViewModel.Wiki"
     d:DataContext="{d:DesignInstance Type=shvw:WikiAvatarViewModel}"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
@@ -24,21 +25,27 @@
     </mxi:Interaction.Behaviors>
     <Page.Resources>
         <DataTemplate x:Key="SkillDataTemplate">
-            <Grid Margin="0,12,0,0">
-                <StackPanel Grid.Column="0">
-                    <shct:DescriptionTextBlock Margin="0,0,0,16" Description="{Binding Description}">
-                        <shct:DescriptionTextBlock.Resources>
-                            <Style BasedOn="{StaticResource BodyTextBlockStyle}" TargetType="TextBlock">
-                                <Setter Property="TextWrapping" Value="Wrap"/>
-                            </Style>
-                        </shct:DescriptionTextBlock.Resources>
-                    </shct:DescriptionTextBlock>
-                    <shvc:DescParamComboBox
-                        Grid.Column="0"
-                        HorizontalAlignment="Stretch"
-                        PreferredSelectedIndex="9"
-                        Source="{Binding Proud, Mode=OneWay, Converter={StaticResource DescParamDescriptor}}"/>
-                </StackPanel>
+            <Grid Margin="0,16,0,0" ColumnSpacing="16">
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="2*"/>
+                    <ColumnDefinition Width="3*"/>
+                </Grid.ColumnDefinitions>
+                <shct:DescriptionTextBlock
+                    Margin="0,0,0,16"
+                    VerticalAlignment="Top"
+                    Description="{Binding Description}">
+                    <shct:DescriptionTextBlock.Resources>
+                        <Style BasedOn="{StaticResource BodyTextBlockStyle}" TargetType="TextBlock">
+                            <Setter Property="TextWrapping" Value="Wrap"/>
+                        </Style>
+                    </shct:DescriptionTextBlock.Resources>
+                </shct:DescriptionTextBlock>
+                <shvc:DescParamComboBox
+                    Grid.Column="1"
+                    HorizontalAlignment="Stretch"
+                    VerticalAlignment="Top"
+                    PreferredSelectedIndex="9"
+                    Source="{Binding Proud, Mode=OneWay, Converter={StaticResource DescParamDescriptor}}"/>
             </Grid>
         </DataTemplate>
 
@@ -80,66 +87,110 @@
         </DataTemplate>
 
         <DataTemplate x:Key="CultivationItemTemplate">
-            <shvc:BottomTextControl Text="{Binding Name}">
-                <shvc:ItemIcon Icon="{Binding Icon, Converter={StaticResource ItemIconConverter}}" Quality="{Binding RankLevel}"/>
-            </shvc:BottomTextControl>
+            <shvcp:HorizontalCard>
+                <shvcp:HorizontalCard.Left>
+                    <shvc:ItemIcon
+                        Width="40"
+                        Height="40"
+                        Icon="{Binding Icon, Converter={StaticResource ItemIconConverter}}"
+                        Quality="{Binding RankLevel}"/>
+                </shvcp:HorizontalCard.Left>
+                <shvcp:HorizontalCard.Right>
+                    <TextBlock
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        Text="{Binding Name}"/>
+                </shvcp:HorizontalCard.Right>
+            </shvcp:HorizontalCard>
         </DataTemplate>
 
         <DataTemplate x:Key="CollocationTemplate">
-            <shvc:BottomTextControl Text="{Binding Rate}" ToolTipService.ToolTip="{Binding Name}">
-                <shvc:ItemIcon Icon="{Binding Icon}" Quality="{Binding Quality}"/>
-            </shvc:BottomTextControl>
+            <shvcp:HorizontalCard>
+                <shvcp:HorizontalCard.Left>
+                    <shvc:ItemIcon
+                        Width="48"
+                        Height="48"
+                        Icon="{Binding Icon}"
+                        Quality="{Binding Quality}"/>
+                </shvcp:HorizontalCard.Left>
+                <shvcp:HorizontalCard.Right>
+                    <StackPanel Margin="8,0,0,0" HorizontalAlignment="Left">
+                        <TextBlock Text="{Binding Name}"/>
+                        <TextBlock
+                            Opacity="0.7"
+                            Style="{StaticResource CaptionTextBlockStyle}"
+                            Text="{Binding Rate}"/>
+                    </StackPanel>
+                </shvcp:HorizontalCard.Right>
+            </shvcp:HorizontalCard>
         </DataTemplate>
 
         <DataTemplate x:Key="CollocationReliquaryTemplate">
-            <shvc:BottomTextControl Text="{Binding Rate}" ToolTipService.ToolTip="{Binding Name}">
-                <cwc:SwitchPresenter Value="{Binding Icons.Count, Mode=OneWay}">
-                    <cwc:Case IsDefault="True">
-                        <cwc:Case.Value>
-                            <x:Int32>0</x:Int32>
-                        </cwc:Case.Value>
-                        <Grid>
-                            <shvc:ItemIcon
-                                Width="80"
-                                Height="80"
-                                Icon="{StaticResource UI_ItemIcon_None}"
-                                Quality="QUALITY_ORANGE"/>
-                        </Grid>
-                    </cwc:Case>
-                    <cwc:Case>
-                        <cwc:Case.Value>
-                            <x:Int32>1</x:Int32>
-                        </cwc:Case.Value>
-                        <Grid>
-                            <shvc:ItemIcon
-                                Width="80"
-                                Height="80"
-                                Icon="{Binding Icons[0]}"
-                                Quality="QUALITY_ORANGE"/>
-                        </Grid>
-                    </cwc:Case>
-                    <cwc:Case>
-                        <cwc:Case.Value>
-                            <x:Int32>2</x:Int32>
-                        </cwc:Case.Value>
-                        <Grid>
-                            <shvc:ItemIcon Quality="QUALITY_ORANGE"/>
-                            <shci:CachedImage
-                                Width="54"
-                                Margin="0,4,0,0"
-                                HorizontalAlignment="Left"
-                                VerticalAlignment="Top"
-                                Source="{Binding Icons[0]}"/>
-                            <shci:CachedImage
-                                Width="54"
-                                Margin="0,0,0,4"
-                                HorizontalAlignment="Right"
-                                VerticalAlignment="Bottom"
-                                Source="{Binding Icons[1]}"/>
-                        </Grid>
-                    </cwc:Case>
-                </cwc:SwitchPresenter>
-            </shvc:BottomTextControl>
+            <shvcp:HorizontalCard>
+                <shvcp:HorizontalCard.Left>
+                    <cwc:SwitchPresenter Value="{Binding Icons.Count, Mode=OneWay}">
+                        <cwc:Case IsDefault="True">
+                            <cwc:Case.Value>
+                                <x:Int32>0</x:Int32>
+                            </cwc:Case.Value>
+                            <Grid>
+                                <shvc:ItemIcon
+                                    Width="48"
+                                    Height="48"
+                                    Icon="{StaticResource UI_ItemIcon_None}"
+                                    Quality="QUALITY_ORANGE"/>
+                            </Grid>
+                        </cwc:Case>
+                        <cwc:Case>
+                            <cwc:Case.Value>
+                                <x:Int32>1</x:Int32>
+                            </cwc:Case.Value>
+                            <Grid>
+                                <shvc:ItemIcon
+                                    Width="48"
+                                    Height="48"
+                                    Icon="{Binding Icons[0]}"
+                                    Quality="QUALITY_ORANGE"/>
+                            </Grid>
+                        </cwc:Case>
+                        <cwc:Case>
+                            <cwc:Case.Value>
+                                <x:Int32>2</x:Int32>
+                            </cwc:Case.Value>
+                            <Grid>
+                                <shvc:ItemIcon
+                                    Width="48"
+                                    Height="48"
+                                    Quality="QUALITY_ORANGE"/>
+                                <shci:CachedImage
+                                    Width="32"
+                                    Margin="2,2,0,0"
+                                    HorizontalAlignment="Left"
+                                    VerticalAlignment="Top"
+                                    Source="{Binding Icons[0]}"/>
+                                <shci:CachedImage
+                                    Width="32"
+                                    Margin="0,0,2,2"
+                                    HorizontalAlignment="Right"
+                                    VerticalAlignment="Bottom"
+                                    Source="{Binding Icons[1]}"/>
+                            </Grid>
+                        </cwc:Case>
+                    </cwc:SwitchPresenter>
+                </shvcp:HorizontalCard.Left>
+                <shvcp:HorizontalCard.Right>
+                    <StackPanel Margin="8,0,8,0" HorizontalAlignment="Left">
+                        <TextBlock
+                            Text="{Binding Name}"
+                            TextTrimming="CharacterEllipsis"
+                            TextWrapping="NoWrap"/>
+                        <TextBlock
+                            Opacity="0.7"
+                            Style="{StaticResource CaptionTextBlockStyle}"
+                            Text="{Binding Rate}"/>
+                    </StackPanel>
+                </shvcp:HorizontalCard.Right>
+            </shvcp:HorizontalCard>
         </DataTemplate>
 
         <DataTemplate x:Key="CostumeTemplate">
@@ -169,14 +220,11 @@
         </DataTemplate>
 
         <DataTemplate x:Key="FetterStoryTemplate">
-            <StackPanel Margin="0,0,0,0">
-                <TextBlock Text="{Binding Title}"/>
-                <shct:DescriptionTextBlock
-                    Margin="0,8,0,0"
-                    Description="{Binding Context}"
-                    TextStyle="{StaticResource CaptionTextBlockStyle}"/>
-                <MenuFlyoutSeparator Margin="0,8"/>
-            </StackPanel>
+            <cwc:SettingsCard Padding="16,8,8,8" Header="{Binding Title}">
+                <cwc:SettingsCard.Description>
+                    <shct:DescriptionTextBlock Description="{Binding Context}" TextStyle="{StaticResource CaptionTextBlockStyle}"/>
+                </cwc:SettingsCard.Description>
+            </cwc:SettingsCard>
         </DataTemplate>
 
         <DataTemplate x:Key="AvatarGridTemplate">
@@ -194,7 +242,7 @@
             </Grid.RowDefinitions>
             <CommandBar
                 Grid.Row="0"
-                Background="{StaticResource CardBackgroundFillColorDefaultBrush}"
+                Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                 BorderBrush="{x:Null}"
                 BorderThickness="0"
                 DefaultLabelPosition="Right">
@@ -239,7 +287,7 @@
                         DisplayMode="Inline"
                         IsPaneOpen="True"
                         OpenPaneLength="{StaticResource CompatSplitViewOpenPaneLength}"
-                        PaneBackground="{StaticResource CardBackgroundFillColorSecondaryBrush}">
+                        PaneBackground="{ThemeResource CardBackgroundFillColorSecondaryBrush}">
                         <SplitView.Pane>
                             <ListView
                                 Grid.Row="1"
@@ -264,315 +312,390 @@
                                 <ScrollViewer>
                                     <StackPanel
                                         MaxWidth="800"
-                                        Margin="0,0,16,16"
-                                        HorizontalAlignment="Left">
+                                        Padding="32"
+                                        HorizontalAlignment="Left"
+                                        Spacing="16">
                                         <!--  简介  -->
-                                        <Grid Margin="16,16,0,16" VerticalAlignment="Top">
-                                            <Grid.ColumnDefinitions>
-                                                <ColumnDefinition Width="auto"/>
-                                                <ColumnDefinition/>
-                                            </Grid.ColumnDefinitions>
-                                            <StackPanel Grid.Column="0">
-                                                <Grid Margin="0,0,0,16">
+                                        <Border cw:Effects.Shadow="{ThemeResource CompatCardShadow}">
+                                            <Grid Background="{ThemeResource SystemControlAcrylicElementMediumHighBrush}" Style="{ThemeResource GridCardStyle}">
+                                                <Grid.RowDefinitions>
+                                                    <RowDefinition/>
+                                                    <RowDefinition/>
+                                                </Grid.RowDefinitions>
+                                                <Grid.ColumnDefinitions>
+                                                    <ColumnDefinition Width="auto"/>
+                                                    <ColumnDefinition/>
+                                                </Grid.ColumnDefinitions>
+                                                <StackPanel Grid.Column="0" Margin="16">
+                                                    <Grid Margin="0,0,0,12" ColumnSpacing="8">
+                                                        <Grid.ColumnDefinitions>
+                                                            <ColumnDefinition Width="auto"/>
+                                                            <ColumnDefinition Width="auto"/>
+                                                        </Grid.ColumnDefinitions>
+                                                        <shci:MonoChrome
+                                                            Grid.Column="0"
+                                                            Width="32"
+                                                            Height="32"
+                                                            HorizontalAlignment="Left"
+                                                            Source="{Binding Selected.FetterInfo.VisionBefore, Converter={StaticResource ElementNameIconConverter}}"/>
+                                                        <shci:MonoChrome
+                                                            Grid.Column="1"
+                                                            Width="32"
+                                                            Height="32"
+                                                            Source="{Binding Selected.Weapon, Converter={StaticResource WeaponTypeIconConverter}}"/>
+                                                    </Grid>
+                                                    <shvc:ItemIcon
+                                                        Width="128"
+                                                        Height="128"
+                                                        Icon="{Binding Selected.Icon, Converter={StaticResource AvatarIconConverter}, Mode=OneWay}"
+                                                        Quality="{Binding Selected.Quality, Mode=OneWay}"/>
+                                                </StackPanel>
+
+                                                <StackPanel Grid.Column="1" Margin="16">
+                                                    <StackPanel Margin="0,0,0,2" Orientation="Horizontal">
+                                                        <TextBlock
+                                                            VerticalAlignment="Center"
+                                                            Style="{StaticResource SubtitleTextBlockStyle}"
+                                                            Text="{Binding Selected.Name}"/>
+                                                        <TextBlock
+                                                            Margin="24,0,0,0"
+                                                            VerticalAlignment="Center"
+                                                            Style="{StaticResource SubtitleTextBlockStyle}"
+                                                            Text="{Binding Selected.FetterInfo.Title}"/>
+                                                    </StackPanel>
+
+                                                    <TextBlock
+                                                        Opacity="0.7"
+                                                        Style="{StaticResource CaptionTextBlockStyle}"
+                                                        Text="{Binding Selected.FetterInfo.Detail}"
+                                                        TextWrapping="NoWrap"/>
+
+                                                    <cwc:UniformGrid
+                                                        Margin="0,16,0,0"
+                                                        ColumnSpacing="6"
+                                                        Columns="4">
+                                                        <StackPanel>
+                                                            <TextBlock Style="{StaticResource BaseTextBlockStyle}" Text="{shcm:ResourceString Name=ViewPageWiKiAvatarOccupationNameTitle}"/>
+                                                            <TextBlock
+                                                                Margin="0,6,0,0"
+                                                                Style="{StaticResource CaptionTextBlockStyle}"
+                                                                Text="{Binding Selected.FetterInfo.Native}"
+                                                                TextWrapping="NoWrap"/>
+                                                        </StackPanel>
+                                                        <StackPanel>
+                                                            <TextBlock Style="{StaticResource BaseTextBlockStyle}" Text="{shcm:ResourceString Name=ViewPageWiKiAvatarConstellationNameTitle}"/>
+                                                            <TextBlock
+                                                                Margin="0,6,0,0"
+                                                                Style="{StaticResource CaptionTextBlockStyle}"
+                                                                Text="{Binding Selected.FetterInfo.ConstellationBefore}"
+                                                                TextWrapping="NoWrap"/>
+                                                        </StackPanel>
+                                                        <StackPanel>
+                                                            <TextBlock Style="{StaticResource BaseTextBlockStyle}" Text="{shcm:ResourceString Name=ViewPageWiKiAvatarDateofBirthTitle}"/>
+                                                            <TextBlock
+                                                                Margin="0,6,0,0"
+                                                                Style="{StaticResource CaptionTextBlockStyle}"
+                                                                Text="{Binding Selected.FetterInfo.BirthFormatted}"
+                                                                TextWrapping="NoWrap"/>
+                                                        </StackPanel>
+                                                    </cwc:UniformGrid>
+
+                                                    <cwc:UniformGrid
+                                                        Margin="0,12,0,0"
+                                                        ColumnSpacing="6"
+                                                        Columns="4">
+                                                        <StackPanel>
+                                                            <TextBlock Style="{StaticResource BaseTextBlockStyle}" Text="{shcm:ResourceString Name=ViewPageWiKiAvatarChineseCVNameTitle}"/>
+                                                            <TextBlock
+                                                                Margin="0,6,0,0"
+                                                                Style="{StaticResource CaptionTextBlockStyle}"
+                                                                Text="{Binding Selected.FetterInfo.CvChinese}"
+                                                                TextWrapping="NoWrap"/>
+                                                        </StackPanel>
+                                                        <StackPanel>
+                                                            <TextBlock Style="{StaticResource BaseTextBlockStyle}" Text="{shcm:ResourceString Name=ViewPageWiKiAvatarJapaneseCVNameTitle}"/>
+                                                            <TextBlock
+                                                                Margin="0,6,0,0"
+                                                                Style="{StaticResource CaptionTextBlockStyle}"
+                                                                Text="{Binding Selected.FetterInfo.CvJapanese}"
+                                                                TextWrapping="NoWrap"/>
+                                                        </StackPanel>
+                                                        <StackPanel>
+                                                            <TextBlock Style="{StaticResource BaseTextBlockStyle}" Text="{shcm:ResourceString Name=ViewPageWiKiAvatarEnglishCVNameTitle}"/>
+                                                            <TextBlock
+                                                                Margin="0,6,0,0"
+                                                                Style="{StaticResource CaptionTextBlockStyle}"
+                                                                Text="{Binding Selected.FetterInfo.CvEnglish}"
+                                                                TextWrapping="NoWrap"/>
+                                                        </StackPanel>
+                                                        <StackPanel>
+                                                            <TextBlock Style="{StaticResource BaseTextBlockStyle}" Text="{shcm:ResourceString Name=ViewPageWiKiAvatarKoreanCVNameTitle}"/>
+                                                            <TextBlock
+                                                                Margin="0,6,0,0"
+                                                                Style="{StaticResource CaptionTextBlockStyle}"
+                                                                Text="{Binding Selected.FetterInfo.CvKorean}"
+                                                                TextWrapping="NoWrap"/>
+                                                        </StackPanel>
+                                                    </cwc:UniformGrid>
+                                                </StackPanel>
+
+                                                <StackPanel Grid.Row="1" Grid.ColumnSpan="2">
+                                                    <ItemsControl
+                                                        Margin="16,0,16,16"
+                                                        ItemTemplate="{StaticResource CultivationItemTemplate}"
+                                                        ItemsSource="{Binding Selected.CultivationItemsView}">
+                                                        <ItemsControl.ItemsPanel>
+                                                            <ItemsPanelTemplate>
+                                                                <cwc:UniformGrid
+                                                                    ColumnSpacing="8"
+                                                                    Columns="3"
+                                                                    RowSpacing="8"/>
+                                                            </ItemsPanelTemplate>
+                                                        </ItemsControl.ItemsPanel>
+                                                    </ItemsControl>
+                                                </StackPanel>
+                                            </Grid>
+                                        </Border>
+
+                                        <!--  属性  -->
+                                        <Border cw:Effects.Shadow="{ThemeResource CompatCardShadow}">
+                                            <Border Background="{ThemeResource SystemControlAcrylicElementMediumHighBrush}" CornerRadius="{ThemeResource ControlCornerRadius}">
+                                                <Border.Resources>
+                                                    <SolidColorBrush x:Key="ToggleButtonBackground" Color="Transparent"/>
+                                                    <SolidColorBrush x:Key="ExpanderContentBackground" Color="Transparent"/>
+                                                    <SolidColorBrush x:Key="SettingsCardBackground" Color="Transparent"/>
+                                                    <SolidColorBrush x:Key="SettingsCardBackgroundDisabled" Color="Transparent"/>
+                                                    <SolidColorBrush x:Key="SettingsCardBackgroundPointerOver" Color="Transparent"/>
+                                                    <SolidColorBrush x:Key="SettingsCardBackgroundPressed" Color="Transparent"/>
+                                                </Border.Resources>
+                                                <shvc:BaseValueSlider
+                                                    HorizontalAlignment="Stretch"
+                                                    HorizontalContentAlignment="Stretch"
+                                                    BaseValueInfo="{Binding BaseValueInfo, Mode=OneWay}"/>
+                                            </Border>
+                                        </Border>
+
+                                        <!--  天赋  -->
+                                        <Border cw:Effects.Shadow="{ThemeResource CompatCardShadow}">
+                                            <Border
+                                                Padding="16"
+                                                Background="{ThemeResource SystemControlAcrylicElementMediumHighBrush}"
+                                                CornerRadius="{ThemeResource ControlCornerRadius}">
+                                                <shvc:SkillPivot ItemTemplate="{StaticResource SkillDataTemplate}" Skills="{Binding Selected.SkillDepot.CompositeSkills}"/>
+                                            </Border>
+                                        </Border>
+
+                                        <!--  命座  -->
+                                        <Border cw:Effects.Shadow="{ThemeResource CompatCardShadow}">
+                                            <Border
+                                                Padding="16"
+                                                Background="{ThemeResource SystemControlAcrylicElementMediumHighBrush}"
+                                                CornerRadius="{ThemeResource ControlCornerRadius}">
+                                                <shvc:SkillPivot ItemTemplate="{StaticResource TalentDataTemplate}" Skills="{Binding Selected.SkillDepot.Talents}"/>
+                                            </Border>
+                                        </Border>
+
+                                        <!--  搭配  -->
+                                        <Border cw:Effects.Shadow="{ThemeResource CompatCardShadow}">
+                                            <Border
+                                                Padding="16"
+                                                Background="{ThemeResource SystemControlAcrylicElementMediumHighBrush}"
+                                                CornerRadius="{ThemeResource ControlCornerRadius}">
+                                                <Grid ColumnSpacing="8" RowSpacing="8">
                                                     <Grid.ColumnDefinitions>
                                                         <ColumnDefinition/>
                                                         <ColumnDefinition/>
+                                                        <ColumnDefinition/>
                                                     </Grid.ColumnDefinitions>
-                                                    <shci:MonoChrome
+                                                    <Grid.RowDefinitions>
+                                                        <RowDefinition/>
+                                                        <RowDefinition/>
+                                                    </Grid.RowDefinitions>
+                                                    <TextBlock
+                                                        Grid.Row="0"
                                                         Grid.Column="0"
-                                                        Width="32"
-                                                        Height="32"
-                                                        Source="{Binding Selected.FetterInfo.VisionBefore, Converter={StaticResource ElementNameIconConverter}}"/>
-                                                    <shci:MonoChrome
+                                                        Style="{StaticResource BaseTextBlockStyle}"
+                                                        Text="{shcm:ResourceString Name=ViewPageWiKiAvatarTeamCombinationHeader}"/>
+                                                    <ItemsControl
+                                                        Grid.Row="1"
+                                                        Grid.Column="0"
+                                                        ItemTemplate="{StaticResource CollocationTemplate}"
+                                                        ItemsPanel="{StaticResource StackPanelSpacing4Template}"
+                                                        ItemsSource="{Binding Selected.Collocation.Avatars}"/>
+                                                    <TextBlock
+                                                        Grid.Row="0"
                                                         Grid.Column="1"
-                                                        Width="32"
-                                                        Height="32"
-                                                        Source="{Binding Selected.Weapon, Converter={StaticResource WeaponTypeIconConverter}}"/>
+                                                        Style="{StaticResource BaseTextBlockStyle}"
+                                                        Text="{shcm:ResourceString Name=ViewPageWiKiAvatarWeaponCombinationHeader}"/>
+                                                    <ItemsControl
+                                                        Grid.Row="1"
+                                                        Grid.Column="1"
+                                                        ItemTemplate="{StaticResource CollocationTemplate}"
+                                                        ItemsPanel="{StaticResource StackPanelSpacing4Template}"
+                                                        ItemsSource="{Binding Selected.Collocation.Weapons}"/>
+                                                    <TextBlock
+                                                        Grid.Row="0"
+                                                        Grid.Column="2"
+                                                        Style="{StaticResource BaseTextBlockStyle}"
+                                                        Text="{shcm:ResourceString Name=ViewPageWiKiAvatarArtifactSetCombinationHeader}"/>
+                                                    <ItemsControl
+                                                        Grid.Row="1"
+                                                        Grid.Column="2"
+                                                        ItemTemplate="{StaticResource CollocationReliquaryTemplate}"
+                                                        ItemsPanel="{StaticResource StackPanelSpacing4Template}"
+                                                        ItemsSource="{Binding Selected.Collocation.ReliquarySets}"/>
                                                 </Grid>
-                                                <shvc:ItemIcon
-                                                    Width="100"
-                                                    Height="100"
-                                                    Icon="{Binding Selected.Icon, Converter={StaticResource AvatarIconConverter}, Mode=OneWay}"
-                                                    Quality="{Binding Selected.Quality, Mode=OneWay}"/>
-                                            </StackPanel>
+                                            </Border>
+                                        </Border>
 
-                                            <StackPanel Grid.Column="1" Margin="16,0,0,0">
-                                                <StackPanel Orientation="Horizontal">
-                                                    <TextBlock
-                                                        Margin="0,0,0,2"
-                                                        VerticalAlignment="Center"
-                                                        Style="{StaticResource SubtitleTextBlockStyle}"
-                                                        Text="{Binding Selected.Name}"/>
-                                                    <TextBlock
-                                                        Margin="24,0,0,2"
-                                                        VerticalAlignment="Center"
-                                                        Style="{StaticResource SubtitleTextBlockStyle}"
-                                                        Text="{Binding Selected.FetterInfo.Title}"/>
-                                                </StackPanel>
-
-                                                <TextBlock
-                                                    Margin="0,12,0,0"
-                                                    Style="{StaticResource CaptionTextBlockStyle}"
-                                                    Text="{Binding Selected.FetterInfo.Detail}"
-                                                    TextWrapping="NoWrap"/>
-
-                                                <cwc:UniformGrid
-                                                    Margin="0,12,0,0"
-                                                    ColumnSpacing="12"
-                                                    Columns="4">
-                                                    <StackPanel>
-                                                        <TextBlock Style="{StaticResource BaseTextBlockStyle}" Text="{shcm:ResourceString Name=ViewPageWiKiAvatarOccupationNameTitle}"/>
-                                                        <TextBlock
-                                                            Margin="0,6,0,0"
-                                                            Style="{StaticResource CaptionTextBlockStyle}"
-                                                            Text="{Binding Selected.FetterInfo.Native}"
-                                                            TextWrapping="NoWrap"/>
-                                                    </StackPanel>
-                                                    <StackPanel>
-                                                        <TextBlock Style="{StaticResource BaseTextBlockStyle}" Text="{shcm:ResourceString Name=ViewPageWiKiAvatarConstellationNameTitle}"/>
-                                                        <TextBlock
-                                                            Margin="0,6,0,0"
-                                                            Style="{StaticResource CaptionTextBlockStyle}"
-                                                            Text="{Binding Selected.FetterInfo.ConstellationBefore}"
-                                                            TextWrapping="NoWrap"/>
-                                                    </StackPanel>
-                                                    <StackPanel>
-                                                        <TextBlock Style="{StaticResource BaseTextBlockStyle}" Text="{shcm:ResourceString Name=ViewPageWiKiAvatarDateofBirthTitle}"/>
-                                                        <TextBlock
-                                                            Margin="0,6,0,0"
-                                                            Style="{StaticResource CaptionTextBlockStyle}"
-                                                            Text="{Binding Selected.FetterInfo.BirthFormatted}"
-                                                            TextWrapping="NoWrap"/>
-                                                    </StackPanel>
-                                                </cwc:UniformGrid>
-
-                                                <cwc:UniformGrid
-                                                    Margin="0,12,0,0"
-                                                    ColumnSpacing="12"
-                                                    Columns="4">
-                                                    <StackPanel>
-                                                        <TextBlock Style="{StaticResource BaseTextBlockStyle}" Text="{shcm:ResourceString Name=ViewPageWiKiAvatarChineseCVNameTitle}"/>
-                                                        <TextBlock
-                                                            Margin="0,6,0,0"
-                                                            Style="{StaticResource CaptionTextBlockStyle}"
-                                                            Text="{Binding Selected.FetterInfo.CvChinese}"
-                                                            TextWrapping="NoWrap"/>
-                                                    </StackPanel>
-                                                    <StackPanel>
-                                                        <TextBlock Style="{StaticResource BaseTextBlockStyle}" Text="{shcm:ResourceString Name=ViewPageWiKiAvatarJapaneseCVNameTitle}"/>
-                                                        <TextBlock
-                                                            Margin="0,6,0,0"
-                                                            Style="{StaticResource CaptionTextBlockStyle}"
-                                                            Text="{Binding Selected.FetterInfo.CvJapanese}"
-                                                            TextWrapping="NoWrap"/>
-                                                    </StackPanel>
-                                                    <StackPanel>
-                                                        <TextBlock Style="{StaticResource BaseTextBlockStyle}" Text="{shcm:ResourceString Name=ViewPageWiKiAvatarEnglishCVNameTitle}"/>
-                                                        <TextBlock
-                                                            Margin="0,6,0,0"
-                                                            Style="{StaticResource CaptionTextBlockStyle}"
-                                                            Text="{Binding Selected.FetterInfo.CvEnglish}"
-                                                            TextWrapping="NoWrap"/>
-                                                    </StackPanel>
-                                                    <StackPanel>
-                                                        <TextBlock Style="{StaticResource BaseTextBlockStyle}" Text="{shcm:ResourceString Name=ViewPageWiKiAvatarKoreanCVNameTitle}"/>
-                                                        <TextBlock
-                                                            Margin="0,6,0,0"
-                                                            Style="{StaticResource CaptionTextBlockStyle}"
-                                                            Text="{Binding Selected.FetterInfo.CvKorean}"
-                                                            TextWrapping="NoWrap"/>
-                                                    </StackPanel>
-                                                </cwc:UniformGrid>
-                                            </StackPanel>
-                                        </Grid>
-                                        <!--  属性  -->
-                                        <shvc:BaseValueSlider
-                                            Margin="16,16,0,0"
-                                            HorizontalAlignment="Stretch"
-                                            HorizontalContentAlignment="Stretch"
-                                            BaseValueInfo="{Binding BaseValueInfo, Mode=OneWay}"/>
-                                        <TextBlock
-                                            Margin="16,32,0,0"
-                                            Style="{StaticResource BaseTextBlockStyle}"
-                                            Text="{shcm:ResourceString Name=ViewPageWiKiAvatarAscensionMaterialsHeader}"/>
-                                        <GridView
-                                            Margin="16,16,0,0"
-                                            ItemTemplate="{StaticResource CultivationItemTemplate}"
-                                            ItemsSource="{Binding Selected.CultivationItemsView}"
-                                            SelectionMode="None"/>
-
-                                        <TextBlock
-                                            Margin="16,32,0,0"
-                                            Style="{StaticResource BaseTextBlockStyle}"
-                                            Text="{shcm:ResourceString Name=ViewPageWiKiAvatarTanlentHeader}"/>
-                                        <shvc:SkillPivot
-                                            Margin="16,16,0,0"
-                                            ItemTemplate="{StaticResource SkillDataTemplate}"
-                                            Skills="{Binding Selected.SkillDepot.CompositeSkills}"/>
-
-                                        <TextBlock
-                                            Margin="16,32,0,0"
-                                            Style="{StaticResource BaseTextBlockStyle}"
-                                            Text="{shcm:ResourceString Name=ViewPageWiKiAvatarConstellationNameTitle}"/>
-                                        <shvc:SkillPivot
-                                            Grid.Column="1"
-                                            Margin="16,16,0,0"
-                                            ItemTemplate="{StaticResource TalentDataTemplate}"
-                                            Skills="{Binding Selected.SkillDepot.Talents}"/>
-
-                                        <TextBlock
-                                            Margin="16,32,0,0"
-                                            Style="{StaticResource BaseTextBlockStyle}"
-                                            Text="{shcm:ResourceString Name=ViewPageWiKiAvatarTeamCombinationHeader}"/>
-                                        <GridView
-                                            Margin="16,16,0,0"
-                                            ItemTemplate="{StaticResource CollocationTemplate}"
-                                            ItemsSource="{Binding Selected.Collocation.Avatars}"
-                                            SelectionMode="None"/>
-                                        <TextBlock
-                                            Margin="16,0,0,0"
-                                            Style="{StaticResource BaseTextBlockStyle}"
-                                            Text="{shcm:ResourceString Name=ViewPageWiKiAvatarWeaponCombinationHeader}"/>
-                                        <GridView
-                                            Margin="16,16,0,0"
-                                            HorizontalAlignment="Stretch"
-                                            HorizontalContentAlignment="Stretch"
-                                            ItemTemplate="{StaticResource CollocationTemplate}"
-                                            ItemsSource="{Binding Selected.Collocation.Weapons}"
-                                            SelectionMode="None"/>
-                                        <TextBlock
-                                            Margin="16,0,0,0"
-                                            Style="{StaticResource BaseTextBlockStyle}"
-                                            Text="{shcm:ResourceString Name=ViewPageWiKiAvatarArtifactSetCombinationHeader}"/>
-                                        <GridView
-                                            Margin="16,16,0,0"
-                                            HorizontalAlignment="Stretch"
-                                            HorizontalContentAlignment="Stretch"
-                                            ItemTemplate="{StaticResource CollocationReliquaryTemplate}"
-                                            ItemsSource="{Binding Selected.Collocation.ReliquarySets}"
-                                            SelectionMode="None"/>
-
-                                        <TextBlock
-                                            Margin="16,32,0,0"
-                                            Style="{StaticResource BaseTextBlockStyle}"
-                                            Text="{shcm:ResourceString Name=ViewPageWiKiAvatarMiscHeader}"/>
-                                        <Border Margin="16,16,0,0" cw:Effects.Shadow="{ThemeResource CompatCardShadow}">
+                                        <!--  立绘  -->
+                                        <Border cw:Effects.Shadow="{ThemeResource CompatCardShadow}">
                                             <cwc:ConstrainedBox AspectRatio="2048:1024">
-                                                <Grid Style="{ThemeResource GridCardStyle}">
+                                                <Grid Background="{ThemeResource SystemControlAcrylicElementMediumHighBrush}" Style="{ThemeResource GridCardStyle}">
                                                     <Grid.ColumnDefinitions>
                                                         <ColumnDefinition Width="auto"/>
                                                         <ColumnDefinition/>
                                                     </Grid.ColumnDefinitions>
-
-                                                    <shci:CachedImage
-                                                        Grid.ColumnSpan="2"
-                                                        HorizontalAlignment="Center"
-                                                        VerticalAlignment="Stretch"
-                                                        Source="{Binding Selected.Icon, Converter={StaticResource GachaAvatarImgConverter}}"/>
-
-                                                    <Border Margin="16" Style="{StaticResource BorderCardStyle}">
-                                                        <shci:CachedImage
-                                                            HorizontalAlignment="Stretch"
-                                                            CornerRadius="{ThemeResource ControlCornerRadius}"
-                                                            Source="{Binding Selected.Icon, Converter={StaticResource GachaAvatarIconConverter}}"/>
+                                                    <Border
+                                                        Grid.Column="0"
+                                                        Margin="16"
+                                                        Style="{StaticResource BorderCardStyle}">
+                                                        <cwc:ConstrainedBox AspectRatio="320:1024">
+                                                            <shci:CachedImage CornerRadius="{ThemeResource ControlCornerRadius}" Source="{Binding Selected.Icon, Converter={StaticResource GachaAvatarIconConverter}}"/>
+                                                        </cwc:ConstrainedBox>
                                                     </Border>
+
+                                                    <shci:CachedImage Grid.ColumnSpan="2" Source="{Binding Selected.Icon, Converter={StaticResource GachaAvatarImgConverter}}"/>
+
                                                 </Grid>
                                             </cwc:ConstrainedBox>
                                         </Border>
 
-
                                         <!--  料理  -->
-                                        <Expander
-                                            Margin="16,16,0,0"
-                                            HorizontalAlignment="Stretch"
-                                            HorizontalContentAlignment="Stretch"
-                                            Header="{shcm:ResourceString Name=ViewPageWiKiAvatarFoodHeader}">
-                                            <Grid DataContext="{Binding Selected.CookBonusView}">
-                                                <Grid.RowDefinitions>
-                                                    <RowDefinition Height="auto"/>
-                                                    <RowDefinition Height="auto"/>
-                                                    <RowDefinition Height="auto"/>
-                                                    <RowDefinition Height="auto"/>
-                                                </Grid.RowDefinitions>
-                                                <Grid.ColumnDefinitions>
-                                                    <ColumnDefinition Width="auto"/>
-                                                    <ColumnDefinition Width="auto"/>
-                                                    <ColumnDefinition/>
-                                                </Grid.ColumnDefinitions>
-                                                <TextBlock
-                                                    Grid.Column="0"
-                                                    Style="{StaticResource BaseTextBlockStyle}"
-                                                    Text="{shcm:ResourceString Name=ViewPageWiKiAvatarSpecialFoodTitle}"/>
-                                                <shvc:BottomTextControl
-                                                    Grid.Row="1"
-                                                    Grid.Column="0"
-                                                    Margin="0,16,0,0"
-                                                    Text="{Binding Item.Name}">
-                                                    <shvc:ItemIcon Icon="{Binding Item.Icon, Converter={StaticResource ItemIconConverter}}" Quality="{Binding Item.RankLevel}"/>
-                                                </shvc:BottomTextControl>
-                                                <TextBlock
-                                                    Grid.Column="1"
-                                                    Margin="16,0,0,0"
-                                                    Style="{StaticResource BaseTextBlockStyle}"
-                                                    Text="{shcm:ResourceString Name=ViewPageWiKiAvatarOriginalFoodTitle}"/>
-                                                <shvc:BottomTextControl
-                                                    Grid.Row="1"
-                                                    Grid.Column="1"
-                                                    Margin="16,16,0,0"
-                                                    Text="{Binding OriginItem.Name}">
-                                                    <shvc:ItemIcon Icon="{Binding OriginItem.Icon, Converter={StaticResource ItemIconConverter}}" Quality="{Binding OriginItem.RankLevel}"/>
-                                                </shvc:BottomTextControl>
-                                                <StackPanel
-                                                    Grid.RowSpan="4"
-                                                    Grid.Column="2"
-                                                    Margin="16,0,0,0">
-                                                    <TextBlock
-                                                        Grid.Row="2"
-                                                        Grid.ColumnSpan="4"
-                                                        Text="{Binding Item.Description}"
-                                                        TextWrapping="Wrap"/>
-                                                    <TextBlock
-                                                        Grid.Row="3"
-                                                        Grid.ColumnSpan="4"
-                                                        Margin="0,16,0,0"
-                                                        Text="{Binding Item.EffectDescription}"
-                                                        TextWrapping="Wrap"/>
-                                                </StackPanel>
-                                            </Grid>
-                                        </Expander>
+                                        <Border cw:Effects.Shadow="{ThemeResource CompatCardShadow}">
+                                            <Border Background="{ThemeResource SystemControlAcrylicElementMediumHighBrush}" CornerRadius="{ThemeResource ControlCornerRadius}">
+                                                <Border.Resources>
+                                                    <SolidColorBrush x:Key="ExpanderContentBackground" Color="Transparent"/>
+                                                    <SolidColorBrush x:Key="ExpanderHeaderBackground" Color="Transparent"/>
+                                                </Border.Resources>
+                                                <Expander
+                                                    HorizontalAlignment="Stretch"
+                                                    HorizontalContentAlignment="Stretch"
+                                                    Header="{shcm:ResourceString Name=ViewPageWiKiAvatarFoodHeader}">
+                                                    <Grid DataContext="{Binding Selected.CookBonusView}">
+                                                        <Grid.RowDefinitions>
+                                                            <RowDefinition Height="auto"/>
+                                                            <RowDefinition Height="auto"/>
+                                                            <RowDefinition Height="auto"/>
+                                                            <RowDefinition Height="auto"/>
+                                                        </Grid.RowDefinitions>
+                                                        <Grid.ColumnDefinitions>
+                                                            <ColumnDefinition Width="auto"/>
+                                                            <ColumnDefinition Width="auto"/>
+                                                            <ColumnDefinition/>
+                                                        </Grid.ColumnDefinitions>
+                                                        <TextBlock
+                                                            Grid.Column="0"
+                                                            Style="{StaticResource BaseTextBlockStyle}"
+                                                            Text="{shcm:ResourceString Name=ViewPageWiKiAvatarSpecialFoodTitle}"/>
+                                                        <shvc:BottomTextControl
+                                                            Grid.Row="1"
+                                                            Grid.Column="0"
+                                                            Margin="0,16,0,0"
+                                                            Text="{Binding Item.Name}">
+                                                            <shvc:ItemIcon Icon="{Binding Item.Icon, Converter={StaticResource ItemIconConverter}}" Quality="{Binding Item.RankLevel}"/>
+                                                        </shvc:BottomTextControl>
+                                                        <TextBlock
+                                                            Grid.Column="1"
+                                                            Margin="16,0,0,0"
+                                                            Style="{StaticResource BaseTextBlockStyle}"
+                                                            Text="{shcm:ResourceString Name=ViewPageWiKiAvatarOriginalFoodTitle}"/>
+                                                        <shvc:BottomTextControl
+                                                            Grid.Row="1"
+                                                            Grid.Column="1"
+                                                            Margin="16,16,0,0"
+                                                            Text="{Binding OriginItem.Name}">
+                                                            <shvc:ItemIcon Icon="{Binding OriginItem.Icon, Converter={StaticResource ItemIconConverter}}" Quality="{Binding OriginItem.RankLevel}"/>
+                                                        </shvc:BottomTextControl>
+                                                        <StackPanel
+                                                            Grid.RowSpan="4"
+                                                            Grid.Column="2"
+                                                            Margin="16,0,0,0">
+                                                            <TextBlock
+                                                                Grid.Row="2"
+                                                                Grid.ColumnSpan="4"
+                                                                Text="{Binding Item.Description}"
+                                                                TextWrapping="Wrap"/>
+                                                            <TextBlock
+                                                                Grid.Row="3"
+                                                                Grid.ColumnSpan="4"
+                                                                Margin="0,16,0,0"
+                                                                Text="{Binding Item.EffectDescription}"
+                                                                TextWrapping="Wrap"/>
+                                                        </StackPanel>
+                                                    </Grid>
+                                                </Expander>
+                                            </Border>
+                                        </Border>
                                         <!--  衣装  -->
-                                        <Expander
-                                            Margin="16,16,0,0"
-                                            HorizontalAlignment="Stretch"
-                                            HorizontalContentAlignment="Stretch"
-                                            Header="{shcm:ResourceString Name=ViewPageWiKiAvatarCostumeHeader}">
-                                            <ItemsControl
-                                                Margin="0,0,0,-16"
-                                                ItemTemplate="{StaticResource CostumeTemplate}"
-                                                ItemsSource="{Binding Selected.Costumes}"/>
-                                        </Expander>
+                                        <Border cw:Effects.Shadow="{ThemeResource CompatCardShadow}">
+                                            <Border Background="{ThemeResource SystemControlAcrylicElementMediumHighBrush}" CornerRadius="{ThemeResource ControlCornerRadius}">
+                                                <Border.Resources>
+                                                    <SolidColorBrush x:Key="ExpanderContentBackground" Color="Transparent"/>
+                                                    <SolidColorBrush x:Key="ExpanderHeaderBackground" Color="Transparent"/>
+                                                </Border.Resources>
+                                                <Expander
+                                                    HorizontalAlignment="Stretch"
+                                                    HorizontalContentAlignment="Stretch"
+                                                    Header="{shcm:ResourceString Name=ViewPageWiKiAvatarCostumeHeader}"
+                                                    IsExpanded="True">
+                                                    <ItemsControl
+                                                        Margin="0,0,0,-16"
+                                                        ItemTemplate="{StaticResource CostumeTemplate}"
+                                                        ItemsSource="{Binding Selected.Costumes}"/>
+                                                </Expander>
+                                            </Border>
+                                        </Border>
+
                                         <!--  资料  -->
-                                        <Expander
-                                            Margin="16,16,0,0"
-                                            HorizontalAlignment="Stretch"
-                                            HorizontalContentAlignment="Stretch"
-                                            Header="{shcm:ResourceString Name=ViewPageWiKiAvatarQuotesHeader}">
-                                            <ItemsControl
-                                                Margin="0,0,0,-24"
-                                                ItemTemplate="{StaticResource FetterStoryTemplate}"
-                                                ItemsSource="{Binding Selected.FetterInfo.Fetters}"/>
-                                        </Expander>
+                                        <Border cw:Effects.Shadow="{ThemeResource CompatCardShadow}">
+                                            <Border Background="{ThemeResource SystemControlAcrylicElementMediumHighBrush}" CornerRadius="{ThemeResource ControlCornerRadius}">
+                                                <Border.Resources>
+                                                    <SolidColorBrush x:Key="ToggleButtonBackground" Color="Transparent"/>
+                                                    <SolidColorBrush x:Key="ExpanderContentBackground" Color="Transparent"/>
+                                                    <SolidColorBrush x:Key="SettingsCardBackground" Color="Transparent"/>
+                                                    <SolidColorBrush x:Key="SettingsCardBackgroundDisabled" Color="Transparent"/>
+                                                    <SolidColorBrush x:Key="SettingsCardBackgroundPointerOver" Color="Transparent"/>
+                                                    <SolidColorBrush x:Key="SettingsCardBackgroundPressed" Color="Transparent"/>
+                                                </Border.Resources>
+                                                <ScrollViewer VerticalScrollBarVisibility="Hidden">
+                                                    <cwc:SettingsExpander
+                                                        Header="{shcm:ResourceString Name=ViewPageWiKiAvatarQuotesHeader}"
+                                                        ItemTemplate="{StaticResource FetterStoryTemplate}"
+                                                        ItemsSource="{Binding Selected.FetterInfo.Fetters}"/>
+                                                </ScrollViewer>
+                                            </Border>
+                                        </Border>
+
                                         <!--  故事  -->
-                                        <Expander
-                                            Margin="16,16,0,0"
-                                            HorizontalAlignment="Stretch"
-                                            HorizontalContentAlignment="Stretch"
-                                            Header="{shcm:ResourceString Name=ViewPageWiKiAvatarStoriesHeader}">
-                                            <ItemsControl
-                                                Margin="0,0,0,-24"
-                                                ItemTemplate="{StaticResource FetterStoryTemplate}"
-                                                ItemsSource="{Binding Selected.FetterInfo.FetterStories}"/>
-                                        </Expander>
+                                        <Border cw:Effects.Shadow="{ThemeResource CompatCardShadow}">
+                                            <Border Background="{ThemeResource SystemControlAcrylicElementMediumHighBrush}" CornerRadius="{ThemeResource ControlCornerRadius}">
+                                                <Border.Resources>
+                                                    <SolidColorBrush x:Key="ToggleButtonBackground" Color="Transparent"/>
+                                                    <SolidColorBrush x:Key="ExpanderContentBackground" Color="Transparent"/>
+                                                    <SolidColorBrush x:Key="SettingsCardBackground" Color="Transparent"/>
+                                                    <SolidColorBrush x:Key="SettingsCardBackgroundDisabled" Color="Transparent"/>
+                                                    <SolidColorBrush x:Key="SettingsCardBackgroundPointerOver" Color="Transparent"/>
+                                                    <SolidColorBrush x:Key="SettingsCardBackgroundPressed" Color="Transparent"/>
+                                                </Border.Resources>
+                                                <ScrollViewer VerticalScrollBarVisibility="Hidden">
+                                                    <cwc:SettingsExpander
+                                                        Header="{shcm:ResourceString Name=ViewPageWiKiAvatarStoriesHeader}"
+                                                        ItemTemplate="{StaticResource FetterStoryTemplate}"
+                                                        ItemsSource="{Binding Selected.FetterInfo.FetterStories}"/>
+                                                </ScrollViewer>
+                                            </Border>
+                                        </Border>
                                     </StackPanel>
                                 </ScrollViewer>
                             </Grid>
diff --git a/src/Snap.Hutao/Snap.Hutao/ViewModel/Complex/ReliquarySetView.cs b/src/Snap.Hutao/Snap.Hutao/ViewModel/Complex/ReliquarySetView.cs
index 541345c1..d69be780 100644
--- a/src/Snap.Hutao/Snap.Hutao/ViewModel/Complex/ReliquarySetView.cs
+++ b/src/Snap.Hutao/Snap.Hutao/ViewModel/Complex/ReliquarySetView.cs
@@ -27,20 +27,14 @@ internal sealed class ReliquarySetView
         {
             StringBuilder nameBuilder = new();
             List<Uri> icons = new(2);
-            foreach (ReliquarySet set in CollectionsMarshal.AsSpan(sets))
+            foreach (ref readonly ReliquarySet set in CollectionsMarshal.AsSpan(sets))
             {
                 Model.Metadata.Reliquary.ReliquarySet metaSet = idReliquarySetMap[set.EquipAffixId];
-
-                if (nameBuilder.Length > 0)
-                {
-                    nameBuilder.AppendLine();
-                }
-
-                nameBuilder.Append(set.Count).Append('×').Append(metaSet.Name);
+                nameBuilder.Append(set.Count).Append('×').Append(metaSet.Name).Append('+');
                 icons.Add(RelicIconConverter.IconNameToUri(metaSet.Icon));
             }
 
-            Name = nameBuilder.ToString();
+            Name = nameBuilder.ToString(0, nameBuilder.Length - 1);
             Icons = icons;
         }
         else