List Item DataTemplates

Here are the DataTemplates that are commonly found in lists throughout Windows Phone. These are near exact, if not perfect, recreations of the item templates found in various system apps like Messaging, Mail, and the contacts list in the People hub. Both WP8.1 XAML and Silverlight templates are available but keep in mind that the Silverlight templates will never be exactly the same as the system item templates due to the limitations like not having OpticalAlignment properties on TextBlocks. Just copy and paste to use them in your apps and remember to change the bindings to match your data.

TextItemTemplate + TextPaddedItemTemplate

These two text-only item templates can be found in the categories listing in the Store app and favorites list in IE respectively. Although very similar, the TextPaddedItemTemplate provides more vertical spacing between items than the TextItemTemplate.

TextItemTemplate TextPaddedItemTemplate

<DataTemplate x:Key="TextItemTemplate">
    <TextBlock Text="{Binding Line1}"
               Style="{ThemeResource ListViewItemTextBlockStyle}"
               Margin="0,0,0,9.5" />
</DataTemplate>
<DataTemplate x:Key="TextPaddedItemTemplate">
    <TextBlock Text="{Binding Line1}"
               Style="{ThemeResource ListViewItemTextBlockStyle}"
               Margin="0,9.5,0,19" />
</DataTemplate>
<DataTemplate x:Key="TextItemTemplate">
    <TextBlock Text="{Binding Line1}"
               FontSize="37"
               FontFamily="{StaticResource PhoneFontFamilySemiLight}"
               Margin="0,0,0,12" />
</DataTemplate>
<DataTemplate x:Key="TextPaddedItemTemplate">
    <TextBlock Text="{Binding Line1}"
               FontSize="37"
               FontFamily="{StaticResource PhoneFontFamilySemiLight}"
               Margin="0,12,0,24" />
</DataTemplate>

TextSingleDetailTemplate

This template has the large main item content and a subtle single detail text content. The detail content is wrapped to a maximum of two lines if it is too long to fit. This template is used in the Messaging app’s thread list. You can disable the text wrapping if you only want one line for the detail text. This template without text wrapping is used or the Settings app.

TextSingleDetailTemplate

<DataTemplate x:Key="TextSingleDetailTemplate">
    <StackPanel Margin="0,9.5">
        <TextBlock Text="{Binding Line1}"
                   Style="{ThemeResource ListViewItemTextBlockStyle}"
                   TextLineBounds="Tight" />
        <TextBlock Text="{Binding Line2}"
                   Style="{ThemeResource ListViewItemContentTextBlockStyle}"
                   Foreground="{ThemeResource PhoneMidBrush}"
                   OpticalMarginAlignment="TrimSideBearings"
                   TextLineBounds="Tight"
                   TextTrimming="Clip"
                   TextWrapping="Wrap"
                   MaxLines="2"
                   Margin="0,9.5,0,0" />
    </StackPanel>
</DataTemplate>
<DataTemplate x:Key="TextSingleDetailTemplate">
    <StackPanel Margin="0,0,0,12">
        <TextBlock Text="{Binding Line1}"
                   FontSize="37"
                   FontFamily="{StaticResource PhoneFontFamilySemiLight}"
                   Margin="0,0,0,-6" />
        <TextBlock Text="{Binding Line2}"
                   TextWrapping="Wrap"
                   MaxHeight="54" />
    </StackPanel>
</DataTemplate>

TextDoubleDetailTemplate

Similar to the TextSingleDetailTemplate, this is a multiline text template. This has a larger main text content, a heavier weight second line, and finally a subtle third line. In the Mail app, the second line’s foreground color represents whether the mail item is read or not. Feel free to modify the foreground color as you like. Just because I’ve them grayed out or not doesn’t mean you have to stick with that.

TextDoubleDetailTemplate

<DataTemplate x:Key="TextDoubleDetailTemplate">
    <StackPanel Margin="0,9.5">
        <TextBlock Text="{Binding Line1}"
                   Style="{ThemeResource ListViewItemTextBlockStyle}"
                   TextLineBounds="Tight" />
        <TextBlock Text="{Binding Line2}"
                   Style="{ThemeResource ListViewItemContentTextBlockStyle}"
                   OpticalMarginAlignment="TrimSideBearings"
                   TextLineBounds="Tight"
                   FontWeight="SemiBold"
                   TextTrimming="Clip"
                   TextWrapping="Wrap"
                   MaxLines="1"
                   Margin="0,9.5,0,0" />
        <TextBlock Text="{Binding Line3}"
                   Style="{ThemeResource ListViewItemContentTextBlockStyle}"
                   Foreground="{ThemeResource PhoneMidBrush}"
                   OpticalMarginAlignment="TrimSideBearings"
                   TextLineBounds="Tight"
                   TextTrimming="Clip"
                   TextWrapping="Wrap"
                   MaxLines="1" />
    </StackPanel>
