From 97bd2b5af9962d9c204480042d2ba17e0e9b2c35 Mon Sep 17 00:00:00 2001
From: DismissedLight <1686188646@qq.com>
Date: Sat, 2 Sep 2023 13:24:14 +0800
Subject: [PATCH] list item alternating

---
 .../Alternating/AlternatingItemsControl.cs    | 39 ++++++++
 .../Control/Alternating/IAlternatingItem.cs   | 11 +++
 .../View/Page/AvatarPropertyPage.xaml         | 88 +++++++++----------
 .../AvatarProperty/AvatarProperty.cs          |  8 +-
 4 files changed, 100 insertions(+), 46 deletions(-)
 create mode 100644 src/Snap.Hutao/Snap.Hutao/Control/Alternating/AlternatingItemsControl.cs
 create mode 100644 src/Snap.Hutao/Snap.Hutao/Control/Alternating/IAlternatingItem.cs

diff --git a/src/Snap.Hutao/Snap.Hutao/Control/Alternating/AlternatingItemsControl.cs b/src/Snap.Hutao/Snap.Hutao/Control/Alternating/AlternatingItemsControl.cs
new file mode 100644
index 00000000..da031a04
--- /dev/null
+++ b/src/Snap.Hutao/Snap.Hutao/Control/Alternating/AlternatingItemsControl.cs
@@ -0,0 +1,39 @@
+// Copyright (c) DGP Studio. All rights reserved.
+// Licensed under the MIT license.
+
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Media;
+using Windows.Foundation.Collections;
+
+namespace Snap.Hutao.Control.Alternating;
+
+[DependencyProperty("ItemAlternateBackground", typeof(Brush))]
+internal sealed partial class AlternatingItemsControl : ItemsControl
+{
+    private readonly VectorChangedEventHandler<object> itemsVectorChangedEventHandler;
+
+    public AlternatingItemsControl()
+    {
+        itemsVectorChangedEventHandler = OnItemsVectorChanged;
+        Items.VectorChanged += itemsVectorChangedEventHandler;
+    }
+
+    private void OnItemsVectorChanged(IObservableVector<object> items, IVectorChangedEventArgs args)
+    {
+        if (args.CollectionChange is CollectionChange.Reset)
+        {
+            int index = (int)args.Index;
+            for (int i = index; i < items.Count; i++)
+            {
+                if (items[i] is IAlternatingItem item)
+                {
+                    item.Background = i % 2 is 0 ? default : ItemAlternateBackground;
+                }
+                else
+                {
+                    break;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/Snap.Hutao/Snap.Hutao/Control/Alternating/IAlternatingItem.cs b/src/Snap.Hutao/Snap.Hutao/Control/Alternating/IAlternatingItem.cs
new file mode 100644
index 00000000..a3336fb1
--- /dev/null
+++ b/src/Snap.Hutao/Snap.Hutao/Control/Alternating/IAlternatingItem.cs
@@ -0,0 +1,11 @@
+// Copyright (c) DGP Studio. All rights reserved.
+// Licensed under the MIT license.
+
+using Microsoft.UI.Xaml.Media;
+
+namespace Snap.Hutao.Control.Alternating;
+
+internal interface IAlternatingItem
+{
+    public Brush? Background { get; set; }
+}
\ No newline at end of file
diff --git a/src/Snap.Hutao/Snap.Hutao/View/Page/AvatarPropertyPage.xaml b/src/Snap.Hutao/Snap.Hutao/View/Page/AvatarPropertyPage.xaml
index 90da4812..470d94ad 100644
--- a/src/Snap.Hutao/Snap.Hutao/View/Page/AvatarPropertyPage.xaml
+++ b/src/Snap.Hutao/Snap.Hutao/View/Page/AvatarPropertyPage.xaml
@@ -11,7 +11,9 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:mxi="using:Microsoft.Xaml.Interactivity"
     xmlns:shc="using:Snap.Hutao.Control"
+    xmlns:shca="using:Snap.Hutao.Control.Alternating"
     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"
@@ -58,7 +60,6 @@
                 GridValue="{x:Bind GridImageExportPanel}"
                 ListValue="{x:Bind ListImageExportPanel}"/>
 
-
         </ResourceDictionary>
     </Page.Resources>
 
@@ -601,52 +602,49 @@
                                             Background="{x:Null}"
                                             Header="{shcm:ResourceString Name=ViewPageAvatarPropertyHeader}">
                                             <Border Background="{ThemeResource CardBackgroundFillColorSecondaryBrush}" CornerRadius="0,0,4,4">
-                                                <ItemsControl Margin="0,0,0,-2" ItemsSource="{Binding SelectedAvatar.Properties}">
-                                                    <ItemsControl.ItemTemplate>
+                                                <shca:AlternatingItemsControl
+                                                    Margin="0,0,0,-2"
+                                                    ItemAlternateBackground="{ThemeResource CardBackgroundFillColorSecondaryBrush}"
+                                                    ItemsSource="{Binding SelectedAvatar.Properties}">
+                                                    <shca:AlternatingItemsControl.ItemTemplate>
                                                         <DataTemplate>
-                                                            <Border Margin="16,8,16,0">
-                                                                <Grid>
-                                                                    <Grid.ColumnDefinitions>
-                                                                        <ColumnDefinition Width="auto"/>
-                                                                        <ColumnDefinition/>
-                                                                        <ColumnDefinition Width="auto"/>
-                                                                        <ColumnDefinition Width="108"/>
-                                                                    </Grid.ColumnDefinitions>
-                                                                    <Grid.RowDefinitions>
-                                                                        <RowDefinition/>
-                                                                        <RowDefinition Height="auto"/>
-                                                                    </Grid.RowDefinitions>
-                                                                    <shci:MonoChrome
-                                                                        Width="16"
-                                                                        Height="16"
-                                                                        Source="{Binding Icon}"/>
-                                                                    <TextBlock
-                                                                        Grid.Row="0"
-                                                                        Grid.Column="1"
-                                                                        Margin="16,0,0,0"
-                                                                        HorizontalAlignment="Left"
-                                                                        Text="{Binding Name}"/>
-                                                                    <TextBlock
-                                                                        Grid.Row="0"
-                                                                        Grid.Column="2"
-                                                                        HorizontalAlignment="Right"
-                                                                        Text="{Binding Value}"/>
-                                                                    <TextBlock
-                                                                        Grid.Row="0"
-                                                                        Grid.Column="3"
-                                                                        Margin="8,0,0,0"
-                                                                        HorizontalAlignment="Left"
-                                                                        Foreground="{StaticResource AvatarPropertyAddValueBrush}"
-                                                                        Text="{Binding AddValue}"/>
-                                                                    <MenuFlyoutSeparator
-                                                                        Grid.Row="1"
-                                                                        Grid.ColumnSpan="4"
-                                                                        Margin="4,8,4,0"/>
-                                                                </Grid>
-                                                            </Border>
+                                                            <Grid Padding="16,8" Background="{Binding Background, Mode=OneWay}">
+                                                                <Grid.ColumnDefinitions>
+                                                                    <ColumnDefinition Width="auto"/>
+                                                                    <ColumnDefinition/>
+                                                                    <ColumnDefinition Width="auto"/>
+                                                                    <ColumnDefinition Width="108"/>
+                                                                </Grid.ColumnDefinitions>
+                                                                <Grid.RowDefinitions>
+                                                                    <RowDefinition/>
+                                                                    <RowDefinition Height="auto"/>
+                                                                </Grid.RowDefinitions>
+                                                                <shci:MonoChrome
+                                                                    Width="16"
+                                                                    Height="16"
+                                                                    Source="{Binding Icon}"/>
+                                                                <TextBlock
+                                                                    Grid.Row="0"
+                                                                    Grid.Column="1"
+                                                                    Margin="16,0,0,0"
+                                                                    HorizontalAlignment="Left"
+                                                                    Text="{Binding Name}"/>
+                                                                <TextBlock
+                                                                    Grid.Row="0"
+                                                                    Grid.Column="2"
+                                                                    HorizontalAlignment="Right"
+                                                                    Text="{Binding Value}"/>
+                                                                <TextBlock
+                                                                    Grid.Row="0"
+                                                                    Grid.Column="3"
+                                                                    Margin="8,0,0,0"
+                                                                    HorizontalAlignment="Left"
+                                                                    Foreground="{StaticResource AvatarPropertyAddValueBrush}"
+                                                                    Text="{Binding AddValue}"/>
+                                                            </Grid>
                                                         </DataTemplate>
-                                                    </ItemsControl.ItemTemplate>
-                                                </ItemsControl>
+                                                    </shca:AlternatingItemsControl.ItemTemplate>
+                                                </shca:AlternatingItemsControl>
                                             </Border>
                                         </Expander>
                                         <!--  圣遗物  -->
diff --git a/src/Snap.Hutao/Snap.Hutao/ViewModel/AvatarProperty/AvatarProperty.cs b/src/Snap.Hutao/Snap.Hutao/ViewModel/AvatarProperty/AvatarProperty.cs
index 83370f98..50661510 100644
--- a/src/Snap.Hutao/Snap.Hutao/ViewModel/AvatarProperty/AvatarProperty.cs
+++ b/src/Snap.Hutao/Snap.Hutao/ViewModel/AvatarProperty/AvatarProperty.cs
@@ -1,6 +1,9 @@
 // Copyright (c) DGP Studio. All rights reserved.
 // Licensed under the MIT license.
 
+using CommunityToolkit.Mvvm.ComponentModel;
+using Microsoft.UI.Xaml.Media;
+using Snap.Hutao.Control.Alternating;
 using Snap.Hutao.Model;
 using Snap.Hutao.Model.Intrinsic;
 using System.Collections.Immutable;
@@ -11,7 +14,7 @@ namespace Snap.Hutao.ViewModel.AvatarProperty;
 /// 角色属性值
 /// </summary>
 [HighQuality]
-internal sealed class AvatarProperty : INameIcon
+internal sealed class AvatarProperty : ObservableObject, INameIcon, IAlternatingItem
 {
     // TODO: use FrozenDictionary
     private static readonly ImmutableDictionary<FightProperty, Uri> PropertyIcons = new Dictionary<FightProperty, Uri>()
@@ -34,6 +37,7 @@ internal sealed class AvatarProperty : INameIcon
         [FightProperty.FIGHT_PROP_PHYSICAL_ADD_HURT] = Web.HutaoEndpoints.StaticFile("Property", "UI_Icon_PhysicalAttackUp.png").ToUri(),
         [FightProperty.FIGHT_PROP_SHIELD_COST_MINUS_RATIO] = Web.HutaoEndpoints.StaticFile("Property", "UI_Icon_ShieldCostMinus.png").ToUri(),
     }.ToImmutableDictionary();
+    private Brush? background;
 
     /// <summary>
     /// 构造一个新的角色属性值
@@ -70,4 +74,6 @@ internal sealed class AvatarProperty : INameIcon
     /// 绿字
     /// </summary>
     public string? AddValue { get; }
+
+    public Brush? Background { get => background; set => SetProperty(ref background, value); }
 }
\ No newline at end of file