From 0f5b6dda167ab22e56c284ce80909e1ce86c0d6a Mon Sep 17 00:00:00 2001
From: qhy040404 <qhy040404@163.com>
Date: Tue, 5 Mar 2024 21:16:53 +0800
Subject: [PATCH 1/2] refresh ui for team appearance

---
 .../View/Page/SpiralAbyssRecordPage.xaml      | 58 +++++++++----------
 .../Snap.Hutao/ViewModel/Complex/Team.cs      |  2 +
 2 files changed, 28 insertions(+), 32 deletions(-)

diff --git a/src/Snap.Hutao/Snap.Hutao/View/Page/SpiralAbyssRecordPage.xaml b/src/Snap.Hutao/Snap.Hutao/View/Page/SpiralAbyssRecordPage.xaml
index 76ae8f69..ed2e0a83 100644
--- a/src/Snap.Hutao/Snap.Hutao/View/Page/SpiralAbyssRecordPage.xaml
+++ b/src/Snap.Hutao/Snap.Hutao/View/Page/SpiralAbyssRecordPage.xaml
@@ -506,39 +506,33 @@
                         <DataTemplate x:Key="TeamItemTemplate" d:DataType="shvcom:Team">
                             <Border Margin="0,0,16,8" Style="{StaticResource BorderCardStyle}">
                                 <Grid Margin="6">
-                                    <Grid.ColumnDefinitions>
-                                        <ColumnDefinition Width="184"/>
-                                        <ColumnDefinition Width="*"/>
-                                    </Grid.ColumnDefinitions>
-                                    <ItemsControl
-                                        MinWidth="210"
-                                        HorizontalAlignment="Left"
-                                        ItemsSource="{Binding}">
-                                        <ItemsControl.ItemsPanel>
-                                            <ItemsPanelTemplate>
-                                                <StackPanel Orientation="Horizontal" Spacing="6"/>
-                                            </ItemsPanelTemplate>
-                                        </ItemsControl.ItemsPanel>
-                                        <ItemsControl.ItemTemplate>
-                                            <DataTemplate>
-                                                <shvcon:ItemIcon
-                                                    Width="40"
-                                                    Height="40"
-                                                    Icon="{Binding Icon}"
-                                                    Quality="{Binding Quality}"/>
-                                            </DataTemplate>
-                                        </ItemsControl.ItemTemplate>
-                                    </ItemsControl>
-                                    <Viewbox
-                                        Grid.Column="1"
-                                        Height="40"
-                                        Stretch="Uniform">
-                                        <TextBlock
-                                            Margin="4,8"
-                                            HorizontalAlignment="Center"
-                                            VerticalAlignment="Center"
-                                            Text="{Binding Rate}"/>
+                                    <Grid.RowDefinitions>
+                                        <RowDefinition Height="auto"/>
+                                        <RowDefinition Height="36"/>
+                                    </Grid.RowDefinitions>
+                                    <Viewbox Stretch="Uniform">
+                                        <ItemsControl HorizontalAlignment="Left" ItemsSource="{Binding}">
+                                            <ItemsControl.ItemsPanel>
+                                                <ItemsPanelTemplate>
+                                                    <StackPanel Orientation="Horizontal" Spacing="6"/>
+                                                </ItemsPanelTemplate>
+                                            </ItemsControl.ItemsPanel>
+                                            <ItemsControl.ItemTemplate>
+                                                <DataTemplate>
+                                                    <shvcon:ItemIcon
+                                                        Width="40"
+                                                        Height="40"
+                                                        Icon="{Binding Icon}"
+                                                        Quality="{Binding Quality}"/>
+                                                </DataTemplate>
+                                            </ItemsControl.ItemTemplate>
+                                        </ItemsControl>
                                     </Viewbox>
+                                    <TextBlock
+                                        Grid.Row="1"
+                                        HorizontalAlignment="Center"
+                                        VerticalAlignment="Center"
+                                        Text="{Binding Rate}"/>
                                 </Grid>
                             </Border>
                         </DataTemplate>
diff --git a/src/Snap.Hutao/Snap.Hutao/ViewModel/Complex/Team.cs b/src/Snap.Hutao/Snap.Hutao/ViewModel/Complex/Team.cs
index 37006714..de63edf6 100644
--- a/src/Snap.Hutao/Snap.Hutao/ViewModel/Complex/Team.cs
+++ b/src/Snap.Hutao/Snap.Hutao/ViewModel/Complex/Team.cs
@@ -29,6 +29,8 @@ internal sealed class Team : List<AvatarView>
             Add(new(idAvatarMap[id]));
         }
 
