Skip to content

[Extensions] AlternateStyle property #768

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Avid29 wants to merge 13 commits into
base: main
Choose a base branch
from
Draft

[Extensions] AlternateStyle property #768

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
2954509
Added item fallback if container is null in ListViewExtensions altern…
Avid29 Dec 19, 2025
da3ce4f
Rewrote without null conditional assignment
Avid29 Dec 19, 2025
f19a5f3
Merge branch 'main' into fix/alt-color
Avid29 Dec 19, 2025
d22466f
Merge branch 'main' into fix/alt-color
Avid29 Dec 19, 2025
5d50708
Fixed unneccesary event subscriptions in ListViewExtensions
Avid29 Dec 20, 2025
07a42d7
Merge branch 'CommunityToolkit:main' into fix/alt-color
Avid29 Dec 20, 2025
f2f45b5
More ListViewExtensions cleanup
Avid29 Dec 22, 2025
cf43149
Merge branch 'fix/alt-color' of https://github.com/Avid29/CommunityTo…
Avid29 Dec 22, 2025
38bed5e
Added AlternateStyle to ListViewExtensions
Avid29 Dec 29, 2025
fe7c8ce
Improved ListViewExtensions alternate color sample
Avid29 Dec 29, 2025
f0c942f
Merge branch 'CommunityToolkit:main' into alt-style
Avid29 Dec 29, 2025
0d23e1f
Fixed property updates for alternate row properties
Avid29 Dec 29, 2025
2298e00
Merge branch 'alt-style' of https://github.com/Avid29/CommunityToolki…
Avid29 Dec 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 23 additions & 11 deletions components/Extensions/samples/ListViewExtensionsAlternateColorSample.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
19 changes: 19 additions & 0 deletions components/Extensions/samples/ListViewExtensionsAlternateColorSample.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
};
}
}
261 changes: 126 additions & 135 deletions components/Extensions/src/ListViewBase/ListViewExtensions.AlternateRows.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Loading
Loading