1 00:00:00,630 --> 00:00:01,560 ‫Welcome back. 2 00:00:01,590 --> 00:00:05,640 ‫In this video, we are going to work with radio buttons. 3 00:00:05,640 --> 00:00:08,640 ‫And as you can see, you can drag it from the toolbox. 4 00:00:08,790 --> 00:00:15,360 ‫You can simply drag a radial button into your UI and you will find your radio button in the grid, which 5 00:00:15,360 --> 00:00:16,170 ‫has content. 6 00:00:16,170 --> 00:00:20,190 ‫Well, it has multiple properties that we have seen already. 7 00:00:20,370 --> 00:00:24,840 ‫And this is not the way that I want to work with radio buttons in this video. 8 00:00:24,840 --> 00:00:32,160 ‫I'm just going to create a Stack panel and I'm going to use XAML in order to build most of that up. 9 00:00:32,160 --> 00:00:38,520 ‫So in the STACK panel, I first of all want to have a label, and that label should write something 10 00:00:38,550 --> 00:00:40,560 ‫like, Do you like me? 11 00:00:40,560 --> 00:00:47,010 ‫So do you like me that we are. 12 00:00:47,010 --> 00:00:50,190 ‫This is our label and I'm going to say it should be bold. 13 00:00:50,190 --> 00:00:57,720 ‫So font weight will be bold like that and well, what else should we add? 14 00:00:57,720 --> 00:00:58,800 ‫Maybe a font size. 15 00:00:58,800 --> 00:01:02,100 ‫So let's add the font size and let's put it to 20. 16 00:01:02,100 --> 00:01:04,920 ‫So do you like me pretty long text. 17 00:01:04,920 --> 00:01:12,360 ‫And now we need to say either yes, no or well, maybe, but there is nothing in between those three, 18 00:01:12,360 --> 00:01:14,100 ‫so there are only those three choices. 19 00:01:14,100 --> 00:01:16,380 ‫And that's the advantage of radio buttons. 20 00:01:16,380 --> 00:01:20,880 ‫They always only have one of them active within a radio group. 21 00:01:20,880 --> 00:01:24,750 ‫So let's create a radio button here, radio button. 22 00:01:24,750 --> 00:01:32,370 ‫And I'm going to do it a little more extended because I don't want just to have a simple radio button, 23 00:01:32,370 --> 00:01:33,900 ‫as we have just seen. 24 00:01:33,900 --> 00:01:39,330 ‫I want this radio button to be, well, wrapping and rectangle and a text block. 25 00:01:39,330 --> 00:01:42,510 ‫So something like wrap panel. 26 00:01:42,510 --> 00:01:44,370 ‫So I'm going to create a wrap panel here. 27 00:01:46,380 --> 00:01:53,190 ‫And within the wrap panel, I want to have a rectangle which is going to be green in this case. 28 00:01:53,190 --> 00:01:55,470 ‫So somebody says yes, so it should be green. 29 00:01:55,470 --> 00:02:02,040 ‫Green is good and the width should be something like 16 and the height should also be 16. 30 00:02:02,040 --> 00:02:08,070 ‫So it's a 16 times 16 green grid that we have there that we are. 31 00:02:08,220 --> 00:02:10,440 ‫This is our rectangle that we have there. 32 00:02:10,440 --> 00:02:13,680 ‫So this is our rectangle, the green one, as you can see. 33 00:02:13,800 --> 00:02:15,750 ‫And now I want some text next to it. 34 00:02:15,750 --> 00:02:21,720 ‫So text block and it's going to be the text of yes. 35 00:02:22,380 --> 00:02:29,820 ‫So I like the person and the foreground should be green as well. 36 00:02:29,820 --> 00:02:31,950 ‫So green and green. 37 00:02:31,950 --> 00:02:32,970 ‫I like the person. 38 00:02:32,970 --> 00:02:35,670 ‫So this is our text block and it says yes. 39 00:02:37,000 --> 00:02:40,870 ‫Now maybe we should have a little margin in between object. 40 00:02:40,870 --> 00:02:46,090 ‫So I'm going to add a margin on the highest level on the STACK panel level like that. 41 00:02:46,090 --> 00:02:55,180 ‫As you can see now, it is a little distance up there and we can even add a little margin within our 42 00:02:55,180 --> 00:02:59,800 ‫text block or maybe even radio button. 43 00:02:59,800 --> 00:03:06,790 ‫Let's make the whole radio button margin of ten pixels or maybe just five pixels. 44 00:03:06,970 --> 00:03:08,110 ‫That should be fine. 45 00:03:08,110 --> 00:03:16,150 ‫And then also a margin for the text block because it's a little too close to the rest, but then not 46 00:03:16,150 --> 00:03:17,410 ‫towards the top. 47 00:03:18,300 --> 00:03:21,120 ‫And towards the bottom, but only to the left. 48 00:03:21,420 --> 00:03:25,110 ‫And the margin is either one value. 49 00:03:25,110 --> 00:03:31,080 ‫So you can add either one value or you can add four values starting from left, then going to top, 50 00:03:31,080 --> 00:03:32,130 ‫right and bottom. 51 00:03:32,130 --> 00:03:34,140 ‫So left, top, right, bottom. 52 00:03:34,140 --> 00:03:38,520 ‫So the one that I want to have is left five pixels top. 53 00:03:38,520 --> 00:03:40,320 ‫I don't want any right. 54 00:03:40,320 --> 00:03:42,150 ‫I don't need any and bottom. 55 00:03:42,150 --> 00:03:43,770 ‫I don't need any as well. 56 00:03:43,770 --> 00:03:50,400 ‫And now you can see there is a little distance here, five pixels of margin between our yes and the 57 00:03:50,730 --> 00:03:53,850 ‫square that we have here or the rectangle that we have. 58 00:03:54,150 --> 00:03:54,750 ‫All right. 59 00:03:54,750 --> 00:03:58,170 ‫So left top, right bottom. 60 00:03:58,410 --> 00:04:00,000 ‫That's how we use this margin. 61 00:04:00,570 --> 00:04:00,900 ‫All right. 62 00:04:00,900 --> 00:04:05,130 ‫So that's one radio button and I would like to have three radio buttons. 63 00:04:05,130 --> 00:04:11,850 ‫So actually, let me cut the back down so that we only have the right amount of lines here. 64 00:04:11,850 --> 00:04:16,470 ‫And I'm going to copy this radio button and put it just next to it or below it. 65 00:04:16,470 --> 00:04:22,530 ‫And this one should be filled red and the text should say something like No. 66 00:04:22,920 --> 00:04:25,590 ‫So the text will be no. 67 00:04:26,100 --> 00:04:27,510 ‫And we are yes, no. 68 00:04:27,510 --> 00:04:30,060 ‫And of course the text should also be read. 69 00:04:30,510 --> 00:04:35,070 ‫So actually not in here, but in here. 70 00:04:35,070 --> 00:04:42,180 ‫So within our no button, the red should be or the the no should be red. 71 00:04:42,870 --> 00:04:44,970 ‫So that's that with radio button. 72 00:04:44,980 --> 00:04:45,690 ‫Super simple. 73 00:04:45,690 --> 00:04:51,420 ‫But now I want to add another one, which will be maybe and now instead of a rectangle, I would like 74 00:04:51,420 --> 00:04:53,160 ‫to have a little image here. 75 00:04:53,310 --> 00:05:00,090 ‫So I'm going to get rid of the rectangle and I'm going to use image, which we have not used yet. 76 00:05:00,090 --> 00:05:05,280 ‫And whenever you want to use an image, you need a source for that image. 77 00:05:05,310 --> 00:05:09,030 ‫So in my case, I have the source. 78 00:05:10,260 --> 00:05:16,290 ‫On my PC, so I'm going to say source and then you need the right directory. 79 00:05:16,290 --> 00:05:18,420 ‫And in my case it's on my PC. 80 00:05:19,290 --> 00:05:24,690 ‫So I have this folder called C-sharp Masterclass. 81 00:05:24,690 --> 00:05:31,230 ‫Course, I have the projects folder and in there is a maybe file and it's called maybe Dot, P and G 82 00:05:31,590 --> 00:05:33,570 ‫and it's this file here. 83 00:05:34,110 --> 00:05:37,560 ‫And of course it's very big and it will be downsized. 84 00:05:37,560 --> 00:05:43,020 ‫But if you would like to downsize it, it really makes sense to do it before you use the image. 85 00:05:43,020 --> 00:05:45,870 ‫So just edit this image and size it down. 86 00:05:45,870 --> 00:05:48,120 ‫But this is going to be the image that I want to use. 87 00:05:48,120 --> 00:05:51,270 ‫So this is going to be my source for the image. 88 00:05:51,270 --> 00:05:56,490 ‫Then I can specify how wide and so forth it should be. 89 00:05:56,490 --> 00:06:00,390 ‫So because otherwise, as you can see, it's the original size. 90 00:06:00,390 --> 00:06:09,330 ‫But I can downscale it too, let's say with of 32 and a height of 32 as well. 91 00:06:10,140 --> 00:06:15,510 ‫So now I have this maybe image there and the text should not be red. 92 00:06:15,510 --> 00:06:20,550 ‫Actually, it's okay if it's the standard color of black. 93 00:06:20,550 --> 00:06:27,930 ‫So this is the text of maybe there we are and now we have our radio button. 94 00:06:27,930 --> 00:06:28,560 ‫Do you like me? 95 00:06:28,560 --> 00:06:28,860 ‫Yes. 96 00:06:28,860 --> 00:06:29,220 ‫No. 97 00:06:29,220 --> 00:06:30,090 ‫And maybe. 98 00:06:31,590 --> 00:06:35,280 ‫All right, now let's start this application and check it out. 99 00:06:37,230 --> 00:06:38,040 ‫There we are. 100 00:06:38,070 --> 00:06:39,030 ‫Do you like me? 101 00:06:39,030 --> 00:06:39,780 ‫Yes. 102 00:06:39,870 --> 00:06:41,400 ‫No, maybe. 103 00:06:41,490 --> 00:06:43,860 ‫And as you can see, it was empty before that. 104 00:06:43,980 --> 00:06:48,810 ‫And now we can select it and they will always be connected to each other. 105 00:06:48,810 --> 00:06:51,060 ‫So those three are in the same group. 106 00:06:51,060 --> 00:06:54,420 ‫They are connected with each other and only one of them can be active. 107 00:06:54,420 --> 00:06:58,620 ‫So that's the advantage of radial buttons in comparison to checkboxes. 108 00:06:58,620 --> 00:07:06,990 ‫So if you only want to have one option, radial buttons are your way to go if you want one of them to 109 00:07:06,990 --> 00:07:13,200 ‫be specified at the start, so one of them to be checked at the start, you can simply use the is checked 110 00:07:13,200 --> 00:07:14,040 ‫property. 111 00:07:14,040 --> 00:07:19,110 ‫So within the reign button, radio button here, let's say I want maybe to be checked. 112 00:07:19,110 --> 00:07:23,970 ‫So I'm going to use this checked and I'm going to set it to true. 113 00:07:24,900 --> 00:07:25,290 ‫All right. 114 00:07:25,290 --> 00:07:26,820 ‫So now let's start it again. 115 00:07:28,320 --> 00:07:31,560 ‫And you will see that maybe it's checked from the start. 116 00:07:32,400 --> 00:07:38,490 ‫If you want to have an event, when somebody presses on one of them, you can simply create that event 117 00:07:38,490 --> 00:07:46,590 ‫either manually by adding here checked and then adding a event listener here, or you can simply double 118 00:07:46,590 --> 00:07:47,130 ‫click on it. 119 00:07:47,130 --> 00:07:48,600 ‫So I'm going to double click on No. 120 00:07:48,600 --> 00:07:53,460 ‫And as you can see, radio button checked one and really wasn't checked. 121 00:07:53,490 --> 00:07:58,950 ‫Those two methods were created and you see they have an object center and through the event arc. 122 00:07:58,950 --> 00:08:02,550 ‫So the same thing that we have seen with checkboxes. 123 00:08:05,200 --> 00:08:09,680 ‫And here you could add something like a show message box. 124 00:08:09,680 --> 00:08:11,920 ‫Small message box to show. 125 00:08:12,490 --> 00:08:14,770 ‫Please say yes. 126 00:08:16,150 --> 00:08:17,910 ‫So this is what it's going to say. 127 00:08:17,920 --> 00:08:22,210 ‫And the other one is also going to say yes, because it's the to know. 128 00:08:22,210 --> 00:08:27,490 ‫And maybe once that I have added an event to and if you don't like the name, you can change the name. 129 00:08:27,490 --> 00:08:34,540 ‫So I'm going to say something like not radio button checked, but no, what's checked? 130 00:08:36,040 --> 00:08:42,910 ‫And of course I need to change the name in the code behind so this one will be no checked and then we 131 00:08:42,910 --> 00:08:48,880 ‫have the maybe checked and I'm going to change the name here as well, maybe checked. 132 00:08:49,330 --> 00:08:52,240 ‫I copy that and I change it here. 133 00:08:52,540 --> 00:08:54,130 ‫So please say yes. 134 00:08:54,760 --> 00:08:56,200 ‫Please say yes twice. 135 00:08:57,490 --> 00:09:01,120 ‫And if somebody presses yes, then we could say something like, Thank you. 136 00:09:01,120 --> 00:09:03,160 ‫So let's create that one manually. 137 00:09:03,520 --> 00:09:13,330 ‫So here I'm going to use checked and I'm going to create a new method called yes, underscore checked. 138 00:09:17,670 --> 00:09:20,270 ‫And now let's create the method for it and code behind. 139 00:09:20,340 --> 00:09:23,130 ‫So we're going to use the same principles that we've seen here. 140 00:09:23,580 --> 00:09:24,690 ‫Private void. 141 00:09:24,720 --> 00:09:25,530 ‫Yes. 142 00:09:25,680 --> 00:09:26,580 ‫We're actually like this. 143 00:09:26,580 --> 00:09:26,850 ‫Yes. 144 00:09:26,850 --> 00:09:33,390 ‫Checked object, sender and rooted event arcs. 145 00:09:34,440 --> 00:09:36,120 ‫And I'm going to call them E as well. 146 00:09:36,120 --> 00:09:41,250 ‫And now here we can go ahead and say something like, thank you. 147 00:09:43,110 --> 00:09:44,490 ‫Thank you. 148 00:09:46,140 --> 00:09:46,590 ‫All right. 149 00:09:46,590 --> 00:09:47,790 ‫Now let's check it out. 150 00:09:49,800 --> 00:09:55,800 ‫And by the way, if you did that, you will see that this event was called because. 151 00:09:55,800 --> 00:09:59,160 ‫Well, let's go ahead again because it was checked. 152 00:09:59,190 --> 00:10:00,480 ‫We have this functionality. 153 00:10:00,480 --> 00:10:06,090 ‫So here you see, please say yes was automatically opened up even though my program didn't appear yet. 154 00:10:06,330 --> 00:10:09,510 ‫And after you click yes, then you see your program. 155 00:10:09,510 --> 00:10:14,760 ‫And that's because maybe it's checked and this event is called either way. 156 00:10:14,760 --> 00:10:19,500 ‫So when it's whenever it's checked and it's checked at the start, so when it's initialized, so I'm 157 00:10:19,500 --> 00:10:22,440 ‫going to say no and it says, please, yes. 158 00:10:22,440 --> 00:10:24,870 ‫And then I say yes and it says thank you. 159 00:10:25,710 --> 00:10:30,900 ‫So these are the different events that we have created here and here. 160 00:10:30,900 --> 00:10:33,990 ‫This one, this information is checked equals true. 161 00:10:33,990 --> 00:10:41,040 ‫This line here or this code actually triggers this checked event straight away whenever the program 162 00:10:41,040 --> 00:10:42,030 ‫is initialized. 163 00:10:42,540 --> 00:10:53,190 ‫So if I had, for example, a name here name and is going to be RB yet maybe this is RB, maybe so now 164 00:10:53,190 --> 00:11:05,940 ‫I can go here in the initialize method or the constructor rb maybe is checked and I set it to true. 165 00:11:05,940 --> 00:11:08,820 ‫So that's how I can check it via code. 166 00:11:09,740 --> 00:11:09,980 ‫All right. 167 00:11:09,980 --> 00:11:14,960 ‫So if we run that again, you will see that this event is still popping up. 168 00:11:14,960 --> 00:11:19,610 ‫So this check event, please say yes, it's still popping up. 169 00:11:19,610 --> 00:11:20,450 ‫Do you like me? 170 00:11:20,450 --> 00:11:21,230 ‫Yes. 171 00:11:21,380 --> 00:11:21,830 ‫Great. 172 00:11:21,830 --> 00:11:27,710 ‫So now you know how to use radio buttons and you have seen how you can implement images into your user 173 00:11:27,710 --> 00:11:28,460 ‫interface.