[Extensions] AlternateStyle property

components/Extensions/samples/ListViewExtensionsAlternateColorSample.xaml

@@ -1,21 +1,33 @@
 <Page x:Class="ExtensionsExperiment.Samples.ListViewExtensionsAlternateColorSample"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:local="using:ExtensionsExperiment.Samples"
       xmlns:ui="using:CommunityToolkit.WinUI"
       Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
-    <ListView ui:ListViewExtensions.AlternateColor="Silver">
+    <ListView ui:ListViewExtensions.AlternateColor="Blue">
+        <ui:ListViewExtensions.AlternateStyle>
+            <Style TargetType="ListViewItem">
+                <Setter Property="MinHeight" Value="30" />
+            </Style>
+        </ui:ListViewExtensions.AlternateStyle>
+        <ui:ListViewExtensions.AlternateItemTemplate>
+            <DataTemplate x:DataType="x:Int32">
+                <TextBlock Text="{x:Bind local:ListViewExtensionsAlternateColorSample.NaiveHumanize((x:Int32))}" />
+            </DataTemplate>
+        </ui:ListViewExtensions.AlternateItemTemplate>
         <ListView.Items>
-            <x:String>One</x:String>
-            <x:String>Two</x:String>
-            <x:String>Three</x:String>
-            <x:String>Four</x:String>
-            <x:String>Five</x:String>
-            <x:String>Six</x:String>
-            <x:String>Seven</x:String>
-            <x:String>Eight</x:String>
-            <x:String>Nine</x:String>
-            <x:String>Ten</x:String>
+            <x:Int32>0</x:Int32>
+            <x:Int32>1</x:Int32>
+            <x:Int32>2</x:Int32>
+            <x:Int32>3</x:Int32>
+            <x:Int32>4</x:Int32>
+            <x:Int32>5</x:Int32>
+            <x:Int32>6</x:Int32>
+            <x:Int32>7</x:Int32>
+            <x:Int32>8</x:Int32>
+            <x:Int32>9</x:Int32>
+            <x:Int32>10</x:Int32>
         </ListView.Items>
     </ListView>
 </Page>

components/Extensions/samples/ListViewExtensionsAlternateColorSample.xaml.cs

@@ -14,4 +14,23 @@ public ListViewExtensionsAlternateColorSample()
     {
         this.InitializeComponent();
     }
+
+    public static string NaiveHumanize(int num)
+    {
+        return num switch
+        {
+            0 => "zero",
+            1 => "one",
+            2 => "two",
+            3 => "three",
+            4 => "four",
+            5 => "five",
+            6 => "six",
+            7 => "seven",
+            8 => "eight",
+            9 => "nine",
+            10 => "ten",
+            _ => num.ToString(),
+        };
+    }
 }

components/Extensions/src/ListViewBase/ListViewExtensions.AlternateRows.cs

