Cách đánh dấu mục đã chọn trong ItemsControl?

Question

Tôi có XAML sau. Làm thế nào tôi có thể làm nổi bật các mục đã chọn trong ItemsControl? Tôi có thể ghi đè lên mục mẫu đã chọn cho ListView nhưng làm thế nào để đạt được cùng một đối với ItemsControl? Có bất kỳ điều khiển thay thế nào có thể hiển thị một bộ sưu tập hình ảnh không?

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

Answer 1

Một ItemsControl không theo dõi các SelectedItem

Nếu bạn muốn hành vi đó, tôi sẽ đề nghị ghi đè kiểu dáng và mẫu cho một 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> 

Answer 2

bạn cũng có thể làm điều này thông qua sự tương tác biểu hiện pha trộn. Sử dụng tên sự kiện MouseLeftDown hoặc Sự kiện được Tapped (trong Windows 8.1) trong ItemsTemplate trong vùng chứa hàng đầu (StackPanel hoặc lưới).

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> 

này nên làm các trick