WPF - C# - Creating and setting image coordinates in code - behind

Question

I currently work on WPF application according to my AI interest. I wrote a Uniform Cost Search algorithm (pathfinding) and want to present it in graphical way. Path should be found and show on a graph which could be adjusted by user.

I'm quite new in WPF technology, I worked more with WinForms and now have a problem with creating and managing graphical elements.

In other words - I want to give opportunity to click on data grid and create your own node (sth like place on a map) which is represented by a picture, when you have a few nodes you can choose two of them and connect them to make a connection, finally you can select your start and end point and algorithm will show the shortest path (color the suitable connections).

That's it.

Image with interface

I started with adding a CreateNode method which gets click's coordinates and create a point with right X and Y. Now there is a problem with creating an image in that specific place.

I read some questions on Stack and tried to write something with Image and BitmapImge classes but still don't know how to place it in specific place. I read about manipulating margins but aren't there any easier solutions?

Here's part of that image loading code:

        public void CreateNode(Node n)
        {
        Point point = new Point(n.X, n.Y);

        Image node = new Image();
        BitmapImage logo = new BitmapImage();
        logo.BeginInit();
        logo.UriSource = new Uri("point.png");
        logo.CacheOption = BitmapCacheOption.OnLoad;
        logo.EndInit();

        node.Source = logo;
        }

If someone has any ideas how to create these methods in case of graphics I will really aprreciate that.

Thanks in advance

Paweł

EDIT: I was said to create new topic for my code problem so here is that here

Answer 1

Moving my comment to an answer to provide a little more information.

With the positioning, I'd recommend watching this video on advanced XAML techniques . He uses a custom ItemsControl and Canvas to bind the longitude and latitude of delivery trucks to show as graphics on a map. I think some of his techniques could work in your situation (or give you further ideas). I've linked to the a timestamp at the start of the relevant section.

The source code for the relevant demo is available here . See Events - 2014 TechEd Europe - DEV-B311 XAML Techniques - Demo05

The main difference from what you're doing to the video is that he uses Paths where you want to use images. You'd need to change the DataTemplates in App.xaml.cs to use images.

The video assumes some knowledge of MVVM, so if that's new to you, it's probably worth checking out a tutorial. You can find some recommendations in the answers to this question . I'd also recommend one on Rachel Lim's Blog . I found her tutorials very useful.

The first linked tutorials on WPF look like they will be useful to you. In addition to the basics it includes using images in DataTemplates .