‫Welcome back.
‫In this video, we are going to have a closer look at zemo and you might want to example is zemo is
‫a type of XML language, as you can see here at the bottom.
‫And actually I'm going to drag it even further.
‫So an example allows us to write our UI, so we don't need to go ahead and drag all the elements into
‫our UI and then adjust it in there.
‫We can do all of that in code.
‫Now you might say, Oh, I'm more of a visual guy.
‫I want to go ahead and drag the things in and I'm fine with that.
‫Well, you can do that, but you are limited to just dragging around then.
‫And with example, you can adjust a lot and you can adjust not only those things like this wrapping
‫that you have seen in the last video, you can do a lot more and we will see what data binding is,
‫what properties are, dependency properties and so forth are which are things that you can do with example
‫which allow us to create very great user interfaces which are easily maintainable.
‫So and here what you can see is this window, first of all.
‫So pretty much generally what you have is you have an opening tag and you have a closing tag.
‫If you know HTML, then you might well be familiar with that.
‫You have the corner braces and you have them closing as well.
‫So less than sign the word and then greater than sign.
‫And you see we have the same thing with the window and here as well.
‫Then one closing, you also have the slash just before the word.
‫So this is the same for grid, for window for anything else.
‫So if I want, for example, to use a button, I can go ahead and do that.
‫And if I use the greater than sign, it automatically creates the closing tag.
‫Now what I can do is I can do all the adjustments inside of the opening tag, as you can see here,
‫button, I can go ahead and for example, add content to it.
‫So there are many different properties as you can see.
‫And I'm just going to use the content property and I'm just going to use something like Click Me.
‫Now there is this button in the center, as you can see, and it says, Click me.
‫Of course we don't have a height, we don't have a width.
‫All those kind of properties are not said yet.
‫But let's say I want this button to be 50 pixels high and then I want it to be 100 pixels wide, as
‫you can see.
‫Now, this is my button that I have created.
‫Of course I could have dragged it in, but doing it an example is quite useful.
‫And now what?
‫Something that I haven't touched on too much yet.
‫And which is not going to be required until later in the course.
‫But generally what you can see here are X and L and S.
‫What that stands for is for XML namespace and XAML stands for Extensible Application Markup Language.
‫So let me add that in here.
‫Let's add a comment.
‫I'm going to use a comment like that.
‫As you can see, this is green now and this is pretty much a comment.
‫So I can write something in here, such as XAML is an extensible
‫application markup language.
‫All right.
‫Now the button, as you can see, is in here.
‫And now let's go ahead and do some more things with buttons.
‫So let's create some additional buttons.
‫Please go ahead and create another button.
‫Okay.
‫I hope you tried it.
‫Simply use the button name here or the keyword, and then go ahead and create the additional button.
‫Now, you might wonder, oh --, it's not positioning correctly.
‫So I have this button and it has the content with.
‫Hi there.
‫So now why?
‫Where is this click me button now?
‫Well, it's within the grid and it disappeared because we are using a grid so the buttons don't appear
‫on top of each other and so forth.
‫So if you tried that, you have seen it and we will look into grids later on as well.
‫But I just wanted to show you that for now.
‫All right.
‫So let's get rid of that button again.
‫Now we have this click me button and let's just run the application so we can see how it actually looks
‫in real life and how this whole thing can make our life beautiful by just clicking on it.
‫So as you can see, I can hover over it and it changes its colour and I can click on it and it makes
‫this little click animation and that's it.
‫But nothing happens when you click it and there are multiple ways to implement a click functionality
‫and we will do that later on.
‫All right.
‫So that's how we can create a button, in example.
‫Now, there are plenty of additional elements that we can access here or properties.
‫For example, we can access the font size property and increase the font size to, let's say, 32.
‫So now the button is not as wide as the text, so let's adjust the width.
‫So now it's fine again, we can see the whole text of the button.
‫But when you play around with font size and all those elements, you have to be careful that it still
‫fits in.
‫Now what you also can do is you can, instead of adding the content in here to the content property,
‫you can simply add it within the button tags.
‫So in here I'm going to say something like Click Meet, and as you can see, it's there.
‫So this is the content in between the tags is where you have your content.
‫So that's one way of doing it.
‫The other one is to simply use the content property here and assign the text like this, as we have
‫seen before.
‫Now this closing tag button is not required if you simply close the button straight away like this so
‫you can close it in a shorter manner like that.
‫So you don't need the closing tag button.
‫And another way of designing a button is the following.
‫So if you see something like that, that's totally fine as well.
‫So you create the button, tag, the closing and the opening one, and in here you have button dot and
‫then you can go ahead and adjust all the different properties that you want.
‫So as you can see, there are many different properties that we can access, for example, the font
‫size like that.
‫So I can set the font size to 72 like that, for example.
‫And another button property that I want to adjust is, let's say, the content.
‫So I can go ahead and just the content to hide there.
‫So now you see there is this huge button with a font size of 72 and it's it says Hi there.
‫So that's approach number two.
‫And there is even something else that you can do.
‫So let's adjust that button even further.
‫So let's say as the content, I don't want to have just a text of Hi there.
‫I want to go even further.
‫I want to add a rep panel.
‫Now, what a rep panel does is it simply reps all of its controls or elements next to each other going
‫from left to right.
‫So the first element is going to be, let's say, a text block.
‫And we have seen what text blocks are they?
‫A simple text and this one is going to say multi.
‫Now I need another text block and a third one.
‫So now it says multi three times.
‫But now what I can do is I can adjust the color of every single aspect so or every single text block.
‫So let's say I change that to blue, then this has the foreground.
‫So foreground is the color to foreground color, and this one will be red.
‫And finally, my last text block will have the foreground of white.
‫And now instead of multi, multi, multi, it says multi color button.
‫And now maybe we want to adjust the font size a little.
‫Let's make it smaller.
‫Also, the first button, as you can see, it's hidden because the grid only displays the last element.
‫If they're if they are not assigned in the right grid structure, which we will see later on, but let's
‫get rid of the first button that we had.
‫And now let's also set a button size.
‫So let's go ahead and use button dot width, which will be, let's say 200.
‫And a button that height, which will be 100.
‫And like that.
‫So there we are.
‫And the font size is too big to fit everything in.
‫So if we go ahead and do that with 24, now it's in there.
‫So if I run the code, I'll have a multicolor button which has multiple different text blocks in it.
‫And there we are.
‫So just so you see, there are multiple different approaches of doing it.
‫If you want to wrap multiple aspects into it, then you can use this rep panel.
‫You could even use a grid within the button and use the grid tag in order to create multiple different,
‫different controls inside of your button.
‫But that's something that we will cover later on.
‫For now, it's just important for you to understand.
‫That example allows you to do plenty of fancy stuff with your goal without having to drag and drop,
‫and also with full control over how things look and what they do.
‫Now, what I'm going to do is I'm going to comment that out and I'm going to show you how to do the
‫same thing as we have seen here with code, because we've seen it with example code, but we can also
‫do it in code behind, which means in C sharp, which we pretty much learned for the whole class so
‫far or for the whole course.
‫So let's go into the code behind.
‫As you can see, there is a dot example file which is the one that we have opened here, the main window
‫that XML and every example file has a code behind file which is a dot example dot CSS file and this
‫one is a C-sharp file, which means we have a C sharp partial class in here which we can now use in
‫order to adjust or create our UI.
‫And as you can see, it's called Main Window and it inherits from window.
‫And in here we have a method called Main Window, which is similar to the main method in our console
‫applications that we have seen so far.
‫This one is called as soon as the window is open or as soon as the application is started.
‫And as you can see here, there is initialize component called which simply initializes everything else
‫which is required for our window to run.
‫For example, it's initializes this title and it's initializes the size and so forth.
‫And now we can go ahead and write our own code in here.
‫So I'm going to show you how to create a button first.
‫So first of all, we need a grid in which we can assign that button.
‫So I'm going to call it grid, which is a new grid.
‫Then I set the content of this to my grid that will do as I simply say, the main window.
‫It should have some content, right, as we have seen in the example file.
‫So window this tag here opens and everything that is between those opening and closing tags is my so
‫pretty much this whole content here.
‫This is the content of my window.
‫And what I say here is this dot content should be the grid.
‫So we create a new grid as we have seen here.
‫So we have a grid here as well, which is a opening and closing tag of the grid here and now.
‫I set that as its content and now I can add stuff to this grid.
‫For example, I can add a button to the grid.
‫First of all, let's create that button and I'm going to call it BTN is going to be a new button.
‫Now I have that button and I can adjust its properties.
‫So let's say I want to set the font size of my button and I can simply do that way.
‫I can simply say it's going to be something like 26.
‫Now in our button, as you have seen here, we had a wrap panel, which is the content of the button.
‫So what I'm going to do is I'm going to create a wrap panel.
‫Wrap panel and I'm going to call it wrap panel is going to be a new wrap panel.
‫Now, we can add things to the wrap panel.
‫We add the wrap panel to the button and we add the bat button to the grid.
‫And the grid is already part of our content.
‫So now let's go ahead and create all the stuff that we want to add to the wrap panel and add it to that.
‫So we need a text block first.
‫And the text block, as you have seen here, is this one here.
‫So we create 1 to 3 text blocks.
‫The first one is going to be t t is going to be new text block and I simply say t t dot text.
‫So it has a text property, this text here, which is the content.
‫So for the button, the content is called content and for the text block, the text itself is called
‫text.
‫So we access the text property of our text block and we set that to multi then next we set the color.
‫So text dot foreground is going to be brushes thought and which color did I have first for the multi
‫it was blue.
‫All right so I'm going to make that blue and as you can see, brushes well text is done with brushes,
‫so the color of text is done with the brushes class.
‫So I need to use this brush as class and then access it's color.
‫So solid color brush of type brushes.
‫And next I can add that to the wrap panel.
‫So now that I have the text, I can add it to the wrap panel and I do that by accessing as children
‫and adding my text to it.
‫So that's how I add one text block and if we would run that nothing, we wouldn't see anything yet because
‫we didn't add the red panel to the button yet and neither the button to the grid.
‫But we will do that in a second.
‫So let's go ahead and adjust the text or actually adjust those three pieces again.
‫So what we do is next we adjust the text to multi color and the last one was button and now we had the
‫color red and we had the color white.
‫So I just copied and pasted those three lines because they are the same.
‫I don't need to create a new text block every time I just add the old one and then I adjust it.
‫Or adjust its values.
‫And then I add it again to the ref panel.
‫So now those three texts in my rep panel and what I can do now is I can add the rep panel.
‫To my button.
‫So button that content is going to be my wrap panel.
‫And finally grid dot children dot add.
‫And in here I add my button.
‫So that's what I was talking about.
‫So we have the grid, we have the button, we have the wrap panel.
‫And now we add those text to the red panel.
‫We add the red panel to the button, we add the button to the grid, and we added the grid to the window.
‫And as you can see, this is how you can do it with code.
‫And before we run the code, what I need to do is actually to comment the grid out as well.
‫So I.
‫Actually can only have the window.
‫So there's only the window in our main window.
‫The XML file and all the other code is within our main windowed to zamalek's, which is the code behind.
‫So this file is the code behind of our main window XAML.
‫Now there is one thing missing before we test that, and that is that I assign a new text block to my
‫text.
‫So I need to do that for both of my texts.
‫So the thing is that we well, we created text here and we initialize it with the new text block and
‫now we need to create a new text block and assign it to our text before we can add that to our wrap
‫panel.
‫So now we have that, we can run the code.
‫And we will see that we also have our multicolor button.
‫And as you can see, we have done the same thing that we have done before with Zemo, which was this
‫here, which also looks pretty simple and neat.
‫We did it with C-sharp code like that.
‫Now you can go the way you prefer, but we will mainly work with the zemo.
‫I just wanted to show you that you can whatever you do with XAML, you can do with code behind as well,
‫but sometimes it makes a lot more sense to use code behind.
‫So for example, if you want to adjust something dynamically, then code behind makes more sense.
‫So running it with C sharp or making the adjustments with C-sharp and the Zemo makes more sense when
‫you have static user interfaces.
‫And by the way, whenever you create this XAML file like we have here, what it does is it goes ahead
‫and creates this code behind file.
‫So it simply creates this code and runs it once the application starts to run.
‫Once our main window is called.
‫So it's done anyways.
‫And we do it like that with XAML, or we do it manually by creating the code.
‫So now you could of course argue, hey, there is something like this width and the side which you haven't
‫set.
‫Well, I can do that very easily here.
‫I could simply say button that width and I could set that to 150 and button that height and set it to
‫100, for example.
‫Then the button will be adjusted accordingly.
‫And as you can see now, it's spread over two lines.
‫All righty.
‫So that's Zemo and the code behind with code.
‫I know it was a long video, but we are going to see even more fancy cool WPF things in the next video.
‫So see you there.