Metro 应用程序：ListView ItemTemplate DataTemplate 用于选定项目

Question

我从具有以下 ListView 定义的预制模板创建了一个 SplitPage 视图：

    <!-- 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}"/>

如您所见，它使用来自 StandardStyles.xaml 的 Standard130ItemTemplate 数据模板：

<!-- 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>

问题是即使在选定的项目和鼠标悬停在具有蓝色突出显示的项目上，所有文本也显示为黑色。我想定义一个新模板 Standard130SelectedItemTemplate 我将文本设置为白色，并且我想仅在选择时将此数据模板分配给 ListView。如何将此数据模板分配给所选项目？

Answer 1

在 ListView 中编辑 ListViewItem style。如果你继续下去，你会发现一个标题为x:Name="contentPresenter"的部分。这就是实际呈现您的数据模板的内容。如果你上去这种风格的VisualStates 并注意到有标题为“已选择”、“正在选择”等的视觉状态。

要创建它，请右键单击设计器中的 ListView 并转到“编辑其他模板”，在页面的 Resources 中添加 Style 和 TargetType=ListViewItem，然后将 ItemContainerStyle 设置为ListView 到 "{StaticResource *InsertStyleKey*}"，或者直接转到您的 ListView 并将其中的 xaml 添加为 <ListView.ItemContainerStyle>。

如果您执行任何涉及创建自己的样式的操作，请从链接到其中的页面中复制代码，这样您就可以编辑所有状态。

编辑选定的故事板，它设置 ContentPresenter 的前景并将其更改为白色，如下所示：

<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>

您可能必须对其他一些状态执行相同操作才能使流程正确，对某些“PointedOver”状态也是如此。不过，您现在知道要寻找什么了。