以编程方式寻址在 xaml 中创建的画布

Question

我正在使用 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 是我的固定要求。

Answer 1

在您的视图模型中，您应该有一个不使用任何 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; }
}

然后您将使用 ItemsControl 和适当的 ItemsPanel 和 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;