How do I Draw a Chessboard using XAML?

Question

I am working on a project that requires me to develop an application using the Universal Windows Platform (UWP). I have no prior knowledge of developing UWP apps and XAML is completely new to me. Thankfully however, I am competent at writing in C#.

The project I am working on involves recreating the Tafl Board games - Hnefatafl, Brandubh, Tablut, etc.

Now, while I'm fairly confident in my ability to create the underlying logic for the game, I find myself bamboozled when it comes to creating the interface using XAML.

Several different chessboards will need to be rendered: 7x7, 9x9 and 11x11.

So my question is two-fold.

1. How do I create a chessboard in XAML that will scale appropriately to different window/display sizes and be able to be backed by a grid behind the scenes (ie The application can detect which square of the board is touched, etc)
2. How do I go about rendering a different board depending on the game type selected?

Apologies if this is a terrible question but googling hasn't helped me a whole lot and StackOverflow has always been a great source of information.

Answer 1

You might want to try out the RelativePanel control and use different coloured rectangles for the tiles. This would resize for different screen sizes.

Answer 2

I hope you finally got an answer to this that led you in the right direction. If you didn't here are some ideas that might narrow your research terms and get your going. I'd give you working samples but youd did mention it is for a school project :).

1. Using a listbox and manupulating the base style can be a relatively good way to go, and very reusable. This also fulfills your requirement of knowing the tile currently selected as the listbox already handles that. I used this technique for a Sudoku board that had alternating colors for the different regions.
2. Create a UserControl with properties for the number of columns and rows you need for your board and then dynamically add the rows and columns to the grid. If your game model has a list of tiles and each tile has a column and row property that can be mapped to the column and row indices of the grid, you could potentially bind to it quite easily.
3. Create a custom control that handles the columns, rows and other aspects of the board itself in c# and the rendering in XAML. I personally shy away from this just because the existing controls are already so flexible that with enough ingenuity you can create what you need with out of the box controls.