+        AddRange(new AvatarView[4 - Count]);
+
         Rate = SH.FormatModelBindingHutaoTeamUpCountFormat(team.Rate);
     }
 

From 6cbf8ca9180f2caf3a865bd450a82228049a8467 Mon Sep 17 00:00:00 2001
From: Lightczx <1686188646@qq.com>
Date: Wed, 6 Mar 2024 15:43:46 +0800
Subject: [PATCH 2/2] code style

---
 .../Control/Helper/UIElementHelper.cs         | 24 ++++++++
 .../Control/Theme/ItemsPanelTemplate.xaml     |  3 +
 .../View/Page/SpiralAbyssRecordPage.xaml      | 61 ++++++++++++-------
 .../Snap.Hutao/ViewModel/Complex/Team.cs      |  1 +
 4 files changed, 66 insertions(+), 23 deletions(-)
 create mode 100644 src/Snap.Hutao/Snap.Hutao/Control/Helper/UIElementHelper.cs

diff --git a/src/Snap.Hutao/Snap.Hutao/Control/Helper/UIElementHelper.cs b/src/Snap.Hutao/Snap.Hutao/Control/Helper/UIElementHelper.cs
new file mode 100644
index 00000000..988bfe5d
--- /dev/null
+++ b/src/Snap.Hutao/Snap.Hutao/Control/Helper/UIElementHelper.cs
@@ -0,0 +1,24 @@
+// Copyright (c) DGP Studio. All rights reserved.
+// Licensed under the MIT license.
+
+using Microsoft.UI.Xaml;
+
+namespace Snap.Hutao.Control.Helper;
+
+[SuppressMessage("", "SH001")]
+[DependencyProperty("VisibilityObject", typeof(object), null, nameof(OnVisibilityObjectChanged), IsAttached = true, AttachedType = typeof(UIElement))]
+[DependencyProperty("OpacityObject", typeof(object), null, nameof(OnOpacityObjectChanged), IsAttached = true, AttachedType = typeof(UIElement))]
+public sealed partial class UIElementHelper
+{
+    private static void OnVisibilityObjectChanged(DependencyObject dp, DependencyPropertyChangedEventArgs e)
+    {
+        UIElement element = (UIElement)dp;
+        element.Visibility = e.NewValue is null ? Visibility.Collapsed : Visibility.Visible;
+    }
+
+    private static void OnOpacityObjectChanged(DependencyObject dp, DependencyPropertyChangedEventArgs e)
+    {
+        UIElement element = (UIElement)dp;
+        element.Opacity = e.NewValue is null ? 0D : 1D;
+    }
+}
\ 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 11716811..55879c4e 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="HorizontalStackPanelSpacing4Template">
+        <StackPanel Orientation="Horizontal" Spacing="4"/>
+    </ItemsPanelTemplate>
     <ItemsPanelTemplate x:Key="StackPanelSpacing4Template">
         <StackPanel Spacing="4"/>
     </ItemsPanelTemplate>
diff --git a/src/Snap.Hutao/Snap.Hutao/View/Page/SpiralAbyssRecordPage.xaml b/src/Snap.Hutao/Snap.Hutao/View/Page/SpiralAbyssRecordPage.xaml
index ed2e0a83..6feefaea 100644
--- a/src/Snap.Hutao/Snap.Hutao/View/Page/SpiralAbyssRecordPage.xaml
+++ b/src/Snap.Hutao/Snap.Hutao/View/Page/SpiralAbyssRecordPage.xaml
@@ -10,6 +10,7 @@
     xmlns:mxi="using:Microsoft.Xaml.Interactivity"
     xmlns:shc="using:Snap.Hutao.Control"
     xmlns:shcb="using:Snap.Hutao.Control.Behavior"
+    xmlns:shch="using:Snap.Hutao.Control.Helper"
     xmlns:shci="using:Snap.Hutao.Control.Image"
     xmlns:shcm="using:Snap.Hutao.Control.Markup"
     xmlns:shcp="using:Snap.Hutao.Control.Panel"
@@ -503,33 +504,39 @@
                     </mxi:Interaction.Behaviors>
 
                     <Grid.Resources>
+                        <DataTemplate x:Key="AvatarViewTemplate" d:DataType="shvcom:AvatarView">
+                            <shvcon:ItemIcon
+                                Width="40"
+                                Height="40"
+                                shch:UIElementHelper.OpacityObject="{Binding Icon}"
+                                Icon="{Binding Icon}"
+                                Opacity="0"
+                                Quality="{Binding Quality}"/>
+                        </DataTemplate>
+
                         <DataTemplate x:Key="TeamItemTemplate" d:DataType="shvcom:Team">
