Windows StoreApp XAML: Changing ItemTemplate in GridView based on Data type

Question

I am working on developing Windows Store App using C#/XAML. I have experience primarily in iOS and to some extent Android app development, but not yet comfortable with C#/XAML world.

Here is my issue in GridView based page (Based on the nice template VS2012 generates).

I have a gridview and its collection is bound to a data retrieved from network and it works fine. But I want to change the grid item depending on the data. For example: I have files and folders that I would like to show using different grid view items.

My Question: How would I use a different DataTemplate for the ItemTemplate depending on the data? For example, for "Folders", I will have only one textblock which is vertically centered and for File, I will have the 2 textblocks and visually different.

Am I going the right path or should I be doing completely different?

The XAML Portion is

<GridView
            x:Name="itemGridView"
            AutomationProperties.AutomationId="ItemGridView"
            AutomationProperties.Name="Grouped Items"
            Grid.RowSpan="3"
            Padding="116,137,40,46"
            ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
            ItemTemplate="{StaticResource FileEntriesTemplate}"
            ItemClick="ItemView_ItemClick"
            IsItemClickEnabled="True"
            SelectionMode="None"
            IsSwipeEnabled="false">

The Template is

<DataTemplate x:Key="FileEntriesTemplate">
<Grid HorizontalAlignment="Left" Width="400" Height="80" Background="Beige">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="80"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Image Source="{Binding Image}" Stretch="Uniform" Grid.Column="0" Margin="10,0,0,0" AutomationProperties.Name="{Binding Title}"/>

    <StackPanel Orientation="Vertical" Grid.Column="1" Background="Transparent">
        <TextBlock Text="{Binding Title}" Foreground="Black" Style="{StaticResource LargeTitleTextStyle}" Margin="20,20,10,0"/>
        <TextBlock Text="{Binding Subtitle}" Foreground="gray" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="20,10,0,30"/>
    </StackPanel>
</Grid>

Nigel Sampson Nigel Sampson · Accepted Answer · 2013-07-15T20:55:29

GridView exposes this through the ItemTemplateSelector property which is a class you can create that inherits from DataTemplateSelector. An example would be that I have a GridView that has Issues and Repositories bound to it and want to use different data templates for each.

My data template selector looks like:

public class IssueSummaryTemplateSelector : DataTemplateSelector
{
    protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
    {
        return item is IssueGroupViewModel ? IssueTemplate : RepositoryTemplate;
    }

    public DataTemplate RepositoryTemplate
    {
        get;
        set;
    }

    public DataTemplate IssueTemplate
    {
        get;
        set;
    }
}

I then declare the selector as a Resource in xaml assigning the two templates I want to use for Repository and Issues.

<selectors:IssueSummaryTemplateSelector x:Key="IssueSummarySelector"
                                        IssueTemplate="{StaticResource IssueGridZoomedOutTemplate}"
                                        RepositoryTemplate="{StaticResource IssueGridRepositoryZoomedOutTemplate}"/>

You can then use it on your GridView.

<GridView ItemTemplateSelector="{StaticResource IssueSummarySelector}" />

Windows StoreApp XAML: Changing ItemTemplate in GridView based on Data type

1 Answers