[英]programmatically addressing a canvas created in xaml
I am creating an application in WPF using the MVVM approach. 我正在使用MVVM方法在WPF中创建一个应用程序。 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:
我对这个话题还很陌生,我正在寻找如何实现以下目标的指针:我已经在XAML中创建了画布,如下所示:
<canvas name = "myCanvas">
...
</canvas>
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. 我也在XAML中添加了一个按钮,我想使用该按钮在鼠标单击时在程序上绘制(编程)一些基本形状(线,矩形等)。 Since I'm using the MVVM approach, the button's command has to be bound to a method, as follows:
由于我使用的是MVVM方法,因此必须将按钮的命令绑定到一种方法,如下所示:
<Button name="myButton" Command="{Binding myMethod, Mode=OneWay}">
...
</Button>
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. 我使绑定本身可以正常工作,并使用C#创建了图形和形状,但是我不知道如何将形状放在XAML中创建的画布上。 How can I address the canvas pre-made in XAML from my method?
如何通过我的方法处理XAML中预制的画布? How do I go about this?
我该怎么办?
Edit: 编辑:
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.
因此,如果我的输入有3个类型A的元素,我想创建3个矩形并将它们显示在画布上。 Later I want to make them clickable and display some information about them on click.
稍后,我想使它们可单击,并在单击时显示有关它们的一些信息。 MVVM is a set requirement for me.
MVVM是我的既定要求。
In your view model you should have a representation of the shapes that does not use any UI elements: 在视图模型中,您应该具有不使用任何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; }
}
You would then use an ItemsControl with an appropriate ItemsPanel
and ItemTemplate
to visualize the shape items: 然后,您可以将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>
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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.