C# Silverlight - Zoom sur les éléments de l'image de la liste horizontale

Question

J'ai la liste ci-dessous qui se lie à une table de base de données d'URL d'image. Lorsque l'application est en cours d'exécution, il est possible de cliquer sur chaque image individuelle et de voir apparaître une zone de sélection bleu clair sur l'image (vous pouvez savoir quand chaque image est sélectionnée en cliquant dessus). Ce que je voudrais pouvoir faire est d'effectuer un zoom en cliquant sur chaque image. Est-ce que quelqu'un sait d'une façon dont je pourrais le faire en modifiant le code que j'utilise actuellement ci-dessous? (La raison est que je dois afficher les images dans une zone de liste horizontale, qui est ce que ce code fait.)

<ListBox x:Name="list1" HorizontalAlignment="Left" RenderTransformOrigin="0.5,0.5" Width="400" d:LayoutOverrides="HorizontalAlignment"> 
          <ListBox.ItemsPanel> 
           <ItemsPanelTemplate> 
            <StackPanel Orientation="Horizontal"/> 
           </ItemsPanelTemplate> 
          </ListBox.ItemsPanel> 
          <ListBox.ItemTemplate> 
           <DataTemplate > 
            <Image Width="100" Height="100" Stretch="Fill" Source="{Binding LowResUrl}"/> 
           </DataTemplate> 
          </ListBox.ItemTemplate> 
         </ListBox> 

Answer 1

Vous pouvez utiliser cet extrait que vous utilisez actuellement ItemTemplate il y a un plus modèle GeneratedItemContainer (ItemContainerStyle)

<Style x:Key="ListBoxItemStyleContainerWide" TargetType="ListBoxItem"> 
    <Setter Property="Padding" Value="3"/> 
    <Setter Property="HorizontalContentAlignment" Value="Left"/> 
    <Setter Property="VerticalContentAlignment" Value="Top"/> 
    <Setter Property="Background" Value="Transparent"/> 
    <Setter Property="BorderThickness" Value="1"/> 
    <Setter Property="TabNavigation" Value="Local"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="ListBoxItem"> 
       <Grid x:Name="grid" Background="{TemplateBinding Background}" RenderTransformOrigin="0.5,0.5"> 
        <Grid.RenderTransform> 
         <TransformGroup> 
          <ScaleTransform/> 
          <SkewTransform/> 
          <RotateTransform/> 
          <TranslateTransform/> 
         </TransformGroup> 
        </Grid.RenderTransform> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualStateGroup.Transitions> 
           <VisualTransition GeneratedDuration="00:00:00.2000000" To="MouseOver"> 
            <Storyboard> 
             <DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.2000000" Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(UIElement.Opacity)" From="0" To="1"/> 
             <ColorAnimation BeginTime="00:00:00" Duration="00:00:00.2000000" Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" To="#FFF6BD43"/> 
             <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"> 
              <EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="2"/> 
             </DoubleAnimationUsingKeyFrames> 
             <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"> 
              <EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="2"/> 
             </DoubleAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualTransition> 
          </VisualStateGroup.Transitions> 
          <VisualState x:Name="Normal"> 
           <Storyboard> 
            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)"> 
             <EasingColorKeyFrame KeyTime="00:00:00" Value="#00F6BD43"/> 
            </ColorAnimationUsingKeyFrames> 
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(UIElement.Opacity)"> 
             <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/> 
            </DoubleAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="MouseOver"> 
           <Storyboard> 
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Opacity"> 
             <SplineDoubleKeyFrame KeyTime="0" Value="1"/> 
            </DoubleAnimationUsingKeyFrames> 
            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)"> 
             <EasingColorKeyFrame KeyTime="00:00:00" Value="#FFF6BD43"/> 
            </ColorAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Disabled"> 
           <Storyboard> 
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Opacity"> 
             <SplineDoubleKeyFrame KeyTime="0" Value=".55"/> 
            </DoubleAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="SelectionStates"> 
          <VisualState x:Name="Unselected"/> 
          <VisualState x:Name="Selected"> 
           <Storyboard> 
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="fillColor2" Storyboard.TargetProperty="Opacity"> 
             <SplineDoubleKeyFrame KeyTime="0" Value=".75"/> 
            </DoubleAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="FocusStates"> 
          <VisualState x:Name="Focused"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility"> 
             <DiscreteObjectKeyFrame KeyTime="0"> 
              <DiscreteObjectKeyFrame.Value> 
               <Visibility>Visible</Visibility> 
              </DiscreteObjectKeyFrame.Value> 
             </DiscreteObjectKeyFrame> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Unfocused"/> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <Rectangle x:Name="fillColor" RadiusX="10" RadiusY="10" IsHitTestVisible="False" Width="950" Height="74" Stroke="Black" StrokeThickness="3"/> 
        <Rectangle x:Name="fillColor2" Fill="#FFEEDEA7" RadiusX="5" RadiusY="5" IsHitTestVisible="False" Opacity="0"/> 
        <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/> 
        <Rectangle x:Name="FocusVisualElement" StrokeThickness="1" RadiusX="10" RadiusY="10" Visibility="Collapsed"/> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Answer 2

Vous pouvez accéder en redéfinissant la ControlTemplate VisualStateManager du contrôle ListBoxItem. Dans Expression Blend sélectionnez un ListBoxItem et "Modifier une copie" du modèle. Cela copiera le style et le modèle de contrôle de l'ancien contrôle ListBoxItem pour vous donner un bon point de départ pour modifier ce qui se passe sur les événements clés que ce contrôle ListBox est configuré pour gérer. Après cela, vous pouvez appliquer des animations dans le gestionnaire d'état visuel sur une grande variété d'événements (Hover, Sélection, désactivé, etc.).

Si vous liez des données à la propriété ItemsSource et que vous n'avez pas ListBoxItems littéral pour générer un style ListBoxItem à partir de, créez simplement un nouveau ListBox et ajoutez-lui un ListBoxItem pour générer le Style + ControlTemplate. Une fois le style généré, vous pouvez modifier le modèle de contrôle de l'élément ListBox lié aux données en spécifiant la ressource nouvellement créée sur la propriété ItemContainerStyle de votre contrôle ListBox.