‫Welcome back.
‫In this video, we are going to create a pizza toppings application which will allow us to add toppings
‫to our pizza whenever would we want to get it delivered.
‫So when we order a pizza, we want to add or we could add a salami, we could add mushrooms or extra
‫mozzarella.
‫And if we add them all, as you can see, there's add all here at the top is activated and it has three
‫states, as you can see, and it has a yes state or a true state.
‫Then it has an empty state and a false state.
‫All right.
‫So that's what we're going to create.
‫And yeah, let's go ahead.
‫First of all, we need to get some more space here, and I'm going to use a Stack panel instead of a
‫grid.
‫Again, as you can see, like the Stack panel, it's just because the grid is a lot more effort to set
‫up if you want to have something, let's say, rather basic.
‫And then here I want to have a label, just a little text, which is going to have a font weight of
‫heavy, which is bold.
‫So it's going to have a weight of bold.
‫Then I want to call it pizza toppings.
‫And next I need to have a checkbox.
‫So I'm going to create a new checkbox which is going to have the name of KB standing for CheckBox All
‫Toppings and this one is going to have this three state.
‫True.
‫So what that means is that it's connected to the other checkboxes that we will have.
‫All right.
‫So it's three state, which means it can have three different states.
‫So the one is true, the other one is false.
‫And the last one is it's in between.
‫So it can have a third state.
‫So that's why we have this three state.
‫True.
‫Then we can add a checked and an unchecked method.
‫So I'm going to create a new event handler and actually I want to do it manually.
‫So I'm going to create my own event handler in here.
‫So let's go ahead and do that.
‫You already know how to create an event handler so you can try it yourself.
‫Please go ahead and try to create an event handler.
‫All right, so this one is going to be a private void.
‫CB All checked, changed, so this will just be the checkbox, all checked, changed, was called and
‫here I need an object center and a rooted event arguments.
‫I call it E.
‫And then here is the magic that I want to happen once this element is checked.
‫But for now I don't have that.
‫So I'm just going to select the CB all checked changed.
‫So that's going to be called once the object is checked and what is going to happen, what is unchecked
‫is well, it's actually going to be the same method that I want to call.
‫So I will need to write the method in a specific way so that it works for both ways.
‫All right.
‫So I'm going to use all check change here as well.
‫And as a text, it should just say something like add all.
‫And if we go here, we can see there's this pizza toppings label and then we have this checkbox.
‫Now that's our bigger checkbox.
‫So now I want to have a stack panel below it, which will have the three other checkboxes.
‫So let's create a new Stack panel and in here I want to have my checkbox with a name and I'm going to
‫call it CheckBox Salami.
‫Then I add the checked property here and I'm going to create my own event again.
‫So Private Void CB and I'm going to call it single checked changed.
‫It's going to be object, I'm going to call it sender.
‫And then finally we have our rooted event args going to call it E, so nothing new here.
‫Pretty much the same thing.
‫Only we change the name here.
‫So this one should be called if this top one is called.
‫So this top checkbox is clicked and the other one should be called each time another checkbox is checked.
‫So we have three more checkboxes which are in this stack panel and if one of those is checked, then
‫I want to call this method.
‫So I'm going to call this single checked changed when it's checked and also when is unchecked.
‫So.
‫CB Single checked, changed.
‫So now we have this checkbox.
‫And I want to add a little text in there as well.
‫So let's go ahead and add a text into that checkbox, which will be a text block.
‫So text block and I'm going to add something like salami and why do I do this?
‫Why do I do it in this way so that I create a text block inside and all of those kind of things?
‫Why didn't I just add the content?
‫Well, that's because I want to add something beautiful in here.
‫I want to add a foreground which is read and which is going to be bold.
‫So font weight should be bold equals bold.
‫And then I want to say something like spicy so that we are as you can see, salami is spicy now.
‫Now the text block is well just below our add all.
‫Okay.
‫So if you want to adjust it manually and add some more spice to it, then you have to use this approach
‫where you actually create an object within an object or a control within a control.
‫So a text block control within the checkbox control.
‫But now I'm going to create the other checkboxes in a rather simple manner.
‫So the new checkbox is just going to have the name of checkbox mush rooms and it's going to be checked
‫actually.
‫The rest we can copy.
‫So I'm going to check this or copy this.
‫And now it also needs to have a text and I'm going to call it mushrooms.
‫And now I copy this line here and paste it here and it's just going to get a different name, which
‫is going to be mozzarella.
‫Extra mozzarella.
‫Or maybe we just call it mozzarella.
‫Mozzarella.
‫All right.
‫And of course, the text should be changed to mozzarella as well.
‫And now what I don't like is the fact that all the four of them are just stacked on top of each other
‫without me understanding that this at all is going to add all of those.
‫Because if we just simply create a little margin here, it will already appear very differently.
‫So something like five pixels or maybe even ten pixels, as you can see now, it has a margin.
‫There's a little distance here to this add all and now it looks like all of those belong to the add
‫all checkbox.
‫And that's pretty cool.
‫That's exactly what I wanted.
‫All right.
‫So now our XAML file is set up.
‫Let's go into the code behind and implement those methods, because we have assigned them or we have
‫declared them, but there's nothing happening in there yet, and we can change that.
‫So if we want to go ahead and add a bull, new Val, new val is gonna be well it's going to be the result
‫of CB all toppings dot is checked is true.
‫So if that is true, if this statement here is true, then the new value is going to be true.
‫Otherwise it's going to be false.
‫Now what I want to set up is my salami is checked.
‫I want to set that to the new vol.
‫The same goes for the mushrooms and the mozzarella.
‫So it's checked.
‫It's going to be new vol and cb cb mushrooms is checked this new vol.
‫So why do we need this new wall or new wall thing?
‫Well, new vol is simply going to set it to true or set it to false if this all toppings is checked.
‫So if somebody presses this all toppings so that one here at all, then they should either be all activated
‫or all deactivated.
‫And that's what I create with this well, this approach here.
‫Now, the next one is our single checked changed.
‫And in here I want to set the ES checked to NULL because if we check one of those, it's either active
‫or inactive.
‫So all toppings should be usually deactivated.
‫If we check on one except two were activated and we activate the third one, then are all should also
‫be activated.
‫So in here we just check if cb salami is checked is true and if KB mozzarella.
‫Is checked is true.
‫And finally, if CV mushrooms this checked is true.
‫Now, of course, we need to have another surrounding bracket and now we can do whatever we want in
‫here.
‫And I'm just going to say CB all toppings is checked.
‫Should be true.
‫So if all of them are checked, so mushroom mozzarella and so forth, if those are checked then ah,
‫all toppings should be checked as well.
‫And then if all of them are false, then it should be deactivated.
‫So I'm just going to copy that here and I'm going to replace all of those trues with false because it
‫goes both ways, right?
‫So either all are activated or all all are deactivated in both cases.
‫I want to set my checkbox all toppings correctly.
‫All right.
‫So now we can run this and that we are at all.
‫We click on it, all of them are activated.
‫Then if I click again, this is the tri state that I was talking about.
‫So this is our where is it?
‫The checkbox?
‫Is three state.
‫Yeah, there it is.
‫Then if I deactivate a spicy mushroom.
‫Well, if I deactivate all, as you can see, I'll go to deactivate mode.
‫If I add some, add all goes to a tri state or a three state.
‫Pretty much.
‫All right.
‫So as you can see, very simple.
‫This is how you can use your checkboxes.
‫And by the way, you don't have to do it as I did here, that you give it all the same method.
‫You could have created very unique methods for all of them.
‫You could create a message box which informs the user about something.
‫Yeah, please.
‫Yeah.
‫Don't forget to check this as well or something like thanks for checking this checkbox because we really
‫appreciate your feedback or whatever you can think of.
‫Okay, great.
‫So that's checkboxes and yeah, in the next video we are going to go ahead with the next topic.
‫So see you there.