Silverlight:对符合 ItemsControl 中某些条件的所有项目应用效果
我根据从后端收到的一些数据将图像动态加载到画布上。我有一个如下所示的数据结构:
ID: 1 GROUP: A X: 10 Y: 10
ID: 2 GROUP: A X: 20 Y: 20
ID: 3 GROUP: A X: 30 Y: 30
ID: 4 GROUP: B X: 40 Y: 40
ID: 5 GROUP: B X: 50 Y: 50
ID: 6 GROUP: C X: 60 Y: 60
我正在将此数据加载到一个看起来像这样的 ItemsControl
中:
<ItemsControl ItemsSource="{Binding MyDataSet}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Canvas>
<Image Height="10" Width="10"
Source="/someImage.png"
Canvas.Left="{Binding X}"
Canvas.Top="{Binding Y}"
MouseEnter="Image_MouseEnter"
MouseLeave="Image_MouseLeave" />
</Canvas>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
图像很好地显示在 Canvas
上。当用户将鼠标放在图像上时,Image_MouseEnter
事件处理程序会将该图像替换为另一个“突出显示”的图像。 Image_MouseLeave
方法将图像交换回来。这也运行良好。
我想要做的就是对每个具有与图像悬停的GROUP
相同的其他图像使用“突出显示”图像。因此,如果我将鼠标放在 ID: 1 GROUP: A
的图像上,它应该交换 ID 2 和 3 的图像。
为了让事情变得更有趣,我还使用了 MVVM。 :)
有什么建议吗?
I'm loading images dynamically onto a Canvas based on some data I receive from the back end. I have a data structure that looks like this:
ID: 1 GROUP: A X: 10 Y: 10
ID: 2 GROUP: A X: 20 Y: 20
ID: 3 GROUP: A X: 30 Y: 30
ID: 4 GROUP: B X: 40 Y: 40
ID: 5 GROUP: B X: 50 Y: 50
ID: 6 GROUP: C X: 60 Y: 60
I'm loading this data into an ItemsControl
that looks something like this:
<ItemsControl ItemsSource="{Binding MyDataSet}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Canvas>
<Image Height="10" Width="10"
Source="/someImage.png"
Canvas.Left="{Binding X}"
Canvas.Top="{Binding Y}"
MouseEnter="Image_MouseEnter"
MouseLeave="Image_MouseLeave" />
</Canvas>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
The images are showing up on the Canvas
just fine. When the user places their mouse over an image, the Image_MouseEnter
event handler replaces the image with another "highlighted" image. The Image_MouseLeave
method swaps the images back. This is also working fine.
What I want to do is also use the "highlighted" image for each other image that has the same GROUP
as the image has hovered over. So if I place my mouse over the image for ID: 1 GROUP: A
, it should swap out the images for IDs 2 and 3.
Just to make things more interesting, I'm also using MVVM. :)
Any suggestions?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
这对我来说听起来很简单。我将执行以下操作:
DataItemViewModel
中。并将它们放在ObservableCollection
中。DataItemViewModel
和保存它们的集合之间创建关系,以便您可以从子项导航到父项。Image.Source
属性绑定到DataItemViewModel
。您将需要它,以便在图像突出显示时交换源。DataItemViewModel
状态更改为突出显示(可能公开布尔值IsHighlighted
属性),并使用它来更改图像源。另外,导航回父集合,以便您可以找到符合您的条件的所有其他DataItemViewModel
实例,并将其突出显示状态设置为 true。希望有帮助!
This sounds pretty straightforward to me. I would do the following:
DataItemViewModel
. And place them within anObservableCollection
.DataItemViewModel
and the collection that holds them, so that you can navigate from the child to the parent.Image.Source
property to theDataItemViewModel
. You will need this so that you can swap the source when the image is highlighted.DataItemViewModel
state to highlighted (perhaps expose a booleanIsHighlighted
property), and use this to change the image source. Also, navigate back to the parent collection so that you can find all otherDataItemViewModel
instances that mach your criteria and set their highlighted state to true as well.Hope that help!