WPF ListBox DataTemplate and Image Question
I have a ListBox with a StackPanel that contains an image and a label.
<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>
I want to display the third image (glow.png) behind the current mosaic image. I can't seem to add the second image to the stack panel and set the visibility to hidden. I haven't dealt with the mouse part yet.
Adds another image inside the stack pane and then sets visibility to visible correct approach in the center of the mouse and then replaces it with mouseleave?
Thank.
source to share
You can surely have one image after another. Instead of directly adding an image to your StackPanel, add a Grid and then add both images, for example:
<StackPanel Orientation="Vertical">
<Grid>
<Image Source="..." />
<Image Source="{Binding Image}" ... />
</Grid>
<Label Content="{Binding Name}" ... />
</StackPanel>
You may also like Bitmap Effects , which allows you to add a "glow" effect to any WPF element.
Edit: Another way to achieve the desired effect (I believe) is to replace the Source property in the trigger. I'm not going to write XAML from memory here, but you can catch the IsMouseOver property for the image itself, and when it switches to True, you can set its source to the "glowing" version of the image.
source to share