如何在ListBoxItem XAML中为鼠标事件分配图像？ [英] How to assign images to mouse events in ListBoxItem XAML?

问题描述

我在XAML中有一个带有VisualStateManager的ListBoxItemTemplate。排列为3行，每行2列。我需要为每个包含图像的方框分配2个鼠标事件（悬停并选中）。

但是，我只能绑定到第一个框，当鼠标移到其他时它不会提供其他图像框。

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

我错过了什么吗？请帮助我，因为我是WPF新手！



根据Naz_Firdouse的要求，这是代码。谢谢。

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}"/>

目前我只尝试了ListBoxItem中的第1行第1列。但是，当我将鼠标悬停在它上面时，它只显示了initialImage并且没有更改为mouseOverImage。

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.

推荐答案

首先，我没有看到几个行和列在您的示例中，正如您在问题中描述的那样。所以没有办法理解，你真正想做什么。什么图像没有显示，它们放在哪里，你绑定什么等等。

为什么你使用嵌套的 ListBoxItem 与不同 ListBoxItem ControlTemplate 中的控制模板？你能用评论来解释你的xaml吗？乍一看，你应该清理它并理清你在每个地方做的事情。

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.

我找到了我的任务的解决方案。



我在UserControl.Resources下添加了样式。

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>

在我的DataTemplate下，我添加了以下代码来调用ImagePathConverter中绑定的效果。

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"/>

在ImagePathConverter中，我为鼠标事件添加了不同的状态，例如MouseOver和Selected stat e作为参数。它按我的意愿工作。希望这会对其他人有所帮助。

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.

这篇关于如何在ListBoxItem XAML中为鼠标事件分配图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！