TicTacToe Chapter I: The App GUI

 In this chapter we will have a look in detail at the user interface.

We'll have another look at the video of the game:

We can see we have a welcome message, then the game board with 9 positions (buttons) and below, a restart button in case the user wants to start the game from the beginning.

Now, how does it look like in the code? In our case, to create the easiest solution possible, the code in included directly in the MainPage.xaml.

This is how it looks by default:

It just show the default welcome message and the link to learn more about it (I have to admit I never opened that link, but it seems to be a quick start guide).

Now we'll have a look at how the game code looks and connects to the user interface:

The first element, is the Welcome message, this is how it is done:

                                 

It is just created with a blue frame and a label with the text.

The second element is the game board, made with a grid of 9 elements organised in 3 rows and 3 columns. Inside each grip element, we just have a button occupying the whole space (we will have a look at the logic behind them in the next post).

                             

The last element is the button to restart the game:

                             

This is all in the user interface, simple and easy. We will have a look at the actions behind the buttons in the next post!!