以编程方式解决在xaml中创建的画布

aethalyste 发表于 Dev

继续

我正在使用MVVM方法在WPF中创建一个应用程序。我对这个话题还很陌生，我正在寻找如何实现以下目标的指针：我已经在XAML中创建了画布，如下所示：

<canvas name = "myCanvas">
...
</canvas>

我也在XAML中添加了一个按钮，我想使用该按钮在鼠标单击时在程序上绘制（编程）一些基本形状（线，矩形等）。由于我使用的是MVVM方法，因此必须将按钮的命令绑定到一种方法，如下所示：

<Button name="myButton" Command="{Binding myMethod, Mode=OneWay}">
...
</Button>

我使绑定本身可以正常工作，并使用C＃创建了图形和形状，但是我不知道如何将形状放在XAML中创建的画布上。如何通过我的方法处理XAML中预制的画布？我该怎么办？

编辑：

关键是我想根据数据生成形状以使其可视化。因此，如果我的输入有3个类型A的元素，我想创建3个矩形并将它们显示在画布上。稍后，我想使它们可单击，并在单击时显示有关它们的一些信息。MVVM是我的既定要求。

克莱门斯

在视图模型中，您应该具有不使用任何UI元素的形状表示形式：

public class ShapeItem
{
    public Geometry Geometry { get; set; }
    public Brush Fill { get; set; }
    public Brush Stroke { get; set; }
}

public class ViewModel
{
    public ObservableCollection<ShapeItem> ShapeItems { get; set; }
}

然后，您将使用带有适当项的ItemsControlItemsPanel并ItemTemplate可视化形状项：

<ItemsControl ItemsSource="{Binding ShapeItems}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Path Data="{Binding Geometry}"
                  Fill="{Binding Fill}"
                  Stroke="{Binding Stroke}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

可以如下所示初始化视图模型，并在执行适当的命令方法时类似地添加项目：

var vm = new ViewModel();
vm.ShapeItems = new ObservableCollection<ShapeItem>();
vm.ShapeItems.Add(
    new ShapeItem
    {
        Geometry = new EllipseGeometry(new Point(100, 100), 100, 50),
        Fill = Brushes.LightBlue
    });
vm.ShapeItems.Add(
    new ShapeItem
    {
        Geometry = new RectangleGeometry(new Rect(150, 100, 200, 100)),
        Fill = Brushes.Azure,
        Stroke = Brushes.Black
    });

DataContext = vm;