@@ -10,202 +10,193 @@ namespace CommunityToolkit.WinUI;
 /// </summary>
 public static partial class ListViewExtensions
 {
-    private static Dictionary<IObservableVector<object>, ListViewBase> _itemsForList = new Dictionary<IObservableVector<object>, ListViewBase>();
+    private static readonly Dictionary<IObservableVector<object>, ListViewBase> _trackedListViews = [];
 
     /// <summary>
     /// Attached <see cref="DependencyProperty"/> for binding a <see cref="Brush"/> as an alternate background color to a <see cref="ListViewBase"/>
     /// </summary>
-    public static readonly DependencyProperty AlternateColorProperty = DependencyProperty.RegisterAttached("AlternateColor", typeof(Brush), typeof(ListViewExtensions), new PropertyMetadata(null, OnAlternateColorPropertyChanged));
+    public static readonly DependencyProperty AlternateColorProperty =
+        DependencyProperty.RegisterAttached("AlternateColor", typeof(Brush), typeof(ListViewExtensions),
+            new PropertyMetadata(null, OnAlternateRowPropertyChanged));
+
+    /// <summary>
+    /// Attached <see cref="DependencyProperty"/> for binding a <see cref="Style"/> as an alternate style to a <see cref="ListViewBase"/>
+    /// </summary>
+    public static readonly DependencyProperty AlternateStyleProperty =
+        DependencyProperty.RegisterAttached("AlternateStyle", typeof(Style), typeof(ListViewExtensions),
+            new PropertyMetadata(null, OnAlternateRowPropertyChanged));
 
     /// <summary>
     /// Attached <see cref="DependencyProperty"/> for binding a <see cref="DataTemplate"/> as an alternate template to a <see cref="ListViewBase"/>
     /// </summary>
-    public static readonly DependencyProperty AlternateItemTemplateProperty = DependencyProperty.RegisterAttached("AlternateItemTemplate", typeof(DataTemplate), typeof(ListViewExtensions), new PropertyMetadata(null, OnAlternateItemTemplatePropertyChanged));
+    public static readonly DependencyProperty AlternateItemTemplateProperty =
+        DependencyProperty.RegisterAttached("AlternateItemTemplate", typeof(DataTemplate), typeof(ListViewExtensions),
+            new PropertyMetadata(null, OnAlternateRowPropertyChanged));
 
     /// <summary>
     /// Gets the alternate <see cref="Brush"/> associated with the specified <see cref="ListViewBase"/>
     /// </summary>
     /// <param name="obj">The <see cref="ListViewBase"/> to get the associated <see cref="Brush"/> from</param>
     /// <returns>The <see cref="Brush"/> associated with the <see cref="ListViewBase"/></returns>
-    public static Brush GetAlternateColor(ListViewBase obj)
-    {
-        return (Brush)obj.GetValue(AlternateColorProperty);
-    }
+    public static Brush? GetAlternateColor(ListViewBase obj) => (Brush?)obj.GetValue(AlternateColorProperty);
 
     /// <summary>
     /// Sets the alternate <see cref="Brush"/> associated with the specified <see cref="DependencyObject"/>
     /// </summary>
     /// <param name="obj">The <see cref="ListViewBase"/> to associate the <see cref="Brush"/> with</param>
     /// <param name="value">The <see cref="Brush"/> for binding to the <see cref="ListViewBase"/></param>
-    public static void SetAlternateColor(ListViewBase obj, Brush value)
-    {
-        obj.SetValue(AlternateColorProperty, value);
-    }
+    public static void SetAlternateColor(ListViewBase obj, Brush? value) => obj.SetValue(AlternateColorProperty, value);
+
+    /// <summary>
+    /// Gets the alternate <see cref="Style"/> associated with the specified <see cref="ListViewBase"/>
+    /// </summary>
+    /// <param name="obj">The <see cref="ListViewBase"/> to get the associated <see cref="Style"/> from</param>
+    /// <returns>The <see cref="Style"/> associated with the <see cref="ListViewBase"/></returns>
+    public static Style? GetAlternateStyle(ListViewBase obj) => (Style?)obj.GetValue(AlternateStyleProperty);
+
+    /// <summary>
+    /// Sets the alternate <see cref="Style"/> associated with the specified <see cref="DependencyObject"/>
+    /// </summary>
+    /// <param name="obj">The <see cref="ListViewBase"/> to associate the <see cref="Style"/> with</param>
+    /// <param name="value">The <see cref="Style"/> for binding to the <see cref="ListViewBase"/></param>
+    public static void SetAlternateStyle(ListViewBase obj, Style? value) => obj.SetValue(AlternateStyleProperty, value);
 
     /// <summary>
     /// Gets the <see cref="DataTemplate"/> associated with the specified <see cref="ListViewBase"/>
     /// </summary>
     /// <param name="obj">The <see cref="ListViewBase"/> to get the associated <see cref="DataTemplate"/> from</param>
     /// <returns>The <see cref="DataTemplate"/> associated with the <see cref="ListViewBase"/></returns>
-    public static DataTemplate GetAlternateItemTemplate(ListViewBase obj)
-    {
-        return (DataTemplate)obj.GetValue(AlternateItemTemplateProperty);
-    }
+    public static DataTemplate? GetAlternateItemTemplate(ListViewBase obj) => (DataTemplate?)obj.GetValue(AlternateItemTemplateProperty);
 
     /// <summary>
     /// Sets the <see cref="DataTemplate"/> associated with the specified <see cref="ListViewBase"/>
     /// </summary>
     /// <param name="obj">The <see cref="ListViewBase"/> to associate the <see cref="DataTemplate"/> with</param>
     /// <param name="value">The <see cref="DataTemplate"/> for binding to the <see cref="ListViewBase"/></param>
-    public static void SetAlternateItemTemplate(ListViewBase obj, DataTemplate value)
-    {
-        obj.SetValue(AlternateItemTemplateProperty, value);
-    }
+    public static void SetAlternateItemTemplate(ListViewBase obj, DataTemplate? value) => obj.SetValue(AlternateItemTemplateProperty, value);
 
-    private static void OnAlternateColorPropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)
+    private static void OnAlternateRowPropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)
     {
-        if (sender is ListViewBase listViewBase)
-        {
-            listViewBase.ContainerContentChanging -= ColorContainerContentChanging;
-            listViewBase.Items.VectorChanged -= ColorItemsVectorChanged;
-            listViewBase.Unloaded -= OnListViewBaseUnloaded;
-
-            _itemsForList[listViewBase.Items] = listViewBase;
-            if (AlternateColorProperty != null)
-            {
-                listViewBase.ContainerContentChanging += ColorContainerContentChanging;
-                listViewBase.Items.VectorChanged += ColorItemsVectorChanged;
-                listViewBase.Unloaded += OnListViewBaseUnloaded;
-            }
-        }
-    }
+        if (sender is not ListViewBase listViewBase)
+            return;
 
