C# - WPF - 使用 XAML 元素连接代码隐藏 [英] C# - WPF - Connecting code-behind with XAML elements

问题描述

这个问题和上一个有点关系这里

This question is a little connected with the previous one here

通常我会编写一个应用程序，它允许用户创建自己的图形，然后获取最短路径.我被图形表示卡住了.

Generally I write an application which allows user to create his own graph and then get the shortest path. I got stucked with graphical representation.

我很少使用 XAML，也不知道如何将代码隐藏中的方法与 XAML 代码连接起来.

I've rarely used XAML and have no idea how to connect methods in code-behind with XAML code.

我在 Canvas 中获得了鼠标点击的坐标，效果很好

I get the coordinates of mouse click in Canvas and it works great

private void mouseDoubleClick(object sender, MouseButtonEventArgs e)
    {

        int x = (int)e.GetPosition(dataCanvas).X;
        int y = (int)e.GetPosition(dataCanvas).Y;
        currentMap.CreateNodes(x, y, "ExampleNode");
        targetText.Text = x.ToString() + "X " + y.ToString() + "Y "; // Just for debugging
    }

这是 CreateNode 定义:

Here is the CreateNode definition:

public void CreateNodes(int x, int y, string name)
    {
        Node node = new Node(name);

        this.places.Add(node);

        node.X = x;
        node.Y = y;

        GUI.CreateNode(node);
    }

问题依旧存在

//GUI class
    public static void CreateNode(Node n)
    {
        Point point = new Point(n.X, n.Y);
    }

此方法应该在特定的 (x, y) 位置绘制图像.我有坐标，必须以某种方式在那里创建一个图像.正如我所说，我不擅长使用 XAML，也不知道如何将此代码与在 XAML 中调整画布连接起来以创建和操作图像.

This method should draw the image in the specific (x, y) place. I have the coordinates and have to somehow create an image there. As I said I'm not fluence with using XAML and don't know how to connect this code with adjusting canvas in XAML to create and manipulate an image.

我在这里有一个链接

但我不确定如何在我的项目中使用它.我是否应该创建一个 ObservableCollection 然后使用链接中的代码...?

but I'm not sure how to use it in my project. Am I supposed to create an ObservableCollection and then use the code from the link...?

任何帮助将不胜感激.

这里有界面:这里

推荐答案

首先，除非有更多的功能，否则你的 Node 类是多余的.如果您的目标只是为图形创建一组点以显示(和连接)，您可能需要创建一个 ObservableCollection 并构建自定义图形控件.

First off, unless there is going to be more functionality to it, your Node class is redundant. If your goal is to just create a set of points for the graph to display (and connect) you would want to create an ObservableCollection<Point> and build a custom graphing control.

为什么是 ObservableCollection?

它是一个集合(将其视为一个列表)，它实现了 INotifyPropertyChanged() 并让消费者知道其元素已更改.

It is a collection (think of it as a list) that implements INotifyPropertyChanged() and lets the consumers know that its elements have changed.

至于绘图，我强烈建议您查看 OxyPlot.它是一个跨平台的绘图库，可以消除从头开始创建自己的图形控件的痛苦.

As for graphing, I would strongly reccomend you take a look at OxyPlot. It is a cross-platform plotting library, that will remove the pain of creating your own graphing controls from scratch.

如果出于某种原因，您仍然想开发自己的图形控件，请查看此处.通过谷歌搜索draw graph in WPF C#，您还可以找到大量在线教程.

If, for some reason, you still want to develop your own graphing control, take a look here. There is also plenty of tutorials online that you will find by googling draw graph in WPF C#.

如何将 XAML 与代码连接起来?

现在，就您而言，这里可能有多种解决方案.我想到的最简单的方法是使用 PolyLine类并将它的 Points 属性绑定到您的 ObservableCollection.

Now, in your case, there could be a multitude of solutions here. The easiest that comes to my mind is using a PolyLine class and binding it's Points property to your ObservableCollection<Point>.

可以这样做:

<Polyline Points="{Binding YourCollectionName}" Stroke="SomeColor" StrokeThickness="SomeNumber" />

如果您有更多问题，请随时通过在下面添加评论来提问:)

If you have more questions, feel free to ask by adding a comment below :)

应要求提供 MVVM 的快速说明:

MVVM 是一种设计模式.目标是将您的程序基本上分为三个主要部分:View、ViewModel 和 Model.

MVVM is a design pattern. The goal is to basically split your program into three main parts: View, ViewModel and Model.

模型 - 这将是包含所有业务和验证逻辑的数据模型.

Model - that is going to be your Data Model with all the business and validation logic.

ViewModel - 它是 View 和 Model 之间的中介，通过调用影响 Model 并在 View 中调用.值得注意的是，VM 不知道 View.

ViewModel - It is sort of a mediator between the View and the Model, by calling methods that influence the Model and are invoked in the View. It's worth noting, that the VM doesn't know about the View.

视图 - 它基本上是带有所有按钮和内容的 GUI.它具有与 VM 组件的绑定，因此它可以将信息传入和传出.通过定义DataContext，将VM分配给View.

View - It's basically your GUI with all the buttons and stuff. It has bindings to the VM components so it can take information in and out of it. The VM is assigned to the View by defining DataContext.

为什么要使用 MVVM?

尽管学习和应用有时可能具有挑战性，但它为您提供了对单元测试有很大帮助的分离.

Even though it might be challenging to learn and even to apply at times, it provides you with the separation that greatly helps in Unit Testing.

现在大多数 WPF 应用程序都使用 MVVM，因此值得学习(其中一些特性非常有用且应用起来很有趣！)

Most WPF apps nowadays are going with MVVM, thus it's worth learning (and some of it's traits are really useful and fun to apply!)

这篇关于C# - WPF - 使用 XAML 元素连接代码隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！