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