-    private static void ColorContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs args)
-    {
-        var itemContainer = args.ItemContainer as Control;
-        SetItemContainerBackground(sender, itemContainer, args.ItemIndex);
-    }
+        // Cleanup existing subscriptions
+        listViewBase.ContainerContentChanging -= OnContainerContentChanging;
+        listViewBase.Items.VectorChanged -= OnItemsVectorChanged;
+        listViewBase.Unloaded -= OnListViewBaseUnloaded_AltRow;
 
-    private static void OnAlternateItemTemplatePropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)
-    {
-        if (sender is ListViewBase listViewBase)
+        _trackedListViews[listViewBase.Items] = listViewBase;
+
+        // Resubscribe to events as necessary
+        var altColor = GetAlternateColor(listViewBase);
+        var altStyle = GetAlternateStyle(listViewBase);
+        var altTemplate = GetAlternateItemTemplate(listViewBase);
+
+        // If any of the properties are set, subscribe to the necessary events
+        if ((altColor ?? altStyle ?? (object?)altTemplate) is not null)
         {
-            listViewBase.ContainerContentChanging -= ItemTemplateContainerContentChanging;
-            listViewBase.Unloaded -= OnListViewBaseUnloaded;
-
-            if (AlternateItemTemplateProperty != null)
-            {
-                listViewBase.ContainerContentChanging += ItemTemplateContainerContentChanging;
-                listViewBase.Unloaded += OnListViewBaseUnloaded;
-            }
+            listViewBase.ContainerContentChanging += OnContainerContentChanging;
+            listViewBase.Items.VectorChanged += OnItemsVectorChanged;
+            listViewBase.Unloaded += OnListViewBaseUnloaded_AltRow;
         }
+
+        // Update all items to apply the new property
+        UpdateItems(listViewBase);
     }
 
-    private static void ItemTemplateContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs args)
+    private static void OnContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs args) => UpdateItem(sender, args.ItemIndex);
+
+    private static void OnItemsVectorChanged(IObservableVector<object> sender, IVectorChangedEventArgs args)
     {
-        if (args.ItemIndex % 2 == 0)
-        {
-            args.ItemContainer.ContentTemplate = GetAlternateItemTemplate(sender);
-        }
-        else
-        {
-            args.ItemContainer.ContentTemplate = sender.ItemTemplate;
-        }
+        // If the index is at the end, no other items were affected
+        // and there's no action to take
+        if (args.Index == (sender.Count - 1))
+            return;
+
+        // This function is for updating indirectly affected items
+        // Therefore we only need to handle items inserted and removed where every
+        // item beneath would potentially change if they are even or odd.
+        if (args.CollectionChange is not (CollectionChange.ItemInserted or CollectionChange.ItemRemoved))
+            return;
+
+        // Attempt to get the list view for the affected items
+        _trackedListViews.TryGetValue(sender, out ListViewBase? listViewBase);
+        if (listViewBase is null)
+            return;
+
+        // Update all items from the affected index and below
+        UpdateItems(listViewBase, (int)args.Index);
     }
 
-    private static void OnItemContainerStretchDirectionPropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)
+    private static void UpdateItems(ListViewBase listViewBase, int startingIndex = 0)
     {
-        if (sender is ListViewBase listViewBase)
-        {
-            listViewBase.ContainerContentChanging -= ItemContainerStretchDirectionChanging;
-            listViewBase.Unloaded -= OnListViewBaseUnloaded;
-
-            if (ItemContainerStretchDirectionProperty != null)
-            {
-                listViewBase.ContainerContentChanging += ItemContainerStretchDirectionChanging;
-                listViewBase.Unloaded += OnListViewBaseUnloaded;
-            }
-        }
+        for (int i = startingIndex; i < listViewBase.Items.Count; i++)
+            UpdateItem(listViewBase, i);
     }
 
