Let's move on with our new project.
So I just created a brand new WPF project and I called it or named it Invoice Management.
You can see that right here.
So just as usual, go ahead, open Visual Studio, select the WPF template and create a new project.
For sure.
You will see this screen in the end.
Right here we got our grid and the first thing that we will do is we will create a content control now.
So therefore, I just open up a new tag.
We're going to call that content control as we have seen before, we set a name, let's say the X name
is equal to main content inside of this main content.
When we start the application, we immediately want to show our login view where we can enter a password
and then click on the login button.
If we start the application right now, for sure we will just see that white screen because we have
no content or user control created yet.
So next up, let's create our own user control for the login view.
Right click on your project Add and then simply scroll down until you can find Window WPF, page, WPF
and User Control WPF.
And we want to create a user control.
Now, once we clicked on that, we can give it a name, let's say login view, let's hit add, let's
give it just a second to load and then we will for sure come up with our login view XML file and login
view code behind file.
Awesome.
So before we start designing this one, let's just well use our content control that we have created
in our main window Xaml.
Right?
So main window Examle main content right here.
This is the content control.
So let's go to our code behind file of our main window.
You can see that here, main window.
And inside of our constructor we now want to say that main content dot content is equals to a new login
view.
Now, if we would now start the application, we would see the login view, right?
But that one is also empty as of right now.
So we would now have to create a grid and well, all of the controls that we want to have.
So we have done it a couple of times.
So here is our grid.
We will do this well in a pretty fast forward move.
So I will simply go ahead and create some column definitions.
Then again below I will create some row definitions.
Grid row definitions.
There we go.
Then inside of the columns I will create some columns.
Let me set the width to ten for this one.
For example, I'm just getting started.
Right.
And now we want to think about what exactly we want to display.
So we want to have a log in text.
Then I want to have a login label, a password text box where I can write down the password and the
login button.
Right now I want to duplicate that column and add it two more times and that one in the middle.
That one has a relative sizing.
Great.
Now for the rows it's kind of similar.
So we create a row definition and inside here we set the height.
And first of all, we add some height at the top and then also at the bottom.
In between, we will create one relative sizing inside here, we will put the header text for the login.
Then we will create another space.
So just a little space in between, right?
Then we will create another relative sizing.
This is for the label and the password box.
Then we would create another well row for just to add some space.
Right?
Please notice that you could also add some margin in all of this, but I like doing it with rows.
And finally, we will add another relative row for the login button.
Great.
So let me repeat in that relative sizing, we will put the header text login.
He will get the label and the password box and here we will have the login button.
So make sure that you have three rows that are set to relative sizing.
Great.
So this is how it should look like right now.
Let me just resize it so that you can take a look and compare it to yours.
So make sure that you have in the end three column definitions in total, Right?
And then we have one, two, three, four, five, six, seven rows, and three of them are set to relative
sizing, just as you can see it on the screen.
Great.
And once you got that done, we can move on and really create the user interface, the new password
box and then well, add some nice and sweet functionality to it.