Welcome back.
Now let's set up our layout.
Well, or get started with the layout for our application.
And we start with what you have already learned so far.
So first of all, we have an empty grid right here.
You can see that, right?
It's right here.
So what you should do is, first of all, for sure add some column definitions and row definitions.
So we use our grid dot column definitions and then we want to add our grid dot row definitions.
And that way we can create columns and rows.
Now we want to have three columns in total.
So I want to create a column definition right here and I want to make it a self-closing tag.
So I just remove that one here and then add a space.
I want to give it a width, which is set to ten.
So width set to ten so that I have a nice little well margin.
Now we want to duplicate it so that we have three columns in total and we want to set the middle column
to be relatively sized.
Great.
Now let's create some rows here.
We'll need some more.
So let's create a row definition.
And now I want to add a slash so that I automatically get the self-closing tag.
Now I want to set the height.
And again, we want to have ten pixels here.
And as I said, we need some more rows.
So in total we will need I think about six.
So let's just get started with that.
So the first one is right here.
Now the second one will be automatically or relatively sized because inside there we will have well,
this will be our big scroll view in the end where all the Todo items will be placed.
Now then we have let me think we got our.
Yeah, let's add another ten pixels space between our view with all the Todo elements and then our text
box and the text box will be something like we'll say 75.
I think that would be great.
And then we have like another ten pixels space.
We can adjust that later on and then we have 50 and then we have another ten.
Right.
There we go.
So for the 50, this is for the button.
So if we now take a look at our designer, you can see that, right?
It starts looking like the application that I have showed you.
We got our big view for the to do list elements.
Then we have a text box right here and we have a button at this one and everything in between.
There's also always some space.
You don't have to do it that way for space.
You can also use like margin and padding.
But I like using like the row and grid system.
But feel free.
Like you can just set the margin and padding for every element and if you like, you can entirely skip
creating those rows just for creating some spacing.
Cool.
So this is our main layout, right?
And now we can add our buttons or elements that you already know.
So what we want to do.
If you want to create a button and a text box.
So let's get started with the button.
Let's create a simple button right here.
No need to drag and drop or something like that.
We can simply add a button and also we can make this a self-closing tag so we don't have to do it with
an open and closing tag.
We can just like the row definition and column definition and its self closing tag, that's easier to
define.
Now let's position it and we want to position it in grid dot row.
Now we can well think about it or we can simply try it out.
I think it should be something like five that looks good.
And then we want to grid dot column and put it in another column and it should be like the first column.
There we go.
Then we want to add some content, let's say create to do.
That looks fine.
Now we got that button here.
Let me just zoom in a little bit so that you can see it a little bit better.
There we go.
Great.
Now we will add an event later on.
So don't worry too much about this.
Next up, we want to set a text box.
This is a new element for you, so you probably haven't seen it so far, but a text box is, well,
just like an HTML.
It's field where you can write down some text.
So a text box is a user interface element, which is interactive or interactable.
He can simply click on it and write down some content.
Same applies here.
We want to put it in a row.
This time we want to put it in row three and for grid dot column, we want to put it also in the first
one and we want to close it.
You can see now it's positioned right here.
That's pretty good.
But we need to adjust the colors later on so that we know, okay, yeah, I can actually click in that
or I can see a difference between white and white.
If you want to do it right now, we can also do that.
So no worries.
You simply click on the text box.
So select the text box.
And then on the right side you can see that we can set the background color.
So click on that scroll a little bit down.
It's a little bit harder for me because my display is zoomed in, so I have to scroll a lot for you
to be simpler and then we can pick a different color.
Just something very slightly different should be already enough.
We can also do a lot darker like that.
So we could create kind of a dark mode style.
And if we want to do it that way, it's fine.
We just need to scroll up and set the foreground color, which is for the text.
So if we don't do that, we would have dark text on dark background.
So select the foreground color, scroll down again, set it to white.
Now if we start it now, just take a look.
It's always good.
Or a good idea to start your application every now and then and give it a try.
Also when it comes to styling.
So let's see what we got here.
Right.
We got that button, looks good and we got a text box.
And if I write it down to do item, you can see I got dark background and white text.
So make sure if you give it a try that you achieve exactly the same.
Great.
Yeah.
And basically now we have created the main layout when it comes to the grid system.
We have our button and we have our text box which we can use to enter some text.
So now next up, we want to take care of some new elements, which is actually a scroll viewer and a
stack panel.
Well, it's not too complicated, so we simply have to add the elements and afterwards we can connect
it with some nice events and some C-sharp code to create some real to do items as.