Metro应用程序:listviewitemtemplate DataTemplate为选定的项目



我从模板中创建了一个SplitPage视图,它具有以下ListView定义:

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

你可以看到它使用Standard130ItemTemplate数据模板来自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>

问题是所有的文本都显示为黑色,即使在选中的项目和鼠标在项目有蓝色高亮。我想定义一个新的模板Standard130SelectedItemTemplate,我使文本白色,我想分配这个数据模板到ListView只有当选择。如何将此数据模板分配给已选项目?

编辑ListView中的ListViewItem样式。如果你继续往下看,你会发现一个名为x:Name="contentPresenter"的部分。这是实际呈现数据模板的东西。如果你打开这个样式的VisualState,注意到有标题为"Selected", "Selected"等的视觉状态

要创建它,右键单击设计器中的ListView,然后转到"编辑其他模板",在页面的Resources中添加StyleTargetType=ListViewItem,并将ListViewItemContainerStyle设置为"{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"状态也是如此。现在您知道要查找什么了。

最新更新