Wpf

Using the AlternationIndex with a HeaderedItemsControl in XAML

DemoHeaderedItemsControlHeader

Today, I want to show you a very easy thing that you can use in your WPF applications. It’s so easy that I always forgot the syntax to do it… How to alternate the background color in a HeaderedItemsControl using only XAML code.

Let’s start to create the HeaderedItemsControl that will host a basic list of strings.

<HeaderedItemsControl ItemsSource="{Binding Items, ElementName=Window}">

    <HeaderedItemsControl.Header>
        <TextBlock Text="MESSAGE"
                   Margin="5,0" />
    </HeaderedItemsControl.Header>

    <HeaderedItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid x:Name="Grid">
                <TextBlock Text="{Binding}"
                           Margin="10" />
            </Grid>
        </DataTemplate>
    </HeaderedItemsControl.ItemTemplate>

    <HeaderedItemsControl.Template>
        <ControlTemplate TargetType="{x:Type HeaderedItemsControl}">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>

                <Border Grid.Row="0"
                        BorderThickness="0,0,0,2"
                        BorderBrush="#FF535353" />

                <ContentPresenter Grid.Row="0"
                                  Margin="0,0,0,5"
                                  ContentSource="Header"
                                  HorizontalAlignment="Stretch" />

                <ItemsPresenter Grid.Row="1"
                                HorizontalAlignment="Stretch" />
            </Grid>
        </ControlTemplate>
    </HeaderedItemsControl.Template>

</HeaderedItemsControl>

This is the result of this very basic window:

DemoHeaderedItemsControlbasic

Now, in order to add the alternate background, we need to add the attribute AlternationCount to the HeaderedItemsControl. The value has to be the number of different index you need, in our example I’ll simply use two different backgrounds.

<HeaderedItemsControl AlternationCount="2"
                      ItemsSource="{Binding Items, ElementName=Window}">

Then, in order to change the background color of each row, I’ll use the triggers of the ItemTemplate to apply the new color to the Grid.

<HeaderedItemsControl.ItemTemplate>
    <DataTemplate>

        <Grid x:Name="Grid">
            <TextBlock Text="{Binding}"
                       Margin="10" />
        </Grid>

        <DataTemplate.Triggers>
            <Trigger Property="ItemsControl.AlternationIndex"
                     Value="0">
                <Setter Property="Background"
                        Value="White"
                        TargetName="Grid" />
            </Trigger>
            <Trigger Property="ItemsControl.AlternationIndex"
                     Value="1">
                <Setter Property="Background"
                        Value="#FFF1F1F1"
                        TargetName="Grid" />
            </Trigger>
        </DataTemplate.Triggers>

    </DataTemplate>
</HeaderedItemsControl.ItemTemplate>

And the result is:

DemoHeaderedItemsControl

Continue reading