It's time to set up our second user control.
And as I said, for demonstration purposes, we want to name it invoice view so that we can show some
fake invoice data.
It's really just we're just mocking around, right?
So just for demonstrating, we'll call it invoice data, but we will just show an example.
Hello world text.
You can for sure extend that and work on it.
But as I said, we're talking about these kind of views and controls.
So right click on your project, let's hit Add then new item search for control again at the top right
corner and then pick the user control and we want to name it Invoice view hit add again and one more
time we will now get an invoice view example and it's correlated code behind file.
So we don't want to start over again and write the column definitions and so on.
So we will simply go to our login view example, take our grid right here.
We can simply take the entire grid copy it over to our invoice view example and replace the grid right
here.
Now we have something to start that should speed up nearly everything so we can simply say that we have
our label here and instead of please log in, we can say.
It's a mock invoice data.
Now let's add a text block.
We don't need that button.
Just keep in mind, I want to position it at the same place.
Column one, row three.
Keep that in mind, and then I will set up a text block self-closing tag and we can set the text property
of it to be any kind of demonstration text.
Let's say Hello world.
You can also put in any Lorem ipsum or some kind of data.
If you have some time and you want to give it a try, please go ahead and use some elements or create
a nice text for for mocking.
Right.
It's up to you.
So text equals to world and now we want to position it.
So we want to say grid row was equals to three and the column is equals to one.
It should be enough for demonstration purposes.
So our invoice view is now created.
We can now go to our log in view Zamalek's.
So where we got our log in button, keep in mind inside of our log in view, we got the login button
right.
If we click on that button, it will for sure as well.
Call the event in the associated Log in view, which is its code behind file right now here, inside
that log in button.
What we now have to do is we have to grab our window and then change the content inside of the window
again.
Close to what we have done in the main window code behind file when we start our application.
Inside of our button event handler Now pay attention.
We have to grab the window, which is our main window.
Right now.
We only have one window, so we simply can say window equals to and then call the window class dot get
window, and then simply call this.
As I said, right now we only have one window when we start the application, like this window that
you can see is actually.
What you can see here highlighted as this in that moment.
So now we have our window.
Let's take our window.
Let's set the content and see that this is a content control, right?
We want to set it to equals to new.
And now this time, we don't want to create a new login view.
No.
Instead, now we want to switch to our invoice view so we can create an invoice view.
Take a look at your application.
Let's start it.
And basically what we did was just adjusting the content of the main window by assigning a new user
control to the content property.
So please log in.
We click on log in and we can now see our second view.
Awesome.
That's it, basically.
And this is how you can change between views and how you or the user can control what he wants to see.
Well, you can control it from your code, right?
And he can control it by clicking on UI elements and all of that.
Great.
So this is very, very important because as I said, in most scenarios, you don't have a single view.
No.
Your application consists out of multiple different views, each with a different purpose.
So if you like, please take your time and start designing your application and well, extend it if
you like.
You can also share it with us.
So whatever you come up with in the end, go ahead and share it with us if you like.
But you can definitely also skip that design part and all of this and just move on to the next part.
But let me sum that up real quick.
Just a minute to recap.
So we created an application, a WPF application with a single main window.
Okay?
This is what we got by default.
And then we created two user controls, a login view control or user control, and an invoice view user
control.
Each of those has its own code behind file and its own Xaml representation to create the UI.
So inside of the login view, we created this one here with the login button and inside of our invoice
view we created like just another well, we replaced the button with another text, but we have two
different views now and then.
The only thing that we in the end did was switching the content of our main window content control that
we have defined right here.
If we go to our main window Examle, we have that content control right here.
We set that here in the main window inside of the constructor.
So when we start our application, basically, and we also set it from our login button clicked where
we simply adjusted the content of our main window by grabbing the main window and then simply setting
its content again.
So this is how you can create and show different views.