изменить стиль SelectedItem в списке

Question

У меня есть 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> 

Как можно реализовать эти возможности:

1. Изменение непрозрачности выбранного элемента (Изображение).
2. Изменение стиля рамки по умолчанию для выбранного элемента (Изображение).

Answer 1

Спасибо, Он работает сейчас. это мой стиль после обновления:

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

и это 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> 

Answer 2

Измените ItemContainerStyle на ListBox. Небольшой пример из 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> 

Также вы можете сделать анимации с границей в Selected VisualState.