Conditional Formatting of Items in an Items Control

When developing XAML based applications for Windows Store and Windows Phone we encounter situations when we are binding data with an ItemsControl and the data template needs to show data that is not the same for all the items. ListView, GridView, FlipView and ListBox are most the common ItemsControl to which this discussion is applicable.

Here in this article I will try to explain broadly two options.

1. Item Template Selector

This is the most common and obvious solution where you can define as many data templates as necessary in Resources and then implement.

This is typically how you would implement an Item Template Selector.

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace SampleApp
{
    public class SampleTemplateSelector : DataTemplateSelector
    {
        public DataTemplate FormatOne { get; set; }
        public DataTemplate FormatTwo { get; set; }
        public DataTemplate Default { get; set; }

        protected override DataTemplate SelectTemplateCore(object item)
        {
            DataTemplate selectedTemplate = null;

            if (item != null && item is NewsItemViewModel)
            {
                NewsItemViewModel data = item as NewsItemViewModel;

                if (data.ConditionForFormatOne)
                {
                    selectedTemplate = FormatOne != null ? FormatOne : Default;
                }
                else if (data.ConditionForFormatTwo)
                {
                    selectedTemplate = FormatTwo != null ? FormatTwo : Default;
                }
                else
                {
                    selectedTemplate = Default;
                }
            }

            return selectedTemplate;
        }
    }
}

To consume this in a page we need to define an appropriate number of data templates and then use them in our selector. Here is how you would do it.

<Page
    x:Name="pageRoot"
    x:Class="SampleApp.HomePage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SampleApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.DataContext>
        <local:SampleViewModel/>
    </Page.DataContext>
    <Page.Resources>
        <DataTemplate x:Key="DefaultTemplate">
            <StackPanel Background="#FF222222" Height="250" Width="250">
                <TextBlock Text="{Binding Name}" Style="{StaticResource TitleTextBlockStyle}" Padding="5" Margin="0"/>
                <TextBlock Text="{Binding Description}" Style="{StaticResource BodyTextBlockStyle}" Padding="5" Margin="0"/>
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Key="FormatOneTemplate">
            <Grid Background="#FF999999" Height="250" Width="250">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Image Source="{Binding Image}" Stretch="UniformToFill" Grid.RowSpan="2"/>
                <TextBlock Text="{Binding Name}" Style="{StaticResource BodyTextBlockStyle}" Grid.Row="1" Padding="5" Margin="0"/>
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="FormatTwoTemplate">
            <Grid Background="Black" Height="250" Width="250">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Image Source="{Binding Image}" Stretch="UniformToFill" Grid.RowSpan="2"/>
                <HyperlinkButton NavigateUri="{Binding Uri}" Content="{Binding Name}" Grid.Row="1" Padding="5" Margin="0"/>
            </Grid>
        </DataTemplate>
        <local:SampleTemplateSelector x:Key="SampleTemplateSelector"
                                      Default="{StaticResource DefaultTemplate}"
                                      FormatOne="{StaticResource FormatOneTemplate}"
                                      FormatTwo="{StaticResource FormatTwoTemplate}"/>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="120"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
                        Style="{StaticResource NavigationBackButtonNormalStyle}"
                        VerticalAlignment="Top"
                        AutomationProperties.Name="Back"
                        AutomationProperties.AutomationId="BackButton"
                        AutomationProperties.ItemType="Navigation Button"/>
            <TextBlock x:Name="pageTitle" Text="Sample App" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1"
                        IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/>
        </Grid>

        <GridView Margin="120,0,0,0" ItemTemplateSelector="{StaticResource SampleTemplateSelector}"
                  ItemsSource="{Binding NewsFeed}" Grid.Row="1"/>

    </Grid>
</Page>

Pros: 

1. This is the most obvious solution.
   
   
2. It is a clean implementation since all the templates can be defined separately.

Cons:

1. Item Template Selector is fired only once when your control was initially created, any subsequent change that would result in a different template will not be effective until all your ItemsControl is rendered again.

2. Value Converter

A Value Converter is primarily used to change values when displaying stuff on the screen but they are also handy in this type of situation. In this approach we mostly deal with Visibility via Boolean to Visibility or its negation and so on.

Refer to following XAML that will produce the same output as before (if the data does not change at runtime).

<Page
    x:Name="pageRoot"
    x:Class="SampleApp.HomePage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SampleApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.DataContext>
        <local:SampleViewModel/>
    </Page.DataContext>
    <Page.Resources>
        <local:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
        <DataTemplate x:Key="SingleTemplate">
            <Grid Height="250" Width="250">
                <StackPanel Background="#FF222222"
                            Visibility="{Binding ConditionForDefault, Converter={StaticResource BooleanToVisibilityConverter}}">
                    <TextBlock Text="{Binding Name}" Style="{StaticResource TitleTextBlockStyle}" Padding="5" Margin="0"/>
                    <TextBlock Text="{Binding Description}" Style="{StaticResource BodyTextBlockStyle}" Padding="5" Margin="0"/>
                </StackPanel>
                <Grid Background="#FF999999"
                      Visibility="{Binding ConditionForFormatOne, Converter={StaticResource BooleanToVisibilityConverter}}">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Image Source="{Binding Image}" Stretch="UniformToFill" Grid.RowSpan="2"/>
                    <TextBlock Text="{Binding Name}" Style="{StaticResource BodyTextBlockStyle}" Grid.Row="1" Padding="5" Margin="0"/>
                </Grid>
                <Grid Background="Black"
                      Visibility="{Binding ConditionForFormatTwo, Converter={StaticResource BooleanToVisibilityConverter}}">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Image Source="{Binding Image}" Stretch="UniformToFill" Grid.RowSpan="2"/>
                    <HyperlinkButton NavigateUri="{Binding Uri}" Content="{Binding Name}" Grid.Row="1" Padding="5" Margin="0"/>
                </Grid>
            </Grid>
        </DataTemplate>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="120"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
                        Style="{StaticResource NavigationBackButtonNormalStyle}"
                        VerticalAlignment="Top"
                        AutomationProperties.Name="Back"
                        AutomationProperties.AutomationId="BackButton"
                        AutomationProperties.ItemType="Navigation Button"/>
            <TextBlock x:Name="pageTitle" Text="Sample App" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1"
                        IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/>
        </Grid>

        <GridView Margin="120,0,0,0" ItemTemplate="{StaticResource SingleTemplate}"
                  ItemsSource="{Binding NewsFeed}" Grid.Row="1"/>

    </Grid>
</Page>

Pros: 

1. It responds to changes in data values.
   
2. It follows a very simple fundamental process of showing and hiding elements on the screen that most people use in most cases outside of Grid/List Views.

Cons:

1. In this approach there are actually many elements in the Visual Tree, just simply hidden and that, in some cases, can be a concern.