0

バックエンドから受け取ったデータに基づいて、画像をCanvasに動的に読み込んでいます。私は次のようなデータ構造を持っています：

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: AID2と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 に答える