Welcome back.
As you saw earlier, we want to create this.
You are here.
So it's very similar to what we had before.
We have a box which is red.
We also have this pinkish text here at the top.
We don't have just one text edit field.
We don't have combo boxes here.
We have two added fields, no combo boxes, but we still have two buttons here at the bottom, similar
to what we had here.
The text of the buttons is slightly different and then we have no icon here.
Well, actually we do have it.
Okay.
And then we have this grid here at the bottom.
Okay.
So how do we get that?
Well, I'm just going to paste it in from my website because I'm going to go through the code.
You could, of course, try to build up everything manually because basically you can cheat and you
can learn from this.
Okay.
So I will give you a little bit of an instruction on how to do it.
So what you can see here is we had one, two, three, four, five rows.
Okay?
So the currency converter text is one converted currency, including this other text is this row two.
Then we have this row in which we have this box here, a row in which we have these texts here, and
then we have the row with the icon.
And now if you compare that to.
This project here, you can see that we have one, two, three, four, five rows again.
Okay, The sizes might be a little different, but you will still need five rows.
Okay.
So you will need to do this grid and grid row definitions once again.
So let's do that real quick.
And I'm going to say, instead of having a label in there, I want to have a grid.
So here grid and a bunch of grid row definitions.
So this way I can define grids in there.
Now I have five grids starting with grid zero or row zero, better set grid dot row zero, grid dot
row one, grid that row two and so forth.
Now the values will differ.
So it's 6100.
Then here at 6201 50.
Okay.
So these are going to be the sizes that I want to have.
Okay.
Now, the rest I'm just going to copy and paste in and explain every single piece of it.
So I'm going to put that underneath the grid row definitions.
Okay.
So basically you say I want to have a grid type of format inside of this UI and there are different
type of containers.
This is just one grid is one type of container.
There are other ones such as Stack panel, which we are using a lot and this is the whole code here.
So we have border.
Which is basically.
This border here.
Okay.
This part here, that's the border that I want to have.
And I have a rectangle, which is a rectangle that is inside of this border.
So you can very quickly just get rid of this border and then rerun your application.
And you will see that I have some errors in there because I'm using elements that I have not put into.
So for example, delete button.
Edit button.
Okay.
Yeah.
Let's quickly add those before we test the application.
So.
If you paste code in, you always have to be careful, right?
Because if you look at it, I'm using this delete button here and I'm using this edit button, which
are those two little icons that you can see here.
So we need to add them to our project.
So these are the icons that I want to use.
And by the way, we also have this money PNG.
You can use any images that you want.
You can just search for images that you like and then use those and I'm going to drag them into my images
folder.
Okay.
So now one would expect that those arrows disappear.
Let me do slash images edit button as well as slash images.
Slash delete button, but the error still is there.
And that has to do with this not being fully.
Add it to the project.
Okay, So a better way or a safe way would be to say existing item.
And then you go to images and you select all files and then you can select the items that you want to
have in the project.
Now I'm just going to say add now.
And after I did that, if I save my project.
It should find those images.
And in my case, well, I had to do it once again individually.
So you can also go ahead and go to images, add existing item, and then do it individually so that
they are really accepted by your IDE that they are existing inside of your source.
Okay, So this is the source of the image, but we cannot run the application still because we still
have some new errors that we created because we are now or I am now using properties which are dependent
on certain events and certain functions that we don't have in our code behind.
So you need to make sure that you understand what code behind this.
By the way, because I'm here referring to these kind of keywords which I have explained in the first
part of the series.
So once again, make sure to watch the first part.
If you don't understand everything that I'm saying as of now.
Okay, so we have code behind and we have XML and HTML is the UI and code behind is basically the logic
behind that code.
Okay.
And here you can have events which are triggered in certain circumstances.
For example, once I click on the save button, something will be executed.
In this case, the button save click method will be executed if you don't have this method yet.
You can go ahead and say go to definition and that will then generate this new method for you.
Okay, so just copy the code from the blog if you don't want to type everything in here, But I would
really recommend to just copy and paste the code in because going or doing all of that manually would
take forever.
And that's why I don't want to bore you with all of that.
But basically we are using a bunch of stack panels as we did last time, right?
And inside of those stack panels we have buttons, for example, those two buttons here and they have
a certain height, they have a certain width.
We gave them a name, I have a content for them, which means I give them the text that appears here
for this button.
The content says Save.
Then this other content says cancel.
So for the other button, which is the button cancel.
But then now we have to of course also add a button, cancel click event.
So let me also go to definition here and that will then generate a definition for me.
And by the way, if it doesn't do that for you automatically, you need to create this method manually.
You can also just type it in.
It's basic and you could even give it a different name and then you can just change the name in here.
So whatever name you want to assign there.
Okay.
Foreground is the color of the text.
Font size is the size of the text.
And then we have this style static rounded button button round which is inside of our app dot HTML.
So I defined it in here with this style property.
So if you recall this from the last video, that's how we created this rounded appearance for the button
so that it looks rounded.
It's not a square button, but it's a rounded button.
Okay.
And then what else is new?
Well.
As you see inside of this border, which is, by the way, in grid row one this time and not in grid
row two, because on top of that, in grid row zero, we have this stack panel.
So you can see you can really put the code wherever you want.
If you work with grid rows, as long as you say at which grid row a specific item should be.
In this case, our stack panel should be inside of the grid row zero and it should say that there is
a label where there should be a label in there which basically just says Currency Master, which is
this text that you can see here at the top.
Okay?
So that's the content of it basically.
And it's all inside of the stack panel.
Then we have a stack panel at row one, which is at the same position as our border that we created.
So this block here and we have text elements in there to labels as well as to text fields in which we
can enter or text boxes in which we can enter text.
Okay, So this is row one, Okay?
And this is also row one.
So we have a border with two stacked panels in row one.
And I say that this tech panel should have two labels in it.
And if we look at it, it's those two labels.
So enter amount and currency name.
And they are.
If we look at it, orientation horizontal.
So they are next to each other.
Okay.
So they are put next to each other.
And then this stack panel here are those two text boxes.
So text box with the name, text amount and text currency name.
I gave them a certain width and height and maybe I should put it in a more readable way so you can compare
the code if you need to.
Okay, so what is new is the following.
So.
We have this tech panel with the two buttons.
That's nothing new.
But what is relevant is this number validation box.
As you see, we have this preview input text and we have to do.
A similar event.
And that is further down.
We have this selected cells changed, which is inside of our data grid.
Okay.
So this is something if we run the application, it will say this method doesn't exist at that point
because well, we haven't created it.
You can start the application, but it won't work correctly as of now.
Okay.
Window does not contain a definition for currency.
Selected cells changed.
Okay.
That's because we need to.
Go to definition.
In order to create such an event, we will implement it later on.
But for now we just have it.
And we could run the application now and at least this error shouldn't appear anymore.
Okay.
And now we can go to the currency master and you can see now we will actually have all of the appearance,
even though there is no functionality, it doesn't do anything.
It doesn't work.