Question

I’m following this tutorial, but I’m faced with a weird problem. There’s a part that says:

In SplitPage.xaml, we also update the ItemTemplate property in itemListView to use our DefaultListItemTemplate resource instead of Standard130ItemTemplate, which is the default template. Here’s the updated XAML for itemListView.

However, no matter what I do, it displays the list with the default template, which looks like this. Here’s my code:

<DataTemplate x:Key="DefaultListItemTemplate">
    <Grid HorizontalAlignment="Stretch" Width="Auto" Height="110" Margin="10,10,10,0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <!-- Green date block -->
        <Border Background="{StaticResource BlockBackgroundBrush}" Width="110" Height="110" />
        <ContentControl Template="{StaticResource DateBlockTemplate}" />
        <StackPanel Grid.Column="1"  HorizontalAlignment="Left" Margin="12,8,0,0">
            <TextBlock Text="{Binding Title}" FontSize="26.667" TextWrapping="Wrap"
                   MaxHeight="72" Foreground="#FFFE5815" />
            <TextBlock Text="{Binding Author}" FontSize="18.667" />
        </StackPanel>
    </Grid>
</DataTemplate>

…in Page.Resources, and

<ListView
    x:Name="itemListView"
    AutomationProperties.AutomationId="ItemsListView"
    AutomationProperties.Name="Items"
    TabIndex="1"
    Grid.Row="1"
    Margin="-10,-10,0,0"
    Padding="120,0,0,60"
    ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
    IsSwipeEnabled="False"
    SelectionChanged="ItemListView_SelectionChanged"
    ItemTemplate="{StaticResource DefaultListItemTemplate}"/>

…in the page’s Grid.

I’ve tried inlining the template and modifying Standard130ItemTemplate to no avail. Specifying a non-existent template throws a build error, though.

Any ideas what I could be doing wrong?

Answer 1

Apparently this was caused by the low resolution of my screen (1280×800). I didn’t notice that the Split Page template defines the following VisualState for FilledOrNarrow:

                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="ItemTemplate">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource Standard80ItemTemplate}"/>
                </ObjectAnimationUsingKeyFrames>

I tried running it in the simulator and anything wider than it (such as 1366×768) works fine.