Metro app: ListView ItemTemplate DataTemplate for selected item

问题

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?

回答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.

来源：https://stackoverflow.com/questions/16312058/metro-app-listview-itemtemplate-datatemplate-for-selected-item