-                            <Border Margin="0,0,16,8" Style="{StaticResource BorderCardStyle}">
-                                <Grid Margin="6">
+                            <Border Style="{StaticResource BorderCardStyle}">
+                                <Grid>
                                     <Grid.RowDefinitions>
                                         <RowDefinition Height="auto"/>
-                                        <RowDefinition Height="36"/>
+                                        <RowDefinition Height="auto"/>
                                     </Grid.RowDefinitions>
                                     <Viewbox Stretch="Uniform">
-                                        <ItemsControl HorizontalAlignment="Left" ItemsSource="{Binding}">
-                                            <ItemsControl.ItemsPanel>
-                                                <ItemsPanelTemplate>
-                                                    <StackPanel Orientation="Horizontal" Spacing="6"/>
-                                                </ItemsPanelTemplate>
-                                            </ItemsControl.ItemsPanel>
-                                            <ItemsControl.ItemTemplate>
-                                                <DataTemplate>
-                                                    <shvcon:ItemIcon
-                                                        Width="40"
-                                                        Height="40"
-                                                        Icon="{Binding Icon}"
-                                                        Quality="{Binding Quality}"/>
-                                                </DataTemplate>
-                                            </ItemsControl.ItemTemplate>
-                                        </ItemsControl>
+                                        <ItemsControl
+                                            Margin="4"
+                                            HorizontalAlignment="Left"
+                                            ItemTemplate="{StaticResource AvatarViewTemplate}"
+                                            ItemsPanel="{ThemeResource HorizontalStackPanelSpacing4Template}"
+                                            ItemsSource="{Binding}"/>
                                     </Viewbox>
+                                    <Border
+                                        Grid.Row="1"
+                                        Background="{ThemeResource SolidBackgroundFillColorBaseBrush}"
+                                        CornerRadius="{ThemeResource ControlCornerRadiusBottom}"
+                                        Opacity="0.7"/>
                                     <TextBlock
                                         Grid.Row="1"
+                                        Margin="4"
                                         HorizontalAlignment="Center"
                                         VerticalAlignment="Center"
                                         Text="{Binding Rate}"/>
@@ -686,27 +693,35 @@
                                         </Grid.ColumnDefinitions>
                                         <ListView
                                             Grid.Column="0"
-                                            Padding="0,0,0,0"
+                                            Padding="0"
                                             ItemContainerStyle="{ThemeResource NoneSelectionListViewItemStyle}"
                                             ItemTemplate="{StaticResource TeamItemTemplate}"
                                             ItemsSource="{Binding Up}"
                                             SelectionMode="None">
                                             <ListView.ItemsPanel>
                                                 <ItemsPanelTemplate>
-                                                    <shcp:UniformPanel MinItemWidth="240"/>
+                                                    <shcp:UniformPanel
+                                                        Padding="0,0,16,0"
+                                                        ColumnSpacing="6"
+                                                        MinItemWidth="240"
+                                                        RowSpacing="2"/>
                                                 </ItemsPanelTemplate>
                                             </ListView.ItemsPanel>
                                         </ListView>
                                         <ListView
                                             Grid.Column="1"
-                                            Padding="0,0,0,0"
+                                            Padding="0"
                                             ItemContainerStyle="{ThemeResource NoneSelectionListViewItemStyle}"
                                             ItemTemplate="{StaticResource TeamItemTemplate}"
                                             ItemsSource="{Binding Down}"
                                             SelectionMode="None">
                                             <ListView.ItemsPanel>
                                                 <ItemsPanelTemplate>
-                                                    <shcp:UniformPanel MinItemWidth="240"/>
+                                                    <shcp:UniformPanel
+                                                        Padding="0,0,16,0"
+                                                        ColumnSpacing="6"
+                                                        MinItemWidth="240"
+                                                        RowSpacing="2"/>
                                                 </ItemsPanelTemplate>
                                             </ListView.ItemsPanel>
                                         </ListView>
diff --git a/src/Snap.Hutao/Snap.Hutao/ViewModel/Complex/Team.cs b/src/Snap.Hutao/Snap.Hutao/ViewModel/Complex/Team.cs
index de63edf6..19a7e5bc 100644
--- a/src/Snap.Hutao/Snap.Hutao/ViewModel/Complex/Team.cs
+++ b/src/Snap.Hutao/Snap.Hutao/ViewModel/Complex/Team.cs
@@ -5,6 +5,7 @@ using Microsoft.Extensions.Primitives;
 using Snap.Hutao.Model.Metadata.Avatar;
 using Snap.Hutao.Model.Primitive;
 using Snap.Hutao.Web.Hutao.SpiralAbyss;
+using System.Diagnostics;
 using System.Globalization;
 
 namespace Snap.Hutao.ViewModel.Complex;