</DataTemplate>
<DataTemplate x:Key="TextDoubleDetailTemplate">
    <StackPanel Margin="0,0,0,12">
        <TextBlock Text="{Binding Line1}"
                   FontSize="37"
                   FontFamily="{StaticResource PhoneFontFamilySemiLight}"
                   Margin="0,0,0,-6" />
        <TextBlock Text="{Binding Line2}"
                   FontWeight="SemiBold" />
        <TextBlock Text="{Binding Line3}"
                   Foreground="{StaticResource PhoneSubtleBrush}" />
    </StackPanel>
</DataTemplate>

SmallImageItemTemplate

Often some imagery is included in a list and this template is used in the contacts list in the People hub. It’s simply one square image and a large text. The image is also the exact size as the jumplist headers the OS uses so it’ll look right at home if you use the correct jumplist styles.

SmallImageItemTemplate

<DataTemplate x:Key="SmallImageItemTemplate">
    <Grid Margin="0,0,0,9.5">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Image Source="{Binding Image}"
               Width="49.5"
               Height="49.5" />
        <TextBlock Grid.Column="1"
                   Text="{Binding Line1}"
                   Style="{ThemeResource ListViewItemTextBlockStyle}"
                   TextLineBounds="Tight"
                   VerticalAlignment="Center"
                   Margin="14,0,0,0" />
    </Grid>
</DataTemplate>
<DataTemplate x:Key="SmallImageItemTemplate">
    <Grid Margin="0,0,0,12">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Image Source="{Binding Image}"
               Width="61"
               Height="61" />
        <TextBlock Grid.Column="1"
                   Text="Sam Sample"
                   FontSize="37"
                   FontFamily="{StaticResource PhoneFontFamilySemiLight}"
                   VerticalAlignment="Center"
                   Margin="18,0,0,0" />
    </Grid>
</DataTemplate>

SmallImageDetailTemplate

Same as the SmallImageItemTemplate, this provides an extra line of text for additional details. This template is also similar to the TextSingleDetailTemplate but the second line does not wrap. This template can be found in the speed dial pivot of the Phone app.

SmallImageDetailTemplate

<DataTemplate x:Key="SmallImageDetailTemplate">
    <Grid Margin="0,0,0,9.5">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Image Source="{Binding Image}"
               Width="49.5"
               Height="49.5" />
        <StackPanel Grid.Column="1"
                    VerticalAlignment="Top"
                    Margin="14,0,0,0">
            <TextBlock Text="{Binding Line1}"
                       Style="{ThemeResource ListViewItemTextBlockStyle}"
                       TextLineBounds="Tight" />
            <TextBlock Text="{Binding Line2}"
                       Style="{ThemeResource ListViewItemContentTextBlockStyle}"
                       Foreground="{ThemeResource PhoneMidBrush}"
                       OpticalMarginAlignment="TrimSideBearings"
                       TextLineBounds="Tight"
                       TextTrimming="Clip"
                       TextWrapping="Wrap"
                       MaxLines="1"
                       Margin="0,9.5,0,-9.5" />
        </StackPanel>
    </Grid>
</DataTemplate>
<DataTemplate x:Key="SmallImageDetailTemplate">
    <Grid Margin="0,0,0,12">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Image Source="{Binding Image}"
               Width="61"
               Height="61" />
        <StackPanel Grid.Column="1"
                    VerticalAlignment="Center"
                    Margin="18,0,0,0">
            <TextBlock Text="{Binding Line1}"
                       FontSize="37"
                       FontFamily="{StaticResource PhoneFontFamilySemiLight}"
                       VerticalAlignment="Center"
                       Margin="0,-6" />
            <TextBlock Text="{Binding Line2}"
                       Foreground="{StaticResource PhoneSubtleBrush}" />
        </StackPanel>
    </Grid>
</DataTemplate>

MediumImageItemTemplate

