views:

3330

answers:

2

I have a ListBox with a StackPanel that contains an image and 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 show a third image (glow.png) behind the currently moused over image. I can't seem to add a second image to the stack panel, and set it's visibility to hidden. I haven't even tackled the mouseover part yet.

Is adding another image inside the stack panel, and then setting it's visibility to visible the right approach on mouseenter, and then swapping back on mouseleave?

Thanks.

+1  A: 

You certainly can have one image behind another. Instead of directly adding the image to your StackPanel, add a Grid and then add both images, like this:

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

You might also like to look into Bitmap Effects, using which you can introduce a "glow" effect onto any WPF element.

Edit: Another way to achieve the effect you want (I believe) is to swap out the image's Source property in a trigger. I'm not going to try to write the XAML from memory here, but you could catch the IsMouseOver property for the image itself, and when it switches to True you could set its Source to the "glowing" version of the image.

Matt Hamilton
Used the Bitmap Effect, thanks, great idea.
John Batdorf
Its probably worth noting that the BitmapEffect classes has been marked Obsolete as of .NET 3.5 SP1. Instead you can use the hardware accelerated DropShadowEffect to produce the same effect as the old OuterGlowBitmapEffect as shown in one of Karl Schifflett's posts.
Nigel Spencer
Wish you'd posted that as an answer instead of a comment, Nigel - I'd vote you up!
Matt Hamilton
+1  A: 

Another possibility is to add a border to your image, set the color of the borderbrush to whatever you want and the opacity to 0. In your MouseEnter event handler set the opacity to 1.