Change the style of the selected item in the list
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 element (Image).
- Change the default border style for the selected item (Image).
+3
source to share
2 answers
Thanks, it works now. this is my style after update:
<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 list:
<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>
+1
source to share
Change ItemContainerStyle
to 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 animation with your border in Selected
VisualState.
+5
source to share