xamlsilverlightlistboxvisualstatemanagerselecteditemtemplate

change the style of the selecteditem in list box


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 :

  1. Change the opacity of the selected item (Image).
  2. Change the default border style of the selected item (Image).

Solution

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