I can answer in detail just on WPF. I hope you can use these ideas for Universal Application as well.
For the game field control, use
Canvas. This control allows to position UI elements at arbitrary positions, so they can overlap. You can simply put 8x8 elements of the type
Rectangle to depict a board.
But I would suggest somewhat better alternative. The elements you put on
Canvas themselves could be of the elements of the type
Canvas, which allows for complex vector-graphics structure. So, you can draw the board with different decorative patterns, several alternative graphical designs for boards and figures, to give the users the design choice, and a lot more.
Draw these elements in some vector graphical editors. Not every editor will be useful, but only the one which can save graphics as XAML. I never saw anything better than open-source InkScape:
Inkscape - Wikipedia, the free encyclopedia[
^],
Home | Inkscape[
^].
With InkScape, you can create your graphical designs for the board and figures in SVG. Store it all in your Revision Control Database as SVG, because this is the most universal and compact data format. For importing this data to your project, export it to XAML. You will need separate files for the board and each chess figure. Besides, some implementations use highlight of the field of the board, in one-three designs showing different phases. If you plan to do it, two, also picture those separate fields, for "white" and "black" board fields.
After exporting to XAML, you will need to do a little extra work: remove each
name attribute from all elements. One way to do so is using any text editor with Regular Expression replacement. Then you can copy all the XAML graphic files into one or more dictionaries,
ResourceDictionary in your project. They you would need to give each design element (top-level
Canvas). To allow each such
Canvas element to work in
ResourceDictionary, you would need to add the unique attribute
Key to each (with default namespace prefix, it would be
x:Key, where the namespace prefix "x" comes from the namespace definition
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml", which is generated automatically each time you add XAML from the item template in Visual Studio).
You need to take care of consistent scaling for all elements. Each figure should be of the size of the whole board field, with consistent padding between the figure and the field square boundaries. Use the same relative size for all figures and additional board fields. You don't need to care about the size of the whole board: vector graphic is arbitrarily scaled, and you need only the coordinates of all figures relative to the whole board when you position the figure (and those extra fields for highlighting). The position of each would be easily calculated as X * W/8, Y * H/8 relative to the board (I hope my notation is self-explained).
So, all the graphics of your game will be reduced to putting elements on top of the board
Canvas at different positions, which is itself is put on the main instance of
Canvas. Don't insert one canvas as the child of another one. All your XAML
Canvas elements, including the image of the board, should be children on only one (transparent) top-level
Canvas element.
One more step: make that top-level
Canvas element a children of another element of the type
Viewbox:
Viewbox Class (System.Windows.Controls)[
^].
Make the whole application resizeable.
Viewbox will automatically scale the whole graphics to the size of the outer container element.
The elements, children of
Canvas, are moved relative to its parent using the functions
Canvas.SetLeft and
Canvas.SetTop:
Canvas.SetLeft Method (UIElement, Double) (System.Windows.Controls)[
^],
Canvas.SetTop Method (UIElement, Double) (System.Windows.Controls)[
^].
Also, you may need to learn WPF drag-n-drop. However, I would suggest to avoid it. Instead, the move could be done in two more logical phases. First, the player clicks on the figure. If it's a valid figure, it or its field (or both) is highlighted. (That's why I suggested highlighted elements; you may also need highlighted variants for all figures.) The the player clicks on the field to move. If this field is valid for a move, you move the figure and finalize the move. The move can be cancelled after figure selection, but not after the final field click. (I hope you are going to implement optional redo for the whole all moves of the game.)
But if you still want to implement drag-n-drop, you have to learn it, too:
Drag and Drop Overview[
^].
That's all I described nearly 100% of the graphics work for the game. I hope I can leave the game logic for your home exercise. :-)
[EDIT]
I almost forgot: a complete code sample for using SVG to XAML vector graphics in WPF application is demonstrated in my article
Practical Sound Recorder with Sound Activation.
See "WindowAbout.xaml" in source code and the directory "Resource". Of course, resource dictionary can in in a separate file, and the graphic can be scale the way I explained above.
—SA
Submit an article or tip