How to highlight selected item in ItemsControl?

问题

I have the following XAML. How can i highlight the selected item in the ItemsControl ? I can override the selected item template for ListView but how to achieve the same for ItemsControl? Is there any alternative control that can display a collection of images ?

<Window x:Class="ImageScrollDemo.View.MoviePosterView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ImageScrollDemo"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    Title="MoviePosterView" Height="367" Width="725" Foreground="White">
<Window.Background>
    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
        <GradientStop Color="#FF505050" Offset="0"/>
        <GradientStop Color="#FF202020" Offset="1"/>
    </LinearGradientBrush>
</Window.Background>
<Window.DataContext>
    <local:MainWindowViewModel />
</Window.DataContext>
<Window.Resources>
    <local:MainWindowViewModel x:Key="ViewModel" />

    <Style TargetType="Image" x:Key="ImageHover">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Opacity" Value="1" />
                <Setter Property="BitmapEffect">
                    <Setter.Value>
                        <OuterGlowBitmapEffect GlowColor="Gold" GlowSize="8"/>
                    </Setter.Value>
                </Setter>
            </Trigger>
            <Trigger Property="IsMouseOver" Value="False">
                <Setter Property="Opacity" Value="0.7" />
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<i:Interaction.Triggers>
    <i:EventTrigger EventName="Loaded">
        <i:InvokeCommandAction Command="{Binding PopulateMovieGrid}" />
    </i:EventTrigger>
</i:Interaction.Triggers>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="60" />
    </Grid.RowDefinitions>
    <ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto">
        <ItemsControl Name="itemsCtrl" HorizontalContentAlignment="Center" ItemsSource="{Binding Path=MovieCollection, Mode=TwoWay}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="5" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>

            <ItemsControl.ItemContainerStyle>
                <Style TargetType="ContentPresenter">
                    <Setter Property="ContentTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <Border BorderBrush="Black" BorderThickness="5">
                                    <ContentPresenter Content="{Binding}"/>
                                </Border>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ItemsControl.ItemContainerStyle>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                        <StackPanel Orientation="Vertical" HorizontalAlignment="Center">
                            <Image Style="{StaticResource ImageHover}" Margin="0,5,0,0" RenderOptions.BitmapScalingMode="HighQuality" SnapsToDevicePixels="True" HorizontalAlignment="Center" Source="{Binding Path=Poster}" Height="150" />
                            <TextBlock Name="txtTitle" FontSize="10" HorizontalAlignment="Center" TextAlignment="Justify" Text="{Binding Title}" TextWrapping="Wrap" MaxWidth="110" />
                        </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>
</Grid>

回答1:

An ItemsControl does not track the SelectedItem

If you want that behavior, I would suggest overwriting the styles and templates for a ListBox

<ListBox Name="itemsCtrl" HorizontalContentAlignment="Center" ItemsSource="{Binding Path=MovieCollection, Mode=TwoWay}">

    <ListBox.Resources>
        <!-- Set SelectedItem Background here -->
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Yellow"/>
    </ListBox.Resources>

    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="5" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>

    <ListBox.ItemTemplate>
        <DataTemplate>
                <StackPanel Orientation="Vertical" HorizontalAlignment="Center">
                    <Image Style="{StaticResource ImageHover}" Margin="0,5,0,0" RenderOptions.BitmapScalingMode="HighQuality" SnapsToDevicePixels="True" HorizontalAlignment="Center" Source="{Binding Path=Poster}" Height="150" />
                    <TextBlock Name="txtTitle" FontSize="10" HorizontalAlignment="Center" TextAlignment="Justify" Text="{Binding Title}" TextWrapping="Wrap" MaxWidth="110" />
                </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

回答2:

you can also do this through the expression blend interactivity. Use the event name MouseLeftDown or Tapped Event (in Windows 8.1) in the ItemsTemplate in the top container (StackPanel or the grid).

xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
<i:Interaction.Triggers>
    <i:EventTrigger EventName="MouseLeftDown">
        <Core:ChangePropertyAction PropertyName="Background" Value="Green"/>
    </i:EventTrigger>
</i:Interaction.Triggers>

This should do the trick

来源：https://stackoverflow.com/questions/9069374/how-to-highlight-selected-item-in-itemscontrol