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

有什么建议么？

4

1 回答 1

1

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

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

希望有帮助！

于 2011-08-13T05:52:00.230 回答