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!!
In this Tutorial we will create multiplatform applications using C#, Xamarin.Forms and Visual Studio. No previous experience is required, the level will be very basic, but basic knowledge of C# and Visual Studio is required.
We are starting with a very basic application, the TicTacToe game.
This is the video of how it will look, of course, there will be other iterations to improve this version.
This is the git repository where we will have all the code, that will be improving with the different iterations.
I will divide the tutorial in chapters to explain the different parts.
The goal of this version is creating something focused in learning and understanding, later on we will think about how to improve it, make it more efficient and add more options.
As this is the first version, it has only 2 files to work with. They will be explained in the chapter 1 and 2 respectively. I will also provide the code in a git repository in case someone wants to download it and play a bit with it.
We will see the first file in the next chapter "The User Interface".
In the meantime, I recommend installing Visual Studio and create the first mobile app project and play a bit with the default project.
In case you don't know which kind of project create, this is the options I have chosen:
Once created, the project will look like this:
We can see how our project is divided in a project for Android, a project for iOS and a common part that will be used for both platforms.
When executing, the default project will look like this:
In the next chapter we will have a look at the default classes and the creation of the new user interface for the game.
