C# - WPF - Connecting code-behind with XAML elements

Question

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.

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

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
    }

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

But problem is still here

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

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.

I was given a link here

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

Any help would be appreciated.

Here you have the interface: here

Answer 1

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.

Why ObservableCollection?

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

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.

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

How to connect XAML with code?

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

That could be done as such:

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

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

On request, quick explanation of MVVM:

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

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.

Why use 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.

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