WPF ListBox DataTemplate et Image Question

Question

J'ai un ListBox avec un StackPanel qui contient une image et une étiquette.

<ListBox.ItemsPanel> 
    <ItemsPanelTemplate> 
     <VirtualizingStackPanel Orientation="Horizontal" IsItemsHost="True" /> 
    </ItemsPanelTemplate> 
</ListBox.ItemsPanel> 
<ListBox.ItemTemplate> 
    <DataTemplate> 
     <StackPanel Orientation="Vertical"> 
      <Image Source="{Binding Image}" Cursor="Hand" Tag="{Binding Link}" MouseLeftButtonDown="Image_MouseLeftButtonDown" ToolTip="Click to see this product on adidas.com" VerticalAlignment="Top" HorizontalAlignment="Left" /> 
      <Label Content="{Binding Name}" Cursor="Hand" Tag="{Binding Link}" MouseLeftButtonDown="Label_MouseLeftButtonDown" VerticalAlignment="Bottom" Foreground="White" Style="{StaticResource Gotham-Medium}" FontSize="8pt" HorizontalAlignment="Center" /> 
     </StackPanel> 
    </DataTemplate> 
</ListBox.ItemTemplate> 

Je souhaite afficher une troisième image (glow.png) derrière l'image actuellement survolée. Je n'arrive pas à ajouter une deuxième image sur le panneau de la pile, et la visibilité est masquée. Je n'ai même pas encore abordé la partie mouseover.

Est-ce que l'ajout d'une autre image dans le panneau de la pile, puis la définition de la visibilité de la bonne approche sur le mouseenter, puis le retour sur mouseleave?

Merci.

Answer 1

Vous pouvez certainement avoir une image derrière une autre. Au lieu d'ajouter directement l'image à votre StackPanel, ajoutez une grille, puis ajouter les deux images, comme ceci:

<StackPanel Orientation="Vertical"> 
    <Grid> 
     <Image Source="..." /> 
     <Image Source="{Binding Image}" ... /> 
    </Grid> 
    <Label Content="{Binding Name}" ... /> 
</StackPanel> 

pourraient vous intéresser aussi à se pencher sur Bitmap Effects, à l'aide que vous pouvez introduire un effet « lueur » sur tout Élément WPF.

Modifier: Une autre façon d'obtenir l'effet souhaité (je crois) est d'échanger la propriété Source de l'image dans un déclencheur. Je ne vais pas essayer d'écrire le XAML de la mémoire ici, mais vous pouvez attraper la propriété IsMouseOver pour l'image elle-même, et quand elle passe à True, vous pouvez définir sa source à la version "brillante" de l'image.

Answer 2

Une autre possibilité est d'ajouter une bordure à votre image, réglez la couleur de la BorderBrush à ce que vous voulez et l'opacité à 0. Dans votre gestionnaire d'événements MouseEnter réglez l'opacité à 1.