Привязка к коллекции фигур?

Question

Как бы я связал коллекцию фигур?

Я хотел бы создать небольшое приложение (только для целей обучения), в котором я использую MVVM для рисования фигур.

DataContext MainWindow - это MainWindowViewModel

У MainWindowViewModel есть ObservableCollection фигур.

В настоящее время у меня есть только Canvas в главном окне с привязанным к этой коллекции DataContext, который не работает:

<Window x:Class="DesktopCanvas.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
>
    <Canvas DataContext="{Binding Source=ShapeCollection}">
    </Canvas>
</Window>

В конструкторе MainWindowViewModel я добавляю прямоугольник, подобный этому:

this.ShapeCollection = new ObservableCollection<Shape>();
Rectangle rect = new Rectangle();
//Größe
rect.Height = 75;
rect.Width = 75;
//Transparenz
rect.Opacity = 100;
//Farbe
SolidColorBrush myBrush = new SolidColorBrush(Colors.Red);
rect.Fill = myBrush;
this.ShapeCollection.Add(rect);

Пока нет ошибок привязки. Есть идеи?

Answer 1

Вы хотите использовать ItemsControl , чтобы связать с коллекцией данных и иметь каждый кусок данных, представленных каким-то интерфейсом. Кроме того, вы не устанавливаете привязку правильно. Давайте начнем с того, как эти две вещи могут выглядеть:

<ItemsControl ItemsSource="{Binding Path=ShapeCollection, Element=MainWindow}">
</ItemsControl>

ПРИМЕЧАНИЕ: В приведенном выше объявлении привязки предполагается, что вы применили x: Name = "MainWindow" к своему элементу Window и что ShapeCollection является свойством вне вашего класса MainWindow.

Теперь, поскольку макетом ItemsControl по умолчанию является StackPanel с вертикальной ориентацией, вы должны видеть, что ваши фигуры сложены друг над другом. Если вы хотите изменить расположение элементов, вы измените ItemPanelTemplate ItemsControl. Давайте изменим это так, чтобы формы располагались горизонтально и оборачивались по вертикали, когда заканчивается пространство:

<ItemsControl Height="100" ItemsSource="{Binding ShapeCollection, ElementName=Window, Mode=Default}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

Наконец, давайте поговорим о вашем общем подходе. Прямо сейчас вы фактически используете Shapes в качестве ваших данных, что на самом деле несколько отстает от техники, известной как Mode-View-ViewModel (MVVM). В MVVM вам просто нужен чистый объект данных, а затем вы или, что еще лучше, ваш дизайнер, определяете визуальное представление этих данных с помощью DataTemplates. Для получения дополнительной информации о MVVM я предлагаю просто щелкнуть здесь тег на StackOverflow и перейти к вопросам с наибольшим количеством голосов.