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

【问题标题】：Silverlight: Apply effect on all items that match some criteria in an ItemsControlSilverlight：对符合 ItemsControl 中某些条件的所有项目应用效果
【发布时间】：2011-08-12 23:39:54
【问题描述】：

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

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。 :)

有什么建议吗？

【问题讨论】：

标签： silverlight silverlight-4.0 mvvm itemscontrol mouseenter

【解决方案1】：

这对我来说听起来很简单。我会做以下事情：

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

希望有所帮助！

【讨论】：