Приложение Metro: ListView ItemTemplate DataTemplate для выбранного элемента

Question

Я создал представление 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 только при выборе. Как назначить этот шаблон данных для выбранного элемента?

Answer 1

Отредактируйте стиль ListViewItem в ListView. Если вы будете следовать ей, вы найдете раздел с названием x:Name="contentPresenter", Это то, что на самом деле представляет ваш шаблон данных. Если вы подойдете к VisualStates этого стиля и обратите внимание, что есть визуальные состояния под названием "Выбрано", "Выбор" и т. д.

Чтобы создать его, либо щелкните правой кнопкой мыши на ListView в конструкторе и перейдите к "Редактировать дополнительные шаблоны", добавьте Style с TargetType=ListViewItem в вашем Resources страницы и установите 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". Теперь вы знаете, что искать, хотя.