динамический выбор прямоугольников над usercontrols

Question

Позвольте мне сформулировать проблему в первую очередь. Я хотел бы реализовать оболочку вокруг Canvas (позвольте мне назвать ее страницей), которая будет реализовывать выбор прямоугольника вокруг его UIElements, которые фактически выбраны. Для этого я реализовал интерфейс ISelect так:

interface ISelect { 
    Point Center {get; set;} //Center of selecting rectangle 
    Size Dimensions {get; set;} //Dimensions of selecting rectangle 
} 

Каждый объект, который помещается на страницу реализует интерфейс ISelect. Страница имеет SelectedElements типа ObservableCollection, которая содержит ссылку на все выбранные в данный момент элементы.

Для каждой записи в SelectedElements я хотел бы нарисовать вокруг нее прямоугольник.

У меня есть несколько идей, как это сделать:

1. Каждый UIElement может реализовать в одиночку этот прямоугольник и показать его при выборе. Этот параметр потребовал бы, чтобы новые объекты выполняли это каждый раз. Поэтому я предпочитаю не использовать его.
2. На странице Я мог бы создавать прямоугольники в коде, чтобы добавить их на страницу. Это не MVVM рекомендуется priniciple.
3. На странице XAML создайте нечто вроде ItemsControl и привяжите его к SelectedElements определенным шаблоном. Этот вариант кажется мне лучшим. Пожалуйста, помогите мне в этом направлении. Должен ли я каким-то образом использовать ItemsControl?

спасибо.

Answer 1

У меня нет времени, чтобы выкопать полное рабочее решение, так что это в основном набор предложений.

Каждый элемент должен иметь вид модели

public abstract class Element: INotifyPropertyChanged 
{ 
    bool _isSelected; 
    public bool IsSelected 
    { 
     get { return _isSelected; } 
     set 
     { 
      _isSelected = value; 
      OnPropertyChanged(); 
     } 
    } 
} 

public class EllipseElement : Element {} 
public class RectangleElement : Element {} 

Тогда есть шаблоны данных для наглядных элементов (я не могу дать вам конвертер кода, но вы можете заменить его на другой, посмотрите here).

<DataTemplate DataType="{x:Type local:EllipseElement}"> 
     <Border Visibility="{Binding IsSelected, Converter={local:FalseToHiddenConverter}}"> 
      <Ellipse ... /> 
     </Border> 
    </DataTemplate> 
    <DataTemplate DataType="{x:Type local:RectangleElement}"> 
     <Border Visibility="{Binding IsSelected, Converter={local:FalseToHiddenConverter}}"> 
      <Rectangle ... /> 
     </Border> 
    </DataTemplate> 

Затем связать ObservableCollection элементов на холсте (что сложно, увидеть this ответ, где ItemsControl используется для поддержки связывания).

Ваша процедура выбора должна проверять элементы и установить/сбросить их свойство IsSelected, которое будет показывать границу. См. here относительно того, как рисовать все выделенные прямоугольники.