绑定到形状集合？答案

【问题标题】：Binding to a collection of shapes?绑定到形状集合？
【发布时间】：2009-10-30 13:50:08
【问题描述】：

如何绑定到形状集合？

我想构建一个小型应用程序（仅用于学习目的），我在其中使用 MVVM 来绘制形状。

MainWindow 的 DataContext 是 MainWindowViewModel

MainWindowViewModel 有一个 ObservableCollection 形状。

我的 MainWindow 目前只有一个 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);

到目前为止没有绑定错误。有任何想法吗？

【问题讨论】：

标签： c# wpf data-binding graphics mvvm

【解决方案1】：

您想使用ItemsControl 绑定到数据集合并拥有每个数据由某种 UI 表示的数据。此外，您没有正确设置绑定。让我们从这两件事的外观开始：

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

注意：上述绑定声明假定您已将 x:Name="MainWindow" 应用于 Window 元素，并且 ShapeCollection 是 MainWindow 类的属性。

现在，由于 ItemsControl 的默认布局是垂直方向的 StackPanel，您应该看到您的形状堆叠在一起。如果您想更改元素的布局，您将更改 ItemsControl 的 ItemPanelTemplate。让我们改变它，当空间用完时，形状水平排列并垂直包裹：

<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 上的标签并深入研究投票最高的问题。

【讨论】：