change the style of the selecteditem in list box - xaml

Question

I have a ScrollViewer :
<ScrollViewer Width="160"
VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Hidden"
Height="324" Canvas.Top="0"
BorderThickness="0" Padding="0">
<ListBox x:Name="Snapshots" SelectionChanged="Snapshots_SelectionChanged"
Padding="0" Background="#FFF0F0F0"
BorderBrush="{x:Null}" VerticalAlignment="Top"
SelectionMode="Single">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Source="{Binding imageSource}"
Margin="5" Stretch="UniformToFill"
Width="120" Opacity="0.2"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"
VerticalAlignment="Top" HorizontalAlignment="Center"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ListBox>
</ScrollViewer>
How can I implement these features :
Change the opacity of the selected item (Image).
Change the default border style of the selected item (Image).

Answer 1

Change the ItemContainerStyle in your ListBox. Small sample from MSDN:
<Style x:Key="ItemContainerStyle" TargetType="ListBoxItem">
...
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid Background="{TemplateBinding Background}">
<vsm:VisualStateManager.VisualStateGroups>
...
<vsm:VisualStateGroup x:Name="SelectionStates">
<vsm:VisualState x:Name="Unselected" />
<vsm:VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="contentPresenter"
Storyboard.TargetProperty="Opacity"
Duration="0" To=".75"/>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
...
</vsm:VisualStateManager.VisualStateGroups>
<ContentPresenter
x:Name="contentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalAlignment="{TemplateBinding
HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ListBox ItemContainerStyle="{StaticResource ItemContainerStyle}"
x:Name="Snapshots"
SelectionChanged="Snapshots_SelectionChanged" Padding="0"
Background="#FFF0F0F0"
BorderBrush="{x:Null}"
VerticalAlignment="Top" SelectionMode="Single">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Source="{Binding imageSource}" Margin="5"
Stretch="UniformToFill" Width="120" Opacity="0.2"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"
VerticalAlignment="Top"
HorizontalAlignment="Center"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ListBox>
Also you can do an animation with your border in Selected VisualState.

Answer 2

Thank you,
it is working now.
this is my style after updating :
<Style x:Key="ItemContainerStyle" TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid Background="{TemplateBinding Background}">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="SelectionStates">
<vsm:VisualState x:Name="Unselected" />
<vsm:VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ImageBorder" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<ContentPresenter
x:Name="contentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Opacity="0.2"
Margin="{TemplateBinding Padding}" />
<Border BorderBrush="Black" BorderThickness="5" x:Name="ImageBorder" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and this is the listbox:
<ScrollViewer Width="160" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Hidden" Height="324" Canvas.Top="0" BorderThickness="0" Padding="0">
<ListBox ItemContainerStyle="{StaticResource ItemContainerStyle}" x:Name="ListBox_AcceptedPhotos" SelectionChanged="Snapshots_SelectionChanged" Padding="0" Background="#FFF0F0F0" BorderBrush="{x:Null}" VerticalAlignment="Top" SelectionMode="Single">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Source="{Binding imageSource}" Margin="5" Stretch="UniformToFill" Width="120" MouseLeftButtonUp="Image_MouseLeftButtonUp" />
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" VerticalAlignment="Top" HorizontalAlignment="Center"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ListBox>
</ScrollViewer>