Click here to Skip to main content
13,048,584 members (91,729 online)
Rate this:
Please Sign up or sign in to vote.
I have a ListBoxItemTemplate with VisualStateManager in XAML. The arrangement are 3 rows with 2 columns per row. I need to assign 2 mouse events (hover over and selected) to each box with images.
However, I only able to bind to 1st box and it doesn't feed other images when mouse over to other boxes.

<Image Grid.Row="0" Grid.Column="0" x:Name="Initial1" Height="53" Width="53" Source="/mine.Images;component/Images/a.png" Stretch="Fill" HorizontalAlignment="Left" Margin="28"
<Image Grid.Row="0" Grid.Column="0" x:Name="MouseOver1" Height="53" Width="53" Source="/mine.Images;component/Images/b.png" Stretch="Fill" HorizontalAlignment="Left" Margin="28"
<Trigger Property="IsMouseOver" Value="True">
   <Setter Property="Opacity" TargetName="MouseOver1" Value="1" />
   <Setter Property="Opacity" TargetName="Initial1" Value="0" />...

Do I miss out anything? Please help me as I am new to WPF!

As requested by Naz_Firdouse, here is the code. Thanks.

<ControlTemplate x:Key="ListBoxItemTemplate" TargetType="{x:Type ListBoxItem}">
        <Grid x:Name="grid" Height="Auto" Width="Auto" removed="{StaticResource SolidBrush0093B9F9}">
                <VisualStateGroup x:Name="CommonStates">
                        <VisualTransition GeneratedDuration="0"/>
                    <VisualState x:Name="Normal"/>
                    <VisualState x:Name="MouseOver">
                        <Storyboard> <!--currently assign image for mouse over, when mouse over is triggered, the initial image will collapse and vice versa-->
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="mouseOverImage">
                                <DiscreteObjectKeyFrame KeyTime="0">
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="initialImage">
                                <DiscreteObjectKeyFrame KeyTime="0">
                <VisualStateGroup x:Name="FocusStates">
                    <VisualState x:Name="Unfocused"/>
                    <VisualState x:Name="Focused"/>
<!--these are the images assigned for initial and mouse over states-->
            <Image x:Name="initialImage" Margin="0" Source="/mine.Images;component/Images/a.png" Stretch="Fill" />
            <Image x:Name="mouseOverImage" Margin="0" Source="/mine.Images;component/Images/b.png" Stretch="Fill" Visibility="Collapsed"/>
<Style x:Key="ListBoxShadowEffect" TargetType="{x:Type ListBoxItem}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Template">
                <ControlTemplate TargetType="{x:Type ListBoxItem}">
                    <Grid Height="Auto" Width="Auto" Margin="20,10,20,10">
                    <ListBoxItem Content="ListBoxItem" HorizontalAlignment="Left" Template="{StaticResource ListBoxItemTemplate}"/>

Currently I only tried out for 1st row 1st column in the ListBoxItem. However, it only showed initialImage and do not change to mouseOverImage when I do mouse over on it.
Posted 10-Jul-13 21:42pm
Updated 15-Jul-13 17:21pm
Naz_Firdouse 11-Jul-13 6:37am
you are setting the same image onMouseover of all textboxes...
so it is showing same image in all cases
Wendy2012 11-Jul-13 21:01pm
Hi, I have assign with different images as the code above is only a part of it. Do you have better solution? Thanks.
Naz_Firdouse 12-Jul-13 1:47am
post your complete code...
Wendy2012 12-Jul-13 3:14am
Hi, please see my edited code. Thanks.
Naz_Firdouse 12-Jul-13 3:18am
On MouseOver , you want to display three different images in three different rows or same image for all the rows?
Wendy2012 12-Jul-13 5:40am
I want to display different images when mouse over to different row and column.
Rate this: bad
Please Sign up or sign in to vote.

Solution 1

First of all, I don't see several rows and columns in your sample, as you describe in your question. So there is no way to understand, what are you really trying to do. What images are not shown, where they are placed, what do you bind to what, etc..
Why do you use nested ListBoxItem with different control template inside the ListBoxItem ControlTemplate? Can you explain your xaml with comments? At first sight, you should clean up it and sort out what are you doing at every place.
Wendy2012 15-Jul-13 20:48pm
Hi Irina Pykhova, as you can see from the code, all the images are stored in Images folder under mine root. For your information, the ListBoxItemTemplate is created by previous person in charge in the team and I need to do some enhancement within the code with minimum changes as required. The code attached above are all in Main.xaml.
Irina Pykhova 15-Jul-13 22:11pm
nobody will be able to help you, if you don't try to understand what do you have. I don't need your answer on my questions, but you need them to understand what happens and what to do next
Wendy2012 15-Jul-13 23:13pm
Hi, thanks for your help.
Rate this: bad
Please Sign up or sign in to vote.

Solution 2

Hi, I figured out the solution for my task.

I added the style under UserControl.Resources.

<Style TargetType="Image" x:Key="ExperimentImageStyle">
            <Setter Property="Source">
                    <MultiBinding Converter="{StaticResource ImagePathConverter}">
                        <Binding Path="Protocol"/>

Under my DataTemplate, I added the following code to call for the effects binded in ImagePathConverter.

<Image Source="{Binding Protocol, Converter={StaticResource ImagePathConverter}}" Height="53" Width="53" Margin="5"/>

In ImagePathConverter, I added different states for mouse events such as MouseOver and Selected state as parameter. It worked as I wanted. Hope this will help others.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Mobile
Web01 | 2.8.170713.1 | Last Updated 24 Jul 2013
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100