Silverlight：對ItemsControl中的某些條件匹配的所有項目應用效果

Question

我基於從後端接收的一些數據將圖像動態加載到畫布上。我有一個數據結構，看起來像這樣：

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

有什麼建議嗎？

Answer 1

這聽起來很直截了當。我會執行以下操作：

1. 將每個數據項包裝在視圖模型DataItemViewModel中。並將它們放在ObservableCollection之內。
2. 在DataItemViewModel和保存它們的集合之間創建一個關係，以便您可以從子項導航到父項。
3. 將Image.Source財產綁定到DataItemViewModel。您需要這樣做，以便在圖像突出顯示時交換源代碼。
4. 處理您的鼠標進入/離開事件在代碼隱藏（是的，這是允許在MVVM！）。
5. 在鼠標輸入上，將DataItemViewModel狀態更改爲突出顯示（可能會暴露布爾IsHighlighted屬性），並使用它來更改圖像源。另外，請導航回父級集合，以便您可以找到所有其他可以滿足您的條件並將其突出顯示狀態設置爲true的實例。

希望有所幫助！