Silverlight:对符合 ItemsControl 中某些条件的所有项目应用效果

发布于 2024-11-29 15:04:39 字数 1192 浏览 0 评论 0原文

我根据从后端收到的一些数据将图像动态加载到画布上。我有一个如下所示的数据结构:

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

一曲琵琶半遮面シ 2024-12-06 15:04:39

这对我来说听起来很简单。我将执行以下操作:

  1. 将每个数据项包装在视图模型 DataItemViewModel 中。并将它们放在 ObservableCollection 中。
  2. DataItemViewModel 和保存它们的集合之间创建关系,以便您可以从子项导航到父项。
  3. Image.Source 属性绑定到 DataItemViewModel。您将需要它,以便在图像突出显示时交换源。
  4. 在代码隐藏中处理鼠标进入/离开事件(是的,这在 MVVM 中是允许的!)。
  5. 鼠标输入时,将 DataItemViewModel 状态更改为突出显示(可能公开布尔值 IsHighlighted 属性),并使用它来更改图像源。另外,导航回父集合,以便您可以找到符合您的条件的所有其他 DataItemViewModel 实例,并将其突出显示状态设置为 true。

希望有帮助!

This sounds pretty straightforward to me. I would do the following:

  1. Wrap each of of your data items in a view-model, DataItemViewModel. And place them within an ObservableCollection.
  2. Create a relationship between DataItemViewModel and the collection that holds them, so that you can navigate from the child to the parent.
  3. Bind the Image.Source property to the DataItemViewModel. You will need this so that you can swap the source when the image is highlighted.
  4. Handle your mouse enter / leave events in code-behind (yes, this is allowed in MVVM!).
  5. On mouse-enter, change the DataItemViewModel state to highlighted (perhaps expose a boolean IsHighlighted property), and use this to change the image source. Also, navigate back to the parent collection so that you can find all other DataItemViewModel instances that mach your criteria and set their highlighted state to true as well.

Hope that help!

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文