Working with Row and Column Definitions in XAML

I will assume that you have installed the tools for working like Visual Studio 2012 ( or 2013 ) and that you’re on Windows 8 at least ( or 8.1 ) .

In this workshop we will be working with a big part for coding on Windows Phone which is the XAML code .  The XAML code helps us to handle everything that exists on the application like Buttons , TextBlocks , Images .

Here’s an example of XAML code that uses a Grid :

During this Workshop we learn together how to use all the space available in the screen of the Windows Phone and devide it into 4 parts . This will help us in developping any application to organize our contents .

Go Ahead and create a New Project , then follow these steps :

In the main Grid which is Content Panel add these lines :

With these lines we ‘ve made our Grid with 2 rows and 2 columns , we will see now how we can have access to each “box” of the Grid .

We will add a Button now with this code , I recommend you to type this code by yourself to experience the XAML , don’t preform a Drag and Drop :

You can notice that I gave the Button a name as Btn1 which is one of the best practises to organize our code behind and have accessto multiple Buttons .

Content will contain the content of the Button , we used 1 here .

Foreground is for the color of the content of the Button , I gave it here a StaticResource which is PhoneAccentBrush , this will help us to get the color of the theme on the Windows Phone ( you can check this if you have a device )

The important part here is Grid.Column and Grid.Row , I’ve given the Button a specific place in our Grid , it will be in the (0,0) position.

We will add now 3 other Buttons and change their position as usual :

We will work now on the code behind for each event  , we are trying to show a number for every Button clicked , we will add this code for each event now :

You can save your work and run the application now , you will see that on every click on a Button you will have its number shown . This helps us to learn how to devide the Grid and use multiple Button in one Grid using the XAMl code .