Although this template isn’t based off any lists found in the OS, it’s likely that someone would want a SmallImageItemTemplate with a larger image so its visual assets can be displayed more prominently. While the image size of the SmallImageItemTemplate is more suitable for thumbnails, this template is better for displaying file icons, app tiles, or folder previews. This is similar to the template used in the OneDrive app.

MediumImageItemTemplate

<DataTemplate x:Key="MediumImageItemTemplate">
    <Grid Margin="0,0,0,9.5">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Image Source="{Binding Image}"
               Width="79"
               Height="79" />
        <TextBlock Grid.Column="1"
                   Text="{Binding Line1}"
                   Style="{ThemeResource ListViewItemTextBlockStyle}"
                   TextLineBounds="Tight"
                   VerticalAlignment="Center"
                   Margin="14,0,0,0" />
    </Grid>
</DataTemplate>
<DataTemplate x:Key="MediumImageItemTemplate">
    <Grid Margin="0,0,0,12">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Image Source="{Binding Image}"
               Width="98"
               Height="98" />
        <TextBlock Grid.Column="1"
                   Text="{Binding Line1}"
                   FontSize="37"
                   FontFamily="{StaticResource PhoneFontFamilySemiLight}"
                   VerticalAlignment="Center"
                   Margin="18,0,0,0" />
    </Grid>
</DataTemplate>

MediumImageDetailTemplate

This template is composed of a medium image, a large main item text, and two smaller subtle text in different weights. The texts do not wrap in this template. Feel free to change the color from the subtle colors to whatever you want. The way it looks now is solely based on the app listing in the Store app.

MediumImageDetailTemplate

<DataTemplate x:Key="MediumImageDetailTemplate">
    <Grid Margin="0,0,0,9.5">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Image Source="{Binding Image}"
               Width="79"
               Height="79" />
        <StackPanel Grid.Column="1"
                    Margin="14,0,0,0">
            <TextBlock Text="{Binding Line1}"
                       Style="{ThemeResource ListViewItemTextBlockStyle}"
                       TextLineBounds="Tight" />
            <TextBlock Text="{Binding Line2}"
                       Style="{ThemeResource ListViewItemContentTextBlockStyle}"
                       Foreground="{ThemeResource PhoneMidBrush}"
                       OpticalMarginAlignment="TrimSideBearings"
                       TextLineBounds="Tight"
                       FontWeight="SemiBold"
                       TextTrimming="Clip"
                       TextWrapping="Wrap"
                       MaxLines="1"
                       Margin="0,9.5,0,0" />
            <TextBlock Text="{Binding Line3}"
                       Style="{ThemeResource ListViewItemContentTextBlockStyle}"
                       Foreground="{ThemeResource PhoneMidBrush}"
                       OpticalMarginAlignment="TrimSideBearings"
                       TextLineBounds="Tight"
                       TextTrimming="Clip"
                       TextWrapping="Wrap"
                       MaxLines="1" />
        </StackPanel>
    </Grid>
</DataTemplate>
<DataTemplate x:Key="MediumImageDetailTemplate">
    <Grid Margin="0,0,0,12">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Image Source="{Binding Image}"
               Width="98"
               Height="98" />
        <StackPanel Grid.Column="1"
                    Margin="18,0,0,0">
            <TextBlock Text="{Binding Line1}"
                       FontSize="37"
                       FontFamily="{StaticResource PhoneFontFamilySemiLight}"
                       Margin="0,-12,0,-6" />
            <TextBlock Text="{Binding Line2}"
                       Foreground="{StaticResource PhoneSubtleBrush}"
                       FontWeight="SemiBold"
                       Margin="0,0,0,0" />
            <TextBlock Text="{Binding Line3}"
                       Foreground="{StaticResource PhoneSubtleBrush}" />
        </StackPanel>
    </Grid>
</DataTemplate>
Advertisements

One thought on “List Item DataTemplates

  1. I tweaked the text-only templates a little to make them match the OS exactly (https://gist.github.com/Kinnara/04689b68ebad6630ed2f), with the help of a trick I just discovered. Here are the steps:

    1. Enable “Narrator quick launch” in “ease of access” settings;
    2. Press and hold Volume Up (F9) and then press Start (F2) to turn the Narrator on;
    3. Tap a list item or any other visual element, and its bounding box shows! We can take a screenshot;
    4. Use F9 + F2 to turn the Narrator off.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s