Silverlight: применить эффект ко всем элементам, которые соответствуют некоторым критериям в ItemsControl - PullRequest
Новая
       24

Silverlight: применить эффект ко всем элементам, которые соответствуют некоторым критериям в ItemsControl

0 голосов
/ 13 августа 2011

Я загружаю изображения динамически на холст на основе некоторых данных, которые я получаю от серверной части. У меня есть структура данных, которая выглядит следующим образом: 

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, оно должно поменять местами изображения для идентификаторов 2 и 3.

Просто чтобы сделать вещи более интересными, я также использую MVVM. :)

Есть предложения?

1 Ответ

1 голос
/ 13 августа 2011

Это звучит довольно просто для меня.Я бы сделал следующее:

  1. Оберните каждый из ваших элементов данных в модель представления, DataItemViewModel.И поместите их в пределах ObservableCollection.
  2. Создайте связь между DataItemViewModel и коллекцией, в которой они содержатся, чтобы вы могли перемещаться от дочернего элемента к родительскому.
  3. Свяжите свойство Image.Source с DataItemViewModel.Это понадобится вам, чтобы вы могли поменять источник при выделении изображения.
  4. Обрабатывать события ввода / вывода мышью с выделенным кодом (да, это разрешено в MVVM!).
  5. При вводе с помощью мыши измените состояние DataItemViewModel на подсвеченное (возможно, предоставьте логическое свойство IsHighlighted) и используйте его для изменения источника изображения.Также вернитесь к родительской коллекции, чтобы найти все другие DataItemViewModel экземпляры, которые соответствуют вашим критериям, и установите для их выделенного состояния значение true.

Надеюсь, что это поможет!

...