The easiest way to draw a tile map in WPF

Question

In my “game” I will draw a small map (ie 10x10 fields). Each field will be a wall or ground. Depending on the answers to this question, the tiles will be either PNG images or simple colored rectangles.

What is your best recommended way to draw such a map in WPF? I want it to be as simple as possible , because part of the GUI of this project is not very important, I just want it to be displayed in the center of the window.

Ideas I have:

• Canvas + placing multiple Rectangle as children
• The bitmap displayed by the engine displayed by the graphical interface
• External library

Answer 1

WPF is not as prone to drawing as Windows Forms. WPF is more content oriented.

The best way to draw is to create a map from existing WPF elements. For example, you can use Grid or UniformGrid or even Canvas to host your content. You can programmatically add Image and Rectangle to the map without worrying about any drawing code.

Here is an example:

 UniformGrid grid = new UniformGrid(); grid.Columns = 10; grid.Rows = 10; grid.Width = columnWidth * 10; grid.Height = rowHeight * 10; for (int x = 0; x < 10; x++) { for (int y = 0; y < 10; y++) { if (fields[x, y] is SomeImage) { Image img = new Image(); img.Source = someImageSource; grid.Children.Add(img); } else { Rectangle rect = new Rectangle(); rect.Fill = someColor; grid.Children.Add(rect); } } } Canvas.SetLeft(grid, (canvas.Width - grid.Width) / 2); Canvas.SetTop(grid, (canvas.Height - grid.Height) / 2); canvas.Children.Add(grid); 

You probably won’t be able to use it as is, but you can fill in the missing pieces.

I recently did a project like this, using Canvas to place TextBlock s, Line and Button s. It is efficient and simple, much more than I expected.

Answer 2

I would say that using XAML, if the user interface is simple and you are looking for ease of programming, you can use the built-in XMAL constructor in VS or Blend to draw the user interface. Other options are to use DirectX or OpenGL, which are much more powerful but have a steep learning curve.