¿Cómo resaltar el elemento seleccionado en ItemsControl?

Tengo el siguiente XAML. ¿Cómo puedo resaltar el elemento seleccionado en ItemsControl? Puedo anular la plantilla del elemento seleccionado para ListView, pero ¿cómo lograr lo mismo para ItemsControl? ¿Hay algún control alternativo que pueda mostrar una colección de imágenes?¿Cómo resaltar el elemento seleccionado en ItemsControl?

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

Fuente

2012-01-30 Lucifer

Utilice un cuadro de lista a continuación, establecer SelectionMode = "múltiple" – 0x4f3759df

Un ItemsControl no realizar el seguimiento del SelectedItem

Si desea que el comportamiento, sugeriría sobrescribir los estilos y plantillas para un 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>

Fuente

2012-01-30 19:13:41 Rachel

también se puede hacer esto a través de la expresión mezcla interactividad. Utilice el nombre del evento MouseLeftDown o evento Tapped (en Windows 8.1) en ItemsTemplate en el contenedor superior (StackPanel o 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>

Esto debería hacer el truco

Fuente

2014-07-22 14:29:10 OliverAssad

¿Cómo resaltar el elemento seleccionado en ItemsControl?

Respuesta

Cuestiones relacionadas