‫Welcome back.
‫In this video, we are going to work with radio buttons.
‫And as you can see, you can drag it from the toolbox.
‫You can simply drag a radial button into your UI and you will find your radio button in the grid, which
‫has content.
‫Well, it has multiple properties that we have seen already.
‫And this is not the way that I want to work with radio buttons in this video.
‫I'm just going to create a Stack panel and I'm going to use XAML in order to build most of that up.
‫So in the STACK panel, I first of all want to have a label, and that label should write something
‫like, Do you like me?
‫So do you like me that we are.
‫This is our label and I'm going to say it should be bold.
‫So font weight will be bold like that and well, what else should we add?
‫Maybe a font size.
‫So let's add the font size and let's put it to 20.
‫So do you like me pretty long text.
‫And now we need to say either yes, no or well, maybe, but there is nothing in between those three,
‫so there are only those three choices.
‫And that's the advantage of radio buttons.
‫They always only have one of them active within a radio group.
‫So let's create a radio button here, radio button.
‫And I'm going to do it a little more extended because I don't want just to have a simple radio button,
‫as we have just seen.
‫I want this radio button to be, well, wrapping and rectangle and a text block.
‫So something like wrap panel.
‫So I'm going to create a wrap panel here.
‫And within the wrap panel, I want to have a rectangle which is going to be green in this case.
‫So somebody says yes, so it should be green.
‫Green is good and the width should be something like 16 and the height should also be 16.
‫So it's a 16 times 16 green grid that we have there that we are.
‫This is our rectangle that we have there.
‫So this is our rectangle, the green one, as you can see.
‫And now I want some text next to it.
‫So text block and it's going to be the text of yes.
‫So I like the person and the foreground should be green as well.
‫So green and green.
‫I like the person.
‫So this is our text block and it says yes.
‫Now maybe we should have a little margin in between object.
‫So I'm going to add a margin on the highest level on the STACK panel level like that.
‫As you can see now, it is a little distance up there and we can even add a little margin within our
‫text block or maybe even radio button.
‫Let's make the whole radio button margin of ten pixels or maybe just five pixels.
‫That should be fine.
‫And then also a margin for the text block because it's a little too close to the rest, but then not
‫towards the top.
‫And towards the bottom, but only to the left.
‫And the margin is either one value.
‫So you can add either one value or you can add four values starting from left, then going to top,
‫right and bottom.
‫So left, top, right, bottom.
‫So the one that I want to have is left five pixels top.
‫I don't want any right.
‫I don't need any and bottom.
‫I don't need any as well.
‫And now you can see there is a little distance here, five pixels of margin between our yes and the
‫square that we have here or the rectangle that we have.
‫All right.
‫So left top, right bottom.
‫That's how we use this margin.
‫All right.
‫So that's one radio button and I would like to have three radio buttons.
‫So actually, let me cut the back down so that we only have the right amount of lines here.
‫And I'm going to copy this radio button and put it just next to it or below it.
‫And this one should be filled red and the text should say something like No.
‫So the text will be no.
‫And we are yes, no.
‫And of course the text should also be read.
‫So actually not in here, but in here.
‫So within our no button, the red should be or the the no should be red.
‫So that's that with radio button.
‫Super simple.
‫But now I want to add another one, which will be maybe and now instead of a rectangle, I would like
‫to have a little image here.
‫So I'm going to get rid of the rectangle and I'm going to use image, which we have not used yet.
‫And whenever you want to use an image, you need a source for that image.
‫So in my case, I have the source.
‫On my PC, so I'm going to say source and then you need the right directory.
‫And in my case it's on my PC.
‫So I have this folder called C-sharp Masterclass.
‫Course, I have the projects folder and in there is a maybe file and it's called maybe Dot, P and G
‫and it's this file here.
‫And of course it's very big and it will be downsized.
‫But if you would like to downsize it, it really makes sense to do it before you use the image.
‫So just edit this image and size it down.
‫But this is going to be the image that I want to use.
‫So this is going to be my source for the image.
‫Then I can specify how wide and so forth it should be.
‫So because otherwise, as you can see, it's the original size.
‫But I can downscale it too, let's say with of 32 and a height of 32 as well.
‫So now I have this maybe image there and the text should not be red.
‫Actually, it's okay if it's the standard color of black.
‫So this is the text of maybe there we are and now we have our radio button.
‫Do you like me?
‫Yes.
‫No.
‫And maybe.
‫All right, now let's start this application and check it out.
‫There we are.
‫Do you like me?
‫Yes.
‫No, maybe.
‫And as you can see, it was empty before that.
‫And now we can select it and they will always be connected to each other.
‫So those three are in the same group.
‫They are connected with each other and only one of them can be active.
‫So that's the advantage of radial buttons in comparison to checkboxes.
‫So if you only want to have one option, radial buttons are your way to go if you want one of them to
‫be specified at the start, so one of them to be checked at the start, you can simply use the is checked
‫property.
‫So within the reign button, radio button here, let's say I want maybe to be checked.
‫So I'm going to use this checked and I'm going to set it to true.
‫All right.
‫So now let's start it again.
‫And you will see that maybe it's checked from the start.
‫If you want to have an event, when somebody presses on one of them, you can simply create that event
‫either manually by adding here checked and then adding a event listener here, or you can simply double
‫click on it.
‫So I'm going to double click on No.
‫And as you can see, radio button checked one and really wasn't checked.
‫Those two methods were created and you see they have an object center and through the event arc.
‫So the same thing that we have seen with checkboxes.
‫And here you could add something like a show message box.
‫Small message box to show.
‫Please say yes.
‫So this is what it's going to say.
‫And the other one is also going to say yes, because it's the to know.
‫And maybe once that I have added an event to and if you don't like the name, you can change the name.
‫So I'm going to say something like not radio button checked, but no, what's checked?
‫And of course I need to change the name in the code behind so this one will be no checked and then we
‫have the maybe checked and I'm going to change the name here as well, maybe checked.
‫I copy that and I change it here.
‫So please say yes.
‫Please say yes twice.
‫And if somebody presses yes, then we could say something like, Thank you.
‫So let's create that one manually.
‫So here I'm going to use checked and I'm going to create a new method called yes, underscore checked.
‫And now let's create the method for it and code behind.
‫So we're going to use the same principles that we've seen here.
‫Private void.
‫Yes.
‫We're actually like this.
‫Yes.
‫Checked object, sender and rooted event arcs.
‫And I'm going to call them E as well.
‫And now here we can go ahead and say something like, thank you.
‫Thank you.
‫All right.
‫Now let's check it out.
‫And by the way, if you did that, you will see that this event was called because.
‫Well, let's go ahead again because it was checked.
‫We have this functionality.
‫So here you see, please say yes was automatically opened up even though my program didn't appear yet.
‫And after you click yes, then you see your program.
‫And that's because maybe it's checked and this event is called either way.
‫So when it's whenever it's checked and it's checked at the start, so when it's initialized, so I'm
‫going to say no and it says, please, yes.
‫And then I say yes and it says thank you.
‫So these are the different events that we have created here and here.
‫This one, this information is checked equals true.
‫This line here or this code actually triggers this checked event straight away whenever the program
‫is initialized.
‫So if I had, for example, a name here name and is going to be RB yet maybe this is RB, maybe so now
‫I can go here in the initialize method or the constructor rb maybe is checked and I set it to true.
‫So that's how I can check it via code.
‫All right.
‫So if we run that again, you will see that this event is still popping up.
‫So this check event, please say yes, it's still popping up.
‫Do you like me?
‫Yes.
‫Great.
‫So now you know how to use radio buttons and you have seen how you can implement images into your user
‫interface.