change the style of the selecteditem in list box

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

score 5 · Answer 1 · edited Oct 04 '13 at 16:06

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.

mtz1406 · Accepted Answer · 2016-02-28T22:38:37.477

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>

xmlns:vsm = "clr-namespace:System.Windows;assembly=System.Windows" — Davut Gürbüz, Mar 27 '13 at 13:19

change the style of the selecteditem in list box

2 Answers2