Welcome back and then have another stack panel, which is also in grid row two, which is also horizontally
aligned.
It has a height of 90 and a width of 800.
And it's basically those three.
Elements that I have here.
So it's a text box.
A text box is a box in which you can enter text.
And I gave it a name because I want to be able to get the value that the user entered from this text
box to then use it in my program.
So I get text from text Currency, which is the name that I gave this text box, text currency.
I gave it a certain width of 200, a height of 30, a little bit of a margin, which means it has some
space towards the left hand side, which is this 40.
So if I set that to zero, for example, you can see it goes all the way to the left.
So that's what this margin 40 does.
If I wanted to have a margin towards other directions, for example, towards the top, I would add
as a second value.
And if I want to have it towards the right hand side, you can see here I would use the third value.
And if I want to have it for the bottom, you can see I would use the last value, but as you can see,
it doesn't fit into the UI anymore, so it disappears basically.
So you have to be very careful with this, these values that you're playing around with.
So preview text input should be number validation text box.
So.
What this does is basically when somebody enters something, we want them to be limited to only enter
numbers.
So that's why we created this function called number validation text box.
So what is this number?
Validation text box?
Well, it's this function that we will need to implement later on, and you can see that we have this
text composition event args, which will be triggered and will give us information about what the user
has entered in terms of text.
And we can filter out keystrokes that are not numbers basically.
Okay.
And then vertical content alignment, well, it's centered.
The vertical alignment is towards the top and that's basically our text box.
And then I have this combo box and this combo box.
It allows me to now select out of multiple different values.
Okay, so what are the values that I want to allow it to have?
Well, that's something that I'm going to define.
In code behind.
So which I'm going to define in the core logic behind it.
So I have this name called CNB currency or CNB from currency, and I can now access CNB from currency
here.
And now I can.
Give it an item source, which will be very important because it needs to know what it can display and
we're going to cover that in a bit.
But let's first finish our main window.
So that's a combo box, right?
And we're going to look into that in a minute.
Then I have this image.
Awesome.
And that's basically just this icon that I'm using here, which is this convert icon.
That's the idea behind it.
And that's why we even needed this font awesome that we have implemented earlier by using the new.
Manage, you get packages.
Okay, so that's what we needed this font awesome for.
And then I have another combo box which allows me to select from multiple values.
Okay.
You can see each of those has certain properties that we're using and of course there are a bunch more
properties that we could use, but I'm limiting it to the ones that you can see here.
So Max drop down height, I say, okay, it shouldn't drop down to infinity, but it should be just
150 pixels high.
Okay.
And that is the other stack panel that we have here.
And then the next one that we have are the two buttons.
So we have another stack panel in Grid row three.
It has a height of 100, a width of 1000.
It's horizontally oriented, which means elements are going to be next to each other.
So not on top, but next to each other.
And what do we have in there?
Well, we have a button number one and a button number two in that stack panel.
Okay.
And now we have this button here and we give it a name.
I'm going to call this button convert.
Even though maybe something like BTN convert would be a better name for it.
So always try to use good names for it.
Then we have a height, a width and the content, which means the text that is going to be displayed
for this button is going to be convert.
And then there's this click property and that is going to be triggered once we click on the button.
And as you can see here, it says Convert click will be executed.
Now you could of course implement another method.
So let me create another method here by hand, which I'm going to call, click or my click event.
And you need to have an object sender here and you need to have routed event args.
Also when you want to use this.
Okay.
So I have this my click event now.
And now I could go ahead and go back to my click event and select my click event here.
Okay.
So now instead of the event that we had before, which was this convert click event that we generated
automatically, more or less, I have my own method.
Okay, so you can create your own methods and you can just say, okay, call this method, but you have
to be careful.
It needs a sender of type object and it needs a rerouted event for it to work.
Okay, so I'm going to get rid of this method because we're not really using it and I'm going to get
back to the convert.
Click here.
And by the way, if you're in an empty area, you can use control empty space, and then it will offer
you.
Whatever makes sense in that context.
So in this context, I could create a new event handler.
Let's do that real quick.
Double click on it.
You can see it created this convert, click one and now it created this convert.
Click one method for me.
Okay, so this is another way to create such a method.
So I'm going to get rid of it because I have this convert click method that we created before.
So basically it will give it the name of the button underscore and then click that will be the name
of this click event.
Okay, Then we have this margin, we have the foreground, which is white in this case.
So we have white text.
Basically we have font size of 20 and then that's the style that we had before where I say, okay,
I want to have a specific style.
And now you can of course go ahead and give this button a background so you can see, you can say background
and then you can make this background blue, for example.
Okay, but why is the background of this button not Alice Blue?
Well, because I'm overwriting it with this code here, so let me get rid of this code.
You can see now it is going to be Alice Blue, so you can override a functionality with a little more
complex, let's say, coloring in this case or a little more complex details.
By using this approach here where you say button dot and then whatever property you want to change and
then however you want to change it.
So I'm doing it here with the linear gradient brush once again, as I have done with my box or my border
before.
So I said border brush and then I set the color like this.
I could have done border brush here directly as well and select one of those colors.
So for example, aqua in this case.
So let's use Aqua, let's get rid of border brush.
And you can see now we have this border which has the color aqua.
But because I wanted to color to be a very specific, which means I want it to have a gradient, I needed
to use this approach here.
Okay, So that's what you can do.
You have a lot of flexibility in Xaml, a lot of power, and that is the cool thing about Xaml and WPF
in general.
You have a lot of freedom to create a UI however you want it.
Okay, so that's button number two, which is this clear button basically.
And then we have finally the last stack panel here at the bottom, which is in row four, which just
holds my logo here, which is this image where I say it has a height of 150, a width of 150.
The source is slash images, slash logo PNG, which is this images logo dot PNG file.
As you saw earlier, I created an extra folder for it and I created a well.
I added the image to that folder, but I still needed to add that item as an existing item for it to
appear.
And once I did that then it appeared and I could use and here to be careful I could use this logo dot
PNG.
Okay.
And again, the image is centered vertically as well as hunt recently and it has a certain margin towards
the left hand side of 325 pixels and that margin is well 325 and zero.
Okay.
So that is the UI.