Welcome back.
I'm just going to create a new stack panel.
All right.
And inside of this stack panel, I would like to have a label.
Okay, so let's add the content of the label and let's say the content should be Hello World.
All right.
If I do that, you can see that here at the top hand side, top left hand side we have Hello world inside
of this label, inside of this tech panel label.
What I can do, of course, is I can say that it should be, for example, centered or I could assign
a certain width to it and all of that.
So I can do that on multiple levels.
So, for example, on the stack panel level itself, I can say that the stack panel should take the
whole width available or basically the whole width that we are also using here for our border already.
And actually the border is at 800.
We could make it even wider because then this red part would look even better because then it would
get some margins and all of that.
So you can of course, add margins on the level of the border itself.
So I could go ahead and say add a margin of, for example, ten pixels.
So now we have a margin towards all directions, but I can also manipulate this UI to do it via the
Stack panel.
So I could just say the stack panel should have a width of 1000.
So now suddenly we have enough space towards the side because the stack panel itself takes a lot of
space.
It's very wide.
I can also define a certain height for it.
I can just say, okay, it should have the height of, let's say 50 pixels.
So you can see that it is less than the available space because the available space is 60 pixels.
Why is that?
Well, because we defined that in that row definition.
So how does that stack panel know that it is in the first row?
We never told it.
Well, that's because.
By default.
It just takes the first one that's available.
But we can of course define it specifically.
So I could just say the grid row should be, for example, zero, or I could say it should be three.
So now you see it positions it in the three grid row and the fourth grid row, so to speak.
Or I could put it at four.
You can see.
So I have a bunch of flexibility and at the same time I can force it to go to a specific position in
my row.
Okay.
So I'm going to put it at the top.
I'm going to have the width of 1000 pretty wide content here.
And I'm going to say that the orientation of whatever is inside of my stack panel should be horizontal.
Okay, so let's do that.
And now let's copy that label and put it in there twice.
So you can see now we have two labels and they are stacked next to each other.
Why are they next to each other?
Well, because I set the orientation to be horizontal.
Now let's make it vertical instead.
And you will see that now those two elements are put on top of each other because the orientation for
that stack panel, which stacks elements that are inside of it on top or next to each other, depending
on the orientation that you define here.
And that's exactly what happens.
But because I want it to be horizontally, I'm just going to use horizontal here as the orientation.
And actually, I don't even need a second label.
I'm just going to stay with one label.
All right.
Now the content says Hello World, but it should actually say currency converter because that's what
this program is all about.
So currency converter.
And now I can go ahead and give it a little more details.
So I want to make the width of the label 100%, which is in our case, 1000.
So now you can see it takes the whole width and the text is not centered.
This currency converter text is not centered.
How do I center it?
Well, I can use something called horizontal content alignment because I want to align the content horizontally
towards the center.
So I set this property called horizontal content alignment to the value of center.
And now I can do the same thing for the vertical.
Content alignment.
I can also set that to be centered because now you can see the text is now centered.
It's pretty small, but basically now I centered the text and if I don't do that, you can see that
it will go towards the.
Top here by default.
Okay.
If I enter center here, however, then it will center the text.
Okay, so let's look at the other properties that are relevant here.
For example, how about a font size?
So let's use 25 for example.
You can see the text is significantly larger and I would like to use the same color that we have used
before, which is this pink color.
Okay, So I'm going to assign that color, but unfortunately it doesn't accept the property color for
label.
Why is that?
Well, because label has its own.
Way of handling colors, and that is to use for ground.
Okay, so there's this property called for ground.
And if I assign that now, I can assign a color to it.
And you can see now the text has this color that I wanted, this pink color.
All right.
And that is how you can add stack panels inside of a row and basically define UI elements in it, change
the properties around, and you could now play around with whatever element you want to have in there.
So you could even drag it from here.
So for example, you can take a checkbox and you can drag it in here and you can see now it's currently
automatically you see inside of our grid number two or actually number one, let's see grid row and
this one in the 81, it's automatically in there.
You can see because it just has this 33 pixel margin towards the top of this particular.
Row.
Okay.
So I will however use stack panel.
So basically stack panels are containers which in our case are inside of the container of a grid row,
which is again inside of our window.
So I'm going to use a bunch of stack panels here.
So let me just paste them in here because otherwise, well, it would take forever for me to.
Add all of those lines in here.
So let me do that real quick.
And let's look at them.
You can, of course, find the code, as I said, on my website.
And so this was this currency converter stack panel that we had before and everything underneath it
was added.
So you can see.
I have this stack panel.
With a content of converted currency.
Okay.
And as you see, once I want to see a prediction of how my UI will look like, I get this invalid markup.
So as it seems I have an error in my code that I need to fix first.
How do I fix an error?
Well, first of all, I need to see where the error is and beautifully enough or luckily enough it displays
it here.
So it says For image, awesome has not been found.
So the type was not found.
Verify that you are not missing an assembly reference and that all referenced assemblies have been built.
So as it seems we are missing an assembly and in this case it's the font awesome assembly that we're
missing.
And in order to add this font, awesome, what we need to do is we need to manage NuGet packages.
So now you might recall why we needed that.
So you need to open up the solution Explorer.
You can go to view Solution Explorer or press Ctrl, Alt L if you're on Windows and then click on the
project.
Here.
You can also go on this level.
I'm just going to manage new get packages here.
And then you can browse for font.
Awesome.
And you will find this font awesome WPF by cherry and you can install this for this particular project.
Okay, so I'm going to install font awesome here.
And now after a while it will be installed.
It opens up this new GitHub window and well, I still have errors for is not defined.
So inside of my main window Xaml not all is good yet.
But at least this.
Font awesome error should disappear soon.
So let me save my project.
And now once you have added this new get, you need to add the namespace.
So you go to show potential fixes here and it will say add this namespace called schemas font awesome
icons.
Okay.
And now let's scroll all the way up.
You will see that it will have added this new namespace for us, which is this one here.
So XML and s so XML namespace for which is schemas font awesome i o icons.
Okay.
So let me scroll out a little bit and you can see that at least this problem disappeared and now we
can see something in our application again.
So you can see that this is the UI that we now created with all of those.
Different stack panels and I'm going to go over those stack panels to show you explicitly what is happening
and what we are doing here in code.
Okay, now let's fix the other issues that we have here.
So let me scroll through it and see what else I have here.
And change the format up a little bit so I can read it a little better here.
So.
I can see that it says the style that I'm using, static resource button round does not exist.
So what I wanted is I want it to have rounded buttons and in order to get rounded buttons, there are
multiple ways.
And I'm going to show you one way to get around this issue.
So let's say a designer gives you the design material and now you need to make your application look
exactly the same.
And there you can't just tell him, oh, well, I don't know how to do that in code or I don't know
how to do that in WPF.
I can't create this UI.
Why don't we use squared buttons?
Because it's so much easier.
Well, that might be okay for your designer, but maybe not for the customer.
So definitely you will need to understand how to create rounded buttons or in general how to adjust
the UI so that it looks like you want it.
So let's fix this style error real quick.
And in order to do that, we need to go to our app dot HTML file and we can add application resources
to it.
So here I'm going to add those lines of code here.
So I'm adding a style called button round and the target type.
So the UI element type that I want to target with this is called button because I want buttons to look
differently because this is the UI element that I want to change.
And you can see by adding this code now I have rounded buttons and we can see better If I zoom in a
little, you can see now the buttons are rounded.
But now let's look at this a little more here.
So we are setting.
Something.
What are we setting?
Well, we're setting the property template, and we set a specific value and we set the control template,
which is the target type again here being button.
And what we want to have in there is a border.
So we say we want to have a corner radius of five and the background should be template binding background.
What is template binding does is it links the value of a property in a control template to be the value
of another property on the template control.
So you can see it uses this template binding here for a source property.
That's exactly what we do.
We want to change the background.
So here background of our border and we say the border thickness should be 0.5 and.
And looking back at our app.xaml.
We say that the content should be horizontally aligned towards the center and vertically aligned towards
the center as well.
So that's what we want to have for the border.
So again, you can check out the content presenter It displays the content of a content control.