编程解决在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?

编辑：

这样做的一点是，我要生成基于数据的形状进行可视化。所以，如果我输入了，比方说，A型的3个要素，我要创建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; }
}

您会再使用一个ItemsControl与适当的 ItemsPanel 和的ItemTemplate 以可视化的形状项目：

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