Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: XAML WPF C#4.0 VS2010
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.
 
<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.
 
<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 22:42pm
Edited 15-Jul-13 18:21pm
v7
Comments
Naz_Firdouse at 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 at 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 at 12-Jul-13 1:47am
   
post your complete code...
Wendy2012 at 12-Jul-13 3:14am
   
Hi, please see my edited code. Thanks.
Naz_Firdouse at 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 at 12-Jul-13 5:40am
   
I want to display different images when mouse over to different row and column.
Rate this: bad
good
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.
  Permalink  
Comments
Wendy2012 at 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 at 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 at 15-Jul-13 23:13pm
   
Hi, thanks for your help.
Rate this: bad
good
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">
                <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.
  Permalink  
v2

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

  Print Answers RSS
0 OriginalGriff 499
1 Maciej Los 325
2 Sergey Alexandrovich Kryukov 234
3 DamithSL 233
4 Mathew Soji 195
0 OriginalGriff 7,168
1 Sergey Alexandrovich Kryukov 6,377
2 DamithSL 5,461
3 Manas Bhardwaj 4,876
4 Maciej Los 4,450


Advertise | Privacy | Mobile
Web02 | 2.8.1411023.1 | Last Updated 24 Jul 2013
Copyright © CodeProject, 1999-2014
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