How to assign images to mouse events in ListBoxItem XAML?

Question

0.00/5 (No votes)

See more:

, +

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.

XML

<Grid>
...
<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"
Opacity="0"/>
<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"
Opacity="0"/>
</Grid>

<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.

C#

<ControlTemplate x:Key="ListBoxItemTemplate" TargetType="{x:Type ListBoxItem}">
        <Grid x:Name="grid" Height="Auto" Width="Auto" removed="{StaticResource SolidBrush0093B9F9}">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualStateGroup.Transitions>
                        <VisualTransition GeneratedDuration="0"/>
                    </VisualStateGroup.Transitions>
                    <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">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="initialImage">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Collapsed</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
                <VisualStateGroup x:Name="FocusStates">
                    <VisualState x:Name="Unfocused"/>
                    <VisualState x:Name="Focused"/>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
<!--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">
            <Setter.Value>
                <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

Wendy2012

Updated 15-Jul-13 17:21pm

v7

Add a Solution

Comments

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.

2 solutions

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.

Posted 13-Jul-13 7:38am

Irina Pykhova

Comments

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.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Wendy2012 · Accepted Answer · 2013-07-23T17:27:00

Hi, I figured out the solution for my task.

I added the style under UserControl.Resources.

C#

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

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.