ListViewExtensions

The ListViewExtensions class provide a lightweight way to extend every control that inherits the ListViewBase class with attached properties. This means that all the extensions in this class can apply to both ListView, GridView and other controls.

Platform APIs: ListViewExtensions, ItemContainerStretchDirection

AlternateColor

The AlternateColor property provides a way to assign a background color to every other item.

Warning

The ContainerContentChanging event used for this extension to work, will not be raised when the ItemsPanel is replaced with another type of panel than ItemsStackPanel or ItemsWrapGrid.

Here is how this property can be used in XAML:

<Page ...
     xmlns:ui="using:Microsoft.Toolkit.Uwp.UI">

<ListView
    ui:ListViewExtensions.AlternateColor="Silver"
    ItemsSource="{x:Bind MainViewModel.Items, Mode=OneWay}" />

AlternateItemTemplate

The AlternateItemTemplate property provides a way to assign an alternate DataTemplate to every other item. It is also possible to combine with the AlternateColor property.

Warning

The ContainerContentChanging event used for this extension to work, will not be raised when the ItemsPanel is replaced with another type of panel than ItemsStackPanel or ItemsWrapGrid.

Here is how this property can be used in XAML:

<Page ...
     xmlns:ui="using:Microsoft.Toolkit.Uwp.UI">

<Page.Resources>
    <DataTemplate x:Name="NormalTemplate">
        <TextBlock Text="{Binding " Foreground="Green"></TextBlock>
    </DataTemplate>
    
    <DataTemplate x:Name="AlternateTemplate">
        <TextBlock Text="{Binding}" Foreground="Orange"></TextBlock>
    </DataTemplate>
</Page.Resources>

<ListView
    ItemTemplate="{StaticResource NormalTemplate}"
    ui:ListViewExtensions.AlternateItemTemplate="{StaticResource AlternateTemplate}"
    ItemsSource="{x:Bind MainViewModel.Items, Mode=OneWay}" />

Command

ListViewExtensions provides extension method that allow attaching an ICommand to handle ListViewBase item interaction by means of ItemClick event.

Important

ListViewBase IsItemClickEnabled must be set to true.

Here is how this property can be used in XAML:

<Page ...
     xmlns:ui="using:Microsoft.Toolkit.Uwp.UI">
     
<ListView
    ui:ListViewExtensions.Command="{x:Bind MainViewModel.ItemSelectedCommand, Mode=OneWay}"
    IsItemClickEnabled="True"
    ItemsSource="{x:Bind MainViewModel.Items, Mode=OneWay}"
    SelectionMode="None" />

StretchItemContainerDirection

The ItemContainerStretchDirection property provides a way to stretch the ItemContainer in horizontal, vertical or both ways. The allowed values are items from the ItemContainerStretchDirection type.

Warning

The ContainerContentChanging event used for this extension to work, will not be raised when the ItemsPanel is replaced with another type of panel than ItemsStackPanel or ItemsWrapGrid.

Here is how this property can be used from XAML:

<Page ...
     xmlns:ui="using:Microsoft.Toolkit.Uwp.UI">

<ListView
    ui:ListViewExtensions.StretchItemContainerDirection="Horizontal"
    ItemsSource="{x:Bind MainViewModel.Items, Mode=OneWay}" />

Examples

You can find more examples in the unit tests.