以编程方式寻址在 xaml 中创建的画布 [英] programmatically addressing a canvas created in xaml

问题描述

我正在使用 MVVM 方法在 WPF 中创建应用程序.我对这个主题相当陌生，我正在寻找如何实现以下目标的指针:我在 XAML 中创建了一个画布，如下所示:

I am creating an application in WPF using the MVVM approach. I am fairly new to the topic and I'm looking on pointers how to achieve the following: I have created a canvas in XAML, as follows:

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

我添加了一个按钮，也是在 XAML 中，我想用它在鼠标单击时在现有画布上绘制(以编程方式)一些基本形状(线、矩形等).由于我使用的是 MVVM 方法，因此按钮的命令必须绑定到一个方法，如下所示:

I added a button, also in XAML, which I want to use to draw (programmatically) some basic shapes (line, rectangle, etc.) onto the existing canvas on mouse click. Since I'm using the MVVM approach, the button's command has to be bound to a method, as follows:

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

我让绑定本身可以正常工作，并且我在 C# 中创建了绘图和形状，但我不明白如何将这些形状放到在 XAML 中创建的画布上.如何从我的方法中解决在 XAML 中预先制作的画布?我该怎么做?

I got the binding itself to work fine and I created the drawings and shapes in C#, but I don't understand how can I put the shapes onto the canvas that was created in XAML. How can I address the canvas pre-made in XAML from my method? How do I go about this?

重点是我想根据数据生成形状以将其可视化.所以，如果我的输入有 3 个类型 A 的元素，我想创建 3 个矩形并将它们显示在画布上.后来我想让它们可点击并在点击时显示有关它们的一些信息.MVVM 对我来说是一个既定的要求.

The point of this is that I want to generate shapes based on data to visualise it. So, if my input has, say, 3 elements of type A, I want to create 3 rectangles and display them on the canvas. Later I want to make them clickable and display some information about them on click. MVVM is a set requirement for me.

推荐答案

在你的视图模型中，你应该有一个不使用任何 UI 元素的形状的表示:

In your view model you should have a representation of the shapes that does not use any UI elements:

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; }
}

然后，您将使用带有适当 ItemsPanel 和 ItemTemplate 的 ItemsControl 来可视化形状项:

You would then use an ItemsControl with an appropriate ItemsPanel and ItemTemplate to visualize the shape items:

<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>

视图模型可能会像下面这样初始化，并且在执行适当的命令方法时可以类似地添加项目:

The view model might be initialized like shown below, and items may be added similarly when an appropriate command method is executed:

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;

这篇关于以编程方式寻址在 xaml 中创建的画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！