1 00:00:00,330 --> 00:00:01,170 ‫Welcome back. 2 00:00:01,200 --> 00:00:07,830 ‫In this video, we are going to create a pizza toppings application which will allow us to add toppings 3 00:00:07,830 --> 00:00:11,040 ‫to our pizza whenever would we want to get it delivered. 4 00:00:11,040 --> 00:00:17,670 ‫So when we order a pizza, we want to add or we could add a salami, we could add mushrooms or extra 5 00:00:17,670 --> 00:00:18,570 ‫mozzarella. 6 00:00:18,570 --> 00:00:24,480 ‫And if we add them all, as you can see, there's add all here at the top is activated and it has three 7 00:00:24,480 --> 00:00:29,280 ‫states, as you can see, and it has a yes state or a true state. 8 00:00:29,280 --> 00:00:33,420 ‫Then it has an empty state and a false state. 9 00:00:33,750 --> 00:00:34,080 ‫All right. 10 00:00:34,080 --> 00:00:35,730 ‫So that's what we're going to create. 11 00:00:35,730 --> 00:00:38,010 ‫And yeah, let's go ahead. 12 00:00:38,580 --> 00:00:45,480 ‫First of all, we need to get some more space here, and I'm going to use a Stack panel instead of a 13 00:00:45,480 --> 00:00:45,690 ‫grid. 14 00:00:45,690 --> 00:00:52,020 ‫Again, as you can see, like the Stack panel, it's just because the grid is a lot more effort to set 15 00:00:52,020 --> 00:00:55,770 ‫up if you want to have something, let's say, rather basic. 16 00:00:56,400 --> 00:01:03,090 ‫And then here I want to have a label, just a little text, which is going to have a font weight of 17 00:01:03,120 --> 00:01:05,310 ‫heavy, which is bold. 18 00:01:05,310 --> 00:01:07,830 ‫So it's going to have a weight of bold. 19 00:01:08,430 --> 00:01:12,990 ‫Then I want to call it pizza toppings. 20 00:01:14,280 --> 00:01:18,840 ‫And next I need to have a checkbox. 21 00:01:18,840 --> 00:01:27,270 ‫So I'm going to create a new checkbox which is going to have the name of KB standing for CheckBox All 22 00:01:27,300 --> 00:01:34,440 ‫Toppings and this one is going to have this three state. 23 00:01:34,770 --> 00:01:35,370 ‫True. 24 00:01:35,370 --> 00:01:41,580 ‫So what that means is that it's connected to the other checkboxes that we will have. 25 00:01:41,950 --> 00:01:42,510 ‫All right. 26 00:01:42,810 --> 00:01:46,800 ‫So it's three state, which means it can have three different states. 27 00:01:46,800 --> 00:01:49,200 ‫So the one is true, the other one is false. 28 00:01:49,200 --> 00:01:51,450 ‫And the last one is it's in between. 29 00:01:51,450 --> 00:01:53,400 ‫So it can have a third state. 30 00:01:53,400 --> 00:01:55,290 ‫So that's why we have this three state. 31 00:01:55,290 --> 00:01:55,860 ‫True. 32 00:01:56,340 --> 00:02:01,800 ‫Then we can add a checked and an unchecked method. 33 00:02:01,800 --> 00:02:07,470 ‫So I'm going to create a new event handler and actually I want to do it manually. 34 00:02:07,470 --> 00:02:11,250 ‫So I'm going to create my own event handler in here. 35 00:02:11,460 --> 00:02:13,200 ‫So let's go ahead and do that. 36 00:02:13,440 --> 00:02:17,730 ‫You already know how to create an event handler so you can try it yourself. 37 00:02:17,730 --> 00:02:20,550 ‫Please go ahead and try to create an event handler. 38 00:02:20,550 --> 00:02:24,720 ‫All right, so this one is going to be a private void. 39 00:02:24,800 --> 00:02:33,150 ‫CB All checked, changed, so this will just be the checkbox, all checked, changed, was called and 40 00:02:33,270 --> 00:02:39,270 ‫here I need an object center and a rooted event arguments. 41 00:02:39,270 --> 00:02:40,530 ‫I call it E. 42 00:02:40,830 --> 00:02:45,570 ‫And then here is the magic that I want to happen once this element is checked. 43 00:02:45,570 --> 00:02:46,950 ‫But for now I don't have that. 44 00:02:46,950 --> 00:02:52,110 ‫So I'm just going to select the CB all checked changed. 45 00:02:52,110 --> 00:02:57,960 ‫So that's going to be called once the object is checked and what is going to happen, what is unchecked 46 00:02:57,960 --> 00:03:02,400 ‫is well, it's actually going to be the same method that I want to call. 47 00:03:02,400 --> 00:03:08,070 ‫So I will need to write the method in a specific way so that it works for both ways. 48 00:03:08,670 --> 00:03:09,060 ‫All right. 49 00:03:09,060 --> 00:03:12,720 ‫So I'm going to use all check change here as well. 50 00:03:12,930 --> 00:03:16,800 ‫And as a text, it should just say something like add all. 51 00:03:17,220 --> 00:03:22,410 ‫And if we go here, we can see there's this pizza toppings label and then we have this checkbox. 52 00:03:22,560 --> 00:03:24,850 ‫Now that's our bigger checkbox. 53 00:03:24,850 --> 00:03:31,380 ‫So now I want to have a stack panel below it, which will have the three other checkboxes. 54 00:03:31,380 --> 00:03:43,020 ‫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 55 00:03:43,020 --> 00:03:44,730 ‫call it CheckBox Salami. 56 00:03:45,510 --> 00:03:52,260 ‫Then I add the checked property here and I'm going to create my own event again. 57 00:03:52,260 --> 00:04:04,530 ‫So Private Void CB and I'm going to call it single checked changed. 58 00:04:05,400 --> 00:04:08,490 ‫It's going to be object, I'm going to call it sender. 59 00:04:08,490 --> 00:04:15,630 ‫And then finally we have our rooted event args going to call it E, so nothing new here. 60 00:04:15,630 --> 00:04:16,590 ‫Pretty much the same thing. 61 00:04:16,590 --> 00:04:18,300 ‫Only we change the name here. 62 00:04:18,960 --> 00:04:24,000 ‫So this one should be called if this top one is called. 63 00:04:24,000 --> 00:04:29,550 ‫So this top checkbox is clicked and the other one should be called each time another checkbox is checked. 64 00:04:29,550 --> 00:04:35,160 ‫So we have three more checkboxes which are in this stack panel and if one of those is checked, then 65 00:04:35,160 --> 00:04:36,300 ‫I want to call this method. 66 00:04:36,300 --> 00:04:43,110 ‫So I'm going to call this single checked changed when it's checked and also when is unchecked. 67 00:04:43,950 --> 00:04:44,430 ‫So. 68 00:04:44,460 --> 00:04:46,680 ‫CB Single checked, changed. 69 00:04:46,860 --> 00:04:48,540 ‫So now we have this checkbox. 70 00:04:49,600 --> 00:04:53,110 ‫And I want to add a little text in there as well. 71 00:04:53,110 --> 00:04:59,350 ‫So let's go ahead and add a text into that checkbox, which will be a text block. 72 00:04:59,470 --> 00:05:10,090 ‫So text block and I'm going to add something like salami and why do I do this? 73 00:05:10,390 --> 00:05:15,520 ‫Why do I do it in this way so that I create a text block inside and all of those kind of things? 74 00:05:15,520 --> 00:05:17,290 ‫Why didn't I just add the content? 75 00:05:17,320 --> 00:05:21,610 ‫Well, that's because I want to add something beautiful in here. 76 00:05:21,610 --> 00:05:28,690 ‫I want to add a foreground which is read and which is going to be bold. 77 00:05:28,690 --> 00:05:35,680 ‫So font weight should be bold equals bold. 78 00:05:35,680 --> 00:05:43,900 ‫And then I want to say something like spicy so that we are as you can see, salami is spicy now. 79 00:05:44,110 --> 00:05:48,580 ‫Now the text block is well just below our add all. 80 00:05:49,590 --> 00:05:49,860 ‫Okay. 81 00:05:50,160 --> 00:05:58,230 ‫So if you want to adjust it manually and add some more spice to it, then you have to use this approach 82 00:05:58,230 --> 00:06:04,230 ‫where you actually create an object within an object or a control within a control. 83 00:06:04,230 --> 00:06:07,320 ‫So a text block control within the checkbox control. 84 00:06:07,590 --> 00:06:12,600 ‫But now I'm going to create the other checkboxes in a rather simple manner. 85 00:06:12,600 --> 00:06:23,270 ‫So the new checkbox is just going to have the name of checkbox mush rooms and it's going to be checked 86 00:06:23,280 --> 00:06:24,120 ‫actually. 87 00:06:24,210 --> 00:06:25,380 ‫The rest we can copy. 88 00:06:25,380 --> 00:06:27,780 ‫So I'm going to check this or copy this. 89 00:06:30,330 --> 00:06:36,570 ‫And now it also needs to have a text and I'm going to call it mushrooms. 90 00:06:37,650 --> 00:06:45,120 ‫And now I copy this line here and paste it here and it's just going to get a different name, which 91 00:06:45,120 --> 00:06:48,630 ‫is going to be mozzarella. 92 00:06:48,630 --> 00:06:50,070 ‫Extra mozzarella. 93 00:06:50,070 --> 00:06:52,890 ‫Or maybe we just call it mozzarella. 94 00:06:53,910 --> 00:06:55,620 ‫Mozzarella. 95 00:06:56,340 --> 00:06:56,970 ‫All right. 96 00:06:57,660 --> 00:07:01,620 ‫And of course, the text should be changed to mozzarella as well. 97 00:07:02,340 --> 00:07:07,620 ‫And now what I don't like is the fact that all the four of them are just stacked on top of each other 98 00:07:07,620 --> 00:07:11,250 ‫without me understanding that this at all is going to add all of those. 99 00:07:11,250 --> 00:07:17,700 ‫Because if we just simply create a little margin here, it will already appear very differently. 100 00:07:17,700 --> 00:07:23,880 ‫So something like five pixels or maybe even ten pixels, as you can see now, it has a margin. 101 00:07:24,240 --> 00:07:29,820 ‫There's a little distance here to this add all and now it looks like all of those belong to the add 102 00:07:29,820 --> 00:07:31,230 ‫all checkbox. 103 00:07:31,230 --> 00:07:32,340 ‫And that's pretty cool. 104 00:07:32,370 --> 00:07:33,930 ‫That's exactly what I wanted. 105 00:07:34,650 --> 00:07:35,040 ‫All right. 106 00:07:35,040 --> 00:07:37,710 ‫So now our XAML file is set up. 107 00:07:37,710 --> 00:07:43,020 ‫Let's go into the code behind and implement those methods, because we have assigned them or we have 108 00:07:43,020 --> 00:07:47,520 ‫declared them, but there's nothing happening in there yet, and we can change that. 109 00:07:47,790 --> 00:08:00,330 ‫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 110 00:08:00,330 --> 00:08:07,590 ‫of CB all toppings dot is checked is true. 111 00:08:07,770 --> 00:08:13,220 ‫So if that is true, if this statement here is true, then the new value is going to be true. 112 00:08:13,230 --> 00:08:14,820 ‫Otherwise it's going to be false. 113 00:08:15,870 --> 00:08:22,920 ‫Now what I want to set up is my salami is checked. 114 00:08:24,030 --> 00:08:25,710 ‫I want to set that to the new vol. 115 00:08:27,120 --> 00:08:30,180 ‫The same goes for the mushrooms and the mozzarella. 116 00:08:30,180 --> 00:08:31,410 ‫So it's checked. 117 00:08:31,740 --> 00:08:43,140 ‫It's going to be new vol and cb cb mushrooms is checked this new vol. 118 00:08:43,230 --> 00:08:46,980 ‫So why do we need this new wall or new wall thing? 119 00:08:47,070 --> 00:08:54,210 ‫Well, new vol is simply going to set it to true or set it to false if this all toppings is checked. 120 00:08:54,210 --> 00:09:01,620 ‫So if somebody presses this all toppings so that one here at all, then they should either be all activated 121 00:09:01,620 --> 00:09:03,000 ‫or all deactivated. 122 00:09:03,000 --> 00:09:07,650 ‫And that's what I create with this well, this approach here. 123 00:09:08,610 --> 00:09:12,180 ‫Now, the next one is our single checked changed. 124 00:09:12,180 --> 00:09:24,510 ‫And in here I want to set the ES checked to NULL because if we check one of those, it's either active 125 00:09:24,510 --> 00:09:25,410 ‫or inactive. 126 00:09:25,410 --> 00:09:29,820 ‫So all toppings should be usually deactivated. 127 00:09:29,820 --> 00:09:35,190 ‫If we check on one except two were activated and we activate the third one, then are all should also 128 00:09:35,190 --> 00:09:36,180 ‫be activated. 129 00:09:37,380 --> 00:09:49,710 ‫So in here we just check if cb salami is checked is true and if KB mozzarella. 130 00:09:52,370 --> 00:09:54,590 ‫Is checked is true. 131 00:09:55,760 --> 00:10:02,030 ‫And finally, if CV mushrooms this checked is true. 132 00:10:04,220 --> 00:10:12,830 ‫Now, of course, we need to have another surrounding bracket and now we can do whatever we want in 133 00:10:12,830 --> 00:10:13,310 ‫here. 134 00:10:13,310 --> 00:10:17,630 ‫And I'm just going to say CB all toppings is checked. 135 00:10:17,980 --> 00:10:18,950 ‫Should be true. 136 00:10:21,350 --> 00:10:26,450 ‫So if all of them are checked, so mushroom mozzarella and so forth, if those are checked then ah, 137 00:10:26,450 --> 00:10:28,700 ‫all toppings should be checked as well. 138 00:10:29,330 --> 00:10:33,950 ‫And then if all of them are false, then it should be deactivated. 139 00:10:33,950 --> 00:10:41,720 ‫So I'm just going to copy that here and I'm going to replace all of those trues with false because it 140 00:10:41,720 --> 00:10:43,310 ‫goes both ways, right? 141 00:10:43,310 --> 00:10:47,330 ‫So either all are activated or all all are deactivated in both cases. 142 00:10:47,330 --> 00:10:52,790 ‫I want to set my checkbox all toppings correctly. 143 00:10:53,720 --> 00:10:54,050 ‫All right. 144 00:10:54,050 --> 00:10:58,730 ‫So now we can run this and that we are at all. 145 00:10:58,730 --> 00:11:01,010 ‫We click on it, all of them are activated. 146 00:11:01,010 --> 00:11:04,190 ‫Then if I click again, this is the tri state that I was talking about. 147 00:11:04,190 --> 00:11:07,790 ‫So this is our where is it? 148 00:11:07,790 --> 00:11:08,780 ‫The checkbox? 149 00:11:09,900 --> 00:11:11,220 ‫Is three state. 150 00:11:11,310 --> 00:11:12,660 ‫Yeah, there it is. 151 00:11:13,620 --> 00:11:17,280 ‫Then if I deactivate a spicy mushroom. 152 00:11:17,280 --> 00:11:21,690 ‫Well, if I deactivate all, as you can see, I'll go to deactivate mode. 153 00:11:21,690 --> 00:11:26,400 ‫If I add some, add all goes to a tri state or a three state. 154 00:11:26,400 --> 00:11:27,180 ‫Pretty much. 155 00:11:28,020 --> 00:11:28,710 ‫All right. 156 00:11:28,710 --> 00:11:31,230 ‫So as you can see, very simple. 157 00:11:31,230 --> 00:11:33,720 ‫This is how you can use your checkboxes. 158 00:11:33,720 --> 00:11:38,880 ‫And by the way, you don't have to do it as I did here, that you give it all the same method. 159 00:11:38,880 --> 00:11:42,120 ‫You could have created very unique methods for all of them. 160 00:11:42,120 --> 00:11:45,420 ‫You could create a message box which informs the user about something. 161 00:11:45,420 --> 00:11:46,230 ‫Yeah, please. 162 00:11:46,470 --> 00:11:46,780 ‫Yeah. 163 00:11:46,800 --> 00:11:52,620 ‫Don't forget to check this as well or something like thanks for checking this checkbox because we really 164 00:11:52,620 --> 00:11:55,890 ‫appreciate your feedback or whatever you can think of. 165 00:11:55,980 --> 00:11:57,600 ‫Okay, great. 166 00:11:57,600 --> 00:12:02,130 ‫So that's checkboxes and yeah, in the next video we are going to go ahead with the next topic. 167 00:12:02,130 --> 00:12:03,330 ‫So see you there.