Переплет для коллекции форм?

Question

Как мне привязать к коллекции фигур?

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

DataContext из MainWindow является MainWindowViewModel

Это MainWindowViewModel имеет ObservableCollection форм.

У меня в настоящее время только холст на моем MainWindow с его 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> 

Примечание: выше связывания декларации предполагается, что вы применили х: Name = «MainWindow» к вашему элементу окна и что ShapeCollection это свойство выключено вашего класса MainWindow.

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

<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, и вникнуть в самые высокие голосованные вопросы.