-    private static void ItemContainerStretchDirectionChanging(ListViewBase sender, ContainerContentChangingEventArgs args)
+    private static void UpdateItem(ListViewBase listViewBase, int itemIndex)
     {
-        var stretchDirection = GetItemContainerStretchDirection(sender);
+        // Get the item as a control
+        var control = listViewBase.ContainerFromIndex(itemIndex) as Control;
+        control ??= listViewBase.Items[itemIndex] as Control;
 
-        if (stretchDirection == ItemContainerStretchDirection.Vertical || stretchDirection == ItemContainerStretchDirection.Both)
-        {
-            args.ItemContainer.VerticalContentAlignment = VerticalAlignment.Stretch;
-        }
+        // If the item is not a control, there's nothing to be done
+        if (control is null)
+            return;
 
-        if (stretchDirection == ItemContainerStretchDirection.Horizontal || stretchDirection == ItemContainerStretchDirection.Both)
+        // Get the item as a container. This may be null if the item is not in a container.
+        var container = control as SelectorItem;
+
+        // Get the base properties
+        // The base color cannot be retrieved, and therefore cannot be unapplied.
+        // NOTE: This is a huge design limitation, and one reason I believe
+        // AlternateColor should be replaced entirely with AlternateStyle.
+        var baseStyle = listViewBase.ItemContainerStyle;
+        var baseTemplate = listViewBase.ItemTemplate;
+
+        // Get all the alternate properties. 
+        var altColor = GetAlternateColor(listViewBase);
+        var altStyle = GetAlternateStyle(listViewBase);
+        var altTemplate = GetAlternateItemTemplate(listViewBase);
+
+        // Determine the realized properties based on the item index and
+        // whether or not alternate properties are set.
+        bool altRow = itemIndex % 2 == 0;
+        var realizedColor = (altRow ? altColor : null) ?? null;
+        var realizedStyle = (altRow ? altStyle : baseStyle) ?? baseStyle;
+        var realizedTemplate = (altRow ? altTemplate : baseTemplate) ?? baseTemplate;
+
+        // Apply the realized properties
+        SetRowBackground(listViewBase, control, realizedColor);
+        control.Style = realizedStyle;
+        if (container is not null)
         {
-            args.ItemContainer.HorizontalContentAlignment = HorizontalAlignment.Stretch;
+            container.ContentTemplate = realizedTemplate;
         }
     }
 
-    private static void OnListViewBaseUnloaded(object sender, RoutedEventArgs e)
+    private static void SetRowBackground(ListViewBase sender, Control itemContainer, Brush? brush)
     {
-        if (sender is ListViewBase listViewBase)
-        {
-            _itemsForList.Remove(listViewBase.Items);
+        var rootBorder = itemContainer.FindDescendant<Border>();
 
-            listViewBase.ContainerContentChanging -= ItemContainerStretchDirectionChanging;
-            listViewBase.ContainerContentChanging -= ItemTemplateContainerContentChanging;
-            listViewBase.ContainerContentChanging -= ColorContainerContentChanging;
-            listViewBase.Items.VectorChanged -= ColorItemsVectorChanged;
-            listViewBase.Unloaded -= OnListViewBaseUnloaded;
+        itemContainer.Background = brush;
+        if (rootBorder is not null)
+        {
+            rootBorder.Background = brush;
         }
     }
 
-    private static void ColorItemsVectorChanged(IObservableVector<object> sender, IVectorChangedEventArgs args)
+    private static void OnListViewBaseUnloaded_AltRow(object sender, RoutedEventArgs e)
     {
-        // If the index is at the end we can ignore
-        if (args.Index == (sender.Count - 1))
-        {
+        if (sender is not ListViewBase listViewBase)
             return;
-        }
 
-        // Only need to handle Inserted and Removed because we'll handle everything else in the
-        // ColorContainerContentChanging method
-        if ((args.CollectionChange == CollectionChange.ItemInserted) || (args.CollectionChange == CollectionChange.ItemRemoved))
-        {
-            _itemsForList.TryGetValue(sender, out ListViewBase? listViewBase);
-            if (listViewBase == null)
-            {
-                return;
-            }
-
-            int index = (int)args.Index;
-            for (int i = index; i < sender.Count; i++)
-            {
-                var itemContainer = listViewBase.ContainerFromIndex(i) as Control;
-                if (itemContainer != null)
-                {
-                    SetItemContainerBackground(listViewBase, itemContainer, i);
-                }
-            }
-        }
-    }
+        // Untrack the list view
+        _trackedListViews.Remove(listViewBase.Items);
 
-    private static void SetItemContainerBackground(ListViewBase sender, Control itemContainer, int itemIndex)
-    {
-        if (itemIndex % 2 == 0)
-        {
-            itemContainer.Background = GetAlternateColor(sender);
-            var rootBorder = itemContainer.FindDescendant<Border>();
-            if (rootBorder != null)
-            {
-                rootBorder.Background = GetAlternateColor(sender);
-            }
-        }
-        else
-        {
-            itemContainer.Background = null;
-            var rootBorder = itemContainer.FindDescendant<Border>();
-            if (rootBorder != null)
-            {
-                rootBorder.Background = null;
-            }
-        }
+        // Unsubscribe from events
+        listViewBase.ContainerContentChanging -= OnContainerContentChanging;
+        listViewBase.Items.VectorChanged -= OnItemsVectorChanged;
+        listViewBase.Unloaded -= OnListViewBaseUnloaded_AltRow;
     }
 }