Welcome to this lecture.
Now let's take a look at the challenge from the last video.
So we want to recreate what I have shown you, and therefore, we want to go ahead and add some more
rows and columns to create the outer spacing, for example.
Therefore, we simply add two new columns and we set the width for the last 1 to 10 pixels on the right
side.
You can see that right here.
And for the first one, we also want to set the width to ten.
You can see that right here on the left side.
Now we have added a new column in the middle so that we can separate the buttons later on.
So in the middle, I will add another column with the width set to ten.
On the left side, we had two columns and on the right side we also had two big columns.
So I will add just another one so that it will equal.
Now let me scroll down to our row definitions and do basically the same.
We add two new rows in total and set the height for the first and the last 1 to 10.
Well, in that way we really get some nice margin padding and spacing using the grid system.
Now afterwards we simply move our first label, which says something like title of app one column to
the right.
So just like this title of app now afterwards we added or I have added a new or another label and therefore
you can open up the toolbox if you like.
So click on View, open up the toolbox, and then you can simply not drag and drop, but double click
so that it will get added here as a new kind of empty label, right?
We only have the content property set here.
Let's write down sample text.
And then we for sure need to position it so we say grid.
Dot row.
Equals to.
Let's simply do it that way.
Grid row two and then grid dot column equals to two two.
There we go.
Now we have the sample text.
And then I wanted you to add some buttons.
So we do basically the same.
We open up the toolbox, double click on the button.
So this is a new element that you will haven't seen before.
I guess now the content was for the first button A and we want to position it also in grid dot row.
This time we want to put it in the third row and we want to put it in the grid dot column in the second
column for the first button.
So A and we simply duplicate that button and move it one column to the right and then just sorry, two
columns to the right because we have that empty space here and then content, we will set that to be,
for example.
Great.
Now finally, you have noticed probably that those buttons were much smaller or had less height.
So therefore we want to go to our row definition where our buttons are inside, right?
So in there we want to say those have a height of 50 pixels, for example.
Great.
So this is basically just what I've created in the last video or this is how you can create the user
interface that you have seen in the challenge.
And it's totally fine if you came up with something different, because as I said, the only purpose
is that you get comfortable with Xaml, maybe creating something new and getting used to position stuff
using grids, columns and rows.
Great.
Now wouldn't it be really cool and nice if the title and the sample text would have a different width,
not only limited to one column, but maybe for all three columns right here.
So if the text, for example, increases by a lot, if I add an A very long a string here, it would
be great if it would go over into the third and fourth column.
So in the next lesson you will learn about the column span and row span.
So let me just remove that and let's get started.