You've just created your first user control called Login View.
Now let's design that.
Let's take a look at this code right here and then implement it so that we can actually see it.
Because right now, if we take a look at our main window examle, or if we immediately start the application,
you can see that there is no content yet, even though we have created well, our application and the
user control, there is no content.
So let's switch over to our login view example.
Let's open it up, as you can see right here and let's create some user interface elements.
First of all, one thing to mention is that you can notice that the column here for design, height
and Design width.
Let's switch over to our main window example just for a second.
Now can you see that the height and width here is set differently?
We just have height and width.
If we switch back, you can see we got the design height and the design width and that actually means
that even if we change those values here, 450 and 800, it's still only in designer time.
So it just helps us design the application.
If I set that to 400, let's say we would end up in nearly a square.
But if I start the application, well, we haven't that implemented yet.
It will still switch back to the main window to 300 times 500 and show well, these dimensions instead.
So it's only for design time.
This is why it's called design height and design width.
Now that's one of the main differences now in comparison to the main window example also.
Inside the power grid.
We will now do well the pretty much default procedure.
So now let's define our user interface.
Let's create it.
First of all, we need column and row definitions.
We have seen that a couple of times before.
So let's say grid dot column definitions.
There we go.
That's the first one.
So I will proceed here a little bit faster than usual.
Grid dot row definitions.
I'll create that one too.
You can do that on your own.
And then we want to have three columns and something like 5 or 6 rows.
We will see.
So let's say column definition.
We can do this as a self closing tag.
Come definition, let's set the width to ten.
We will duplicate that.
We set it to auto to relative sizing.
So add an asterisk.
Then we will create our first row.
So let's say row definition and we want to set the height here to ten.
And now we want to duplicate that a couple of times.
Let's see how this turns out.
Let me just bring that down and then start sizing it.
So that should be for the height.
Could be something like auto because we will set the title there, let's say log in or whatever.
And then in we have like a small space in between and afterwards we will see the button.
So for the button I could also say relative sizing for now and then maybe add some margin or something
like that.
So.
Now let's create our interface elements.
Right now I just want to show you how it looks for me.
So if you need a second, just pause the video for now.
Here, you got my grid so that you know, if you want to follow along how it looks like for me.
Awesome.
Now let's create our first label and please make sure that you position it inside of the grid.
So inside of the grid.
But after the row definitions and after the column definitions, right?
So as a sibling, we simply want to add a label.
So set the label and it says closing tag and then set the content to something fairly simple.
Let's say login.
Now let's position it, just resize that a bit and we want to set it to grid.
Dot row.
A column.
We want to set it into the first column and grid dot row.
We want to also set it into the first row.
I think that should should at least be correct.
Now I will click on label.
We'll open up our layout and then I will set the horizontal alignment to center and the vertical alignment
also to center.
So you can see those properties appearing right here.
Horizontal alignment and vertical alignment.
Then I will just scroll down to text and then set the text to a font size of 20 pixels.
So also you can see that right here, font size 20.
Great.
So this is our label.
And later on for our second view, we will copy that over.
Now next up, I want to create a button.
So create a button here.
Self-Closing tag again, set the content first of all to something like login again, right?
And then we want to position it and afterwards create the handler.
So grid dot column, we want to set it to the first column again and grid dot row should be the third
one.
There we go.
It's well, very, very big, but that doesn't matter too much.
We can change that later on.
So now the button looks very big, right?
So it's incredibly huge.
The entire gray field here is the button.
So I want to go to our row definitions and instead of saying setting it to relative sizing, I want
to, let's say, try to set it to 50, something like that.
And then maybe we want to set the row above to say 25 or something like that.
Just to add a little bit space, we can also add some margin and padding and all of that.
But that's not not too important.
Let's stick with that for now.
Later on, we can still continue on design, right?
It's really about user controls and content control.
Next up, we will set up the event handler.
And this is where for sure, like the interesting part begins, because if we now set up an event handler,
it will be in the login view example, but we need to change the content of the main window.
Examle So think about that for a second and I'll see you back in the next lecture.