Welcome back.
First of all, I'm going to change some things up, so I'm going to change the title of this window.
And let me close it here.
I'm going to change it from main window.
As you can see here at the top, it says main window to currency converter.
And I'm going to size it.
So size to content, I'm going to say it should be width and height and the window start up location
should be center owner.
So you can also center screen if you want to always open this at the center of the screen.
So let's just test this and let's run the application and you will see that it opens up directly in
the center of the screen, even though, as you can see, there is no content whatsoever in here.
And now because of this size to content with width and height.
Well, as we have no content, it's so small, even though I have defined a height and width here.
So you can see that there are properties which can override other properties.
Even though I have hardcoded the height and width here, this size to content has basically overridden
it and now our compiler ignores this height and width that I have defined here.
So if I get rid of this again and run it again, you will see that it will be back at this height and
width.
But if you only want it to be as big as the content inside of it, you can use this size to content
within height.
Okay, because well, I don't have any content in there, but as soon as I do have content in there,
I want to make sure that my application is displaying the window in the right size.
And it doesn't look weird because of some predefined values that I have at the top level of my application
of my window.
In this case, it's not really the application, but it's specifically this window because you can see
we are inside of the window in which we have a bunch of XML namespaces which we use.
So they basically allow us to use all of those properties in the functionality that you have seen.
So these are namespaces that we can use for our program.
And then we have this grid and a grid has rows and columns and now we're going to use rows and columns
here.
And in order to use rows, you need to add row definitions.
Okay.
So let me just paste in some row definitions that I have prepared here.
So here, grid row definition and I say the first row should have a height of 62nd, one of 83rd of
one, 54th of 105th of 150.
So if you check it out here.
You can see that we now have all of those rows.
Okay.
We don't have a width yet, but we have a height for each of those rows.
So now a row can have.
Columns, okay.
And we can define what we want to have inside of such a column.
All right.
So now inside of this grid here at the bottom, I would like to add content and I'm going to start with
a border.
So I'm going to add a border here.
And you can see I created this border, which creates this reddish background color and some things
are happening in there.
So let me go over it step by step.
So let me just create this rectangle first.
So I'm creating a rectangle inside of this border.
So I'm creating a new element inside of my UI, which is a border, and I position it at the grid row
two.
So you can see this is grid row zero.
This is grid row one, and this 150 here is grid row two, which is this one.
So we have these row definitions and this one is 012.
So now in two I'm adding this border here and I say it should have a width of 800 and it should have
a corner radius of ten as well as a border thickness of five.
So the border is five pixels thick.
And then I have this rectangle inside of our grid row two, which basically is filled with a color.
So this is how you can see this reddish color here.
But it's not just red color, but it's this linear gradient brush.
So I'm just saying I would like to have this gradient color here.
And in order to use a gradient color, you use this linear gradient brush class and you have a starting
point which is at zero zero and an ending point which is at one zero.
So basically saying at the very right hand side, so the zero zero is at the very left side and this
one zero is at the very right hand side.
So at the most right point inside of the element that we are inside of, which is inside of this rectangle.
Okay.
And then I have two gradient stops here.
That's how you can create such a gradient.
So I have a gradient stop, which is the first one, which is the start point.
So this is this pinkish color which has this hexadecimal color value of EC 2075.
And I don't want to have an offset here.
So what is an offset?
Well, if you want to know such a thing, then you can always check out the documentation.
So you can see there is this class called Gradient Stop and there is this property called Offset and
gets the location of the gradient stop with the gradient vector.
So it is a double and it says it's the relative location of this gradient stop.
Along the gradient vector, the default value is zero zero.
So if you want to know more about every single property that I'm using, you can always check out the
documentation.
So here you see, I'm using the offset property inside of the gradient stop class.
So let's look at it and let's go back to our main example here.
You can see I'm inside of gradient stop and I'm referring to the offset property.
If I want to know more about this end point or the start point, I can also go to the documentation
and I can search for End Point.
And then.
You can see that there are different end points that you can work with.
And the specific one that I'm looking at is the linear gradient brush.
So you can go to linear gradient brush and then you have the linear gradient brush classes here.
As you can see, there are different ones.
So for example, this class in drawing 2D and then the one in Windows Media.
So these are two different classes with the same name.
So the second one inside of Windows Media is the one that we are using, as you can see here, because
it has this field called End Point property and start point property, and it has these properties called
End Point and Start Point.
So these are the ones that we are working with.
So if you want to know more about the start point, for example, you can just click on linear gradient
brush dot start point property and then you will find out more of it.
You can see here, this is the start point and this is the end point if it's one one because I took
one zero, it will be at the top right hand side.
And yeah, basically this is how you can find out more about all of those properties because I'm going
to rush through many of them.
Otherwise this video will take forever.
Okay, so we have this gradient stop, which is basically what we want to have at the end point and
it will be this red color.
So I'm creating this gradient here.
Okay?
But as we saw earlier, it wasn't just this rectangle that I had, but I also had a border here.
So I want to add that border back.
So let me add the border brush back to it.
Which is going to be this border brush.
So now we have this slightly rounded border here on the sides.
You can barely see it, but well, basically, we created a new border here.
And this creates this very special design here.
So you can see you have a bunch of freedom when it comes to adjusting your UI.
Okay, So I have this rectangle and then I'm using a border dot border brush.
And again, you could, of course, check out border border brush here.
So border dot border brush to get to learn more about the different settings and in general everything
that you need to know about it in the documentation.
Now you might say, wow, this is a lot of work just to get this square in there.
Well, of course the square could have been simpler.
I didn't have to use a brush.
I just could have used a color here.
But I wanted to make it look a little better and follow the color theme of my design of my website.
Okay.
So then I would like to have a bunch more content inside of it, and I'm just going to use a bunch of
stack panels.
Okay, So let's look at what a stack panel is.