Welcome back.
This basically allows us to make a button rounded.
Okay.
And there are, as I said, multiple different ways to do that.
We could have done a lot of the code directly here in our main window example, but this now allows
us to basically make all of our button rounded by using this key called button round for the specific
buttons that we want to use.
So here we just say we want to use a style for that button and that will be static resource button round.
So now we can just use that same style for any button that we have in our application and we will make
that button rounded as well.
So now I basically said that my button should be rounded with this App.xaml so I defined it this way.
Okay, so let's look at all of the stack panels here.
So let me zoom out a little bit because I'm going to go through what we have here in terms of code and
what it does with our UI, because this is the UI that I want you to have.
And as you can see, I have it now based on all of my example code here.
So we had this row which created this background basically here.
So this border that we have, right this reddish or this purple red border or pink red border that we
have here.
And then we have a stack panel here in row zero, which is our currency converter text.
Then we have another stack panel, which is basically this converted currency text.
And you can see that it's in row one and the grid row one, the rest is the same as it was with the
other label.
But then we have not only one label, which is this one with the font size of 20 and the default color
of black.
But we have another label here as well, and the stack panel is.
Oriented vertically.
So now we will have two labels which are on top of each other.
So this one label, this converted currency label is just text.
And this other label that I have here has a name.
So I have defined a name here called Label Currency, which stands for Label Currency.
And now I can access this label currency via my code.
So let's do that real quick.
Let's go to our main window XML file and you can see here that we have a namespace and then we have
this public partial class.
So it's just partial because it consists of multiple parts, multiple files so to speak.
So it consists basically of the Xaml file as well as this main window file.
So we have two physical files which combined create one class and that's why it's partial.
And then we have this main window, public main window, which is the starting point of our main window.
So this is where the code starts, so to speak.
And first of all, it initializes all of the components inside of our main window, the XML file.
So basically it tries to display what we can see in here.
So now let me run some code here directly and access this currency.
And you can see I can now change properties of it.
So I could have created this whole UI in.
Code behind.
So in CSS code.
But the idea behind splitting this up is that you can have a specialist who creates the UI in HTML and
then you have the specialist who creates the logic in code behind.
So in C-sharp code, it doesn't have to be the same person.
It can of course be the same person, but you could have specialists who take care of different aspects
of your application.
And now I can access this currency and change its value.
So, for example, I can change its content to be Hello World.
Okay, now let's run our application and see if it actually will display Hello World.
And we still have build errors because, well, it complains that there are certain click methods and
event methods that I'm using which are not existing yet.
Okay, let's take care of those.
So before we run the application and the point that I should try to make is going to be clearer, let's
take care of the methods that are still missing.
So for example, when you click a button, an event is triggered.
And in order for that event to execute something well, you need to implement it or you need to at least
have the button functionality.
So this event inside of your main Xaml, you can see there is only this main window function.
Now if I click on this convert, click.
Double click on it.
Now, if I double click on this convert, click and right click and then basically go to definition.
So I click to go to definition.
What it does is it basically creates this definition for me.
So now there is this method.
So this is our convert click method, which is a private method.
It needs a sender, which is basically the button that you click on and then you have the routed event
argument.
So the events will be then executed.
So here what you can do is you can run some code, so let's just do it very simple.
Let's click on Convert, Click and now change the text of our currency to Hello button clicker.
Okay, but that's just one of the buttons that we have.
We also have this clear button and it also has a functionality here.
So let's go to that definition as well and you will see that it will be created for us as well.
And then we have this source that I don't have yet.
So let me add this source to my project as well, and I'm going to create an images folder in my project.
So here inside of my currency converter, let me create a new folder which I'm going to call images
and inside of images.
Let's go to the.
A file explorer to see this images folder here I'm going to drag in my image.
So I have this particular logo PNG, which is my tutorials logo.
That you can see here, and I want to use it in my project.
Okay.
So now I will have this images logo in here and let me see.
Let's add an existing item, which will be.
All files.
Let's add this logo to my project and now you can see the error disappears and our project accepts this.
And then I have something else here.
So I have this preview, text input number, validation, text box.
Let me go to definition and that will also create a definition for me.
So this is a method.
You could have created this method manually as well, of course, and then you could have assigned it
here directly.
So preview text input, you could have done it this way as well, but I kept it super simple.
I was lazy and that's how I did it.
Okay.
Now let me run the application again.
And now at this time, it actually works.
So you can see the text was defined when we executed our program to be Hello World.
Now let's click this convert button and you can see it says Hello button Clicker.
And why is that?
Well, because if we look at it here, we accessed currency dot content and said Hello world.
And that was when we started the application in our main window method.
And then we have this convert click button functionality and we said that our currency content should
be changed to Hello button clicker.
Now you can of course say once we click on clear, we will make the text go empty Gobir.
So let's make it go empty.
Content says Hello world convert clear you can see now clear clears it convert does.
Well, what did we have defined?
It sets the content to be something so you can now see that you have control over your UI using the
code behind.
So this one main window, the Xaml dot CSS file, which is the code behind file, and you can now play
around with it.
Now you can play around with UI elements that you gave a name via code behind.
So that's what we did.
By going here we have this label, Where is it?
It's this label here, let me just click on it and then we can see that it's this currency label, so
it has a name, and now I can go ahead and basically change its content programmatically.
And I want to change the content programmatically because I want to get the value that the user entered
here.
And then I want to know which currency he wants to convert to another currency.
And then we click on the button, convert it, then it should change this labels text to be the result
of however much.
Well.
Be the value of the other currency.
Okay, so.
I jumped around a little bit.
Let's go back to the stack panels and look at them.
So we have this stack panel panel here, which is in our grid row two, which is the same as our box.
Okay, So we created this border here before, which created this red box that we have here and.
In there.
I have actually three labels.
In Grid row two and the Stack panel is oriented horizontally, so elements are next to each other.
And then I have this horizontal alignment.
It's centered and I have the label number one, which is basically this enter amount content.
As you can see here, it has a certain margin.
I say I want to have a certain distance towards the left hand side of 35.
That's what this 35 is.
And then I have another label here with a margin of 110.
And the last label, which is this one with a margin of 130.
So they have a certain distance to each other.
And basically, these are the three labels.
So here this enter amount from and to.