Metro app: ListView ItemTemplate DataTemplate for selected item

Question

I created a SplitPage view from canned templates that has the following ListView definition:

    <!-- Vertical scrolling item list -->
<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 Standard130ItemTemplate}"/>

As you can see it uses Standard130ItemTemplate data template from StandardStyles.xaml:

<!-- List-appropriate 130 pixel high item template as seen in the SplitPage -->
<DataTemplate x:Key="Standard130ItemTemplate">
    <Grid Height="110" Margin="6">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="110" Height="110">
            <Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
        </Border>
        <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
            <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap"/>
            <TextBlock Text="{Binding Subtitle}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
            <TextBlock Text="{Binding Description}" Style="{StaticResource BodyTextStyle}" MaxHeight="60"/>
        </StackPanel>
    </Grid>
</DataTemplate>

Problem is all the text appears in black even in selected item and mouse over item which has blue highlight. I would like to define a new template Standard130SelectedItemTemplate where I make the text white and I want to assign this data template to the ListView only when selected. How do I assign this data template to Selected item?

Cavanaugh

Answer 1

Edit the ListViewItem style in the ListView. If you follow it down, you'll find a section titled x:Name="contentPresenter". This is what's actually presenting your data template. If you go up to the VisualStates of this style and notice that there are visual states titled "Selected", "Selecting", etc.

To create it, either right click on the ListView in the designer and go to 'Edit Additional Templates', add a Style with TargetType=ListViewItem in your Resources of the page and set the ItemContainerStyle of the ListView to "{StaticResource *InsertStyleKey*}", or simply go to your ListView and add the xaml in it as <ListView.ItemContainerStyle>.

If you do either of the ones involving creating your own style, copy the code from the page linked into it, so you have all of the states available to edit.

Edit the Selected Storyboard where it sets the Foreground of the ContentPresenter and change it to White, like so:

<VisualState x:Name="Selected">
    <Storyboard>
        <DoubleAnimation Storyboard.TargetName="SelectionBackground"
            Storyboard.TargetProperty="Opacity"
            Duration="0"
            To="1" />
        <DoubleAnimation Storyboard.TargetName="SelectedBorder"
            Storyboard.TargetProperty="Opacity"
            Duration="0"
            To="1" />
        <DoubleAnimation Storyboard.TargetName="SelectedCheckMark"
            Storyboard.TargetProperty="Opacity"
            Duration="0"
            To="1" />
        <!--This is where I have changed the Foreground-->
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter" 
            Storyboard.TargetProperty="Foreground">
            <DiscreteObjectKeyFrame KeyTime="0" 
                Value="White" />
         </ObjectAnimationUsingKeyFrames>
     </Storyboard>
</VisualState>

You may have to do the same to some of the other states to make the flow right, same with some of the 'PointedOver' states. You now know what to look for though.

Fugger

Hi, thanks for suggestion, but it doesn't seem to work. I think the very reason is the data template assignment for the item template which probably overrides whatever you assign in the Storyboard. – Cavanaugh

The ItemTemplate is actually being wrapped by the 'ItemContainerStyle', also known as the 'ListViewItem' Style. If you look into the style where I mentioned the ContentPresenter, you'll notice that it takes the value of the data item as Content and the selected ItemTemplate as its ContentTemplate. Are you sure you applied the new Style to the ListView properly? – Fugger

The ListView definition after applying ItemContainerStyle: ItemTemplate="{StaticResource Standard130ItemTemplate}" ItemContainerStyle="{StaticResource ListViewItemStyle1}" In ListViewItemStyle1, the ContentPresenter line: <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> – Cavanaugh

I see Content itself as the TemplateBinding assignment for the Content in the ContentPresenter line. Similarly, the ContentTemplate has just the assignment of TemplateBinding to itself. – Cavanaugh