The RadioButton class is a toggle button that is grouped with other RadioButtons. Only one item in the group can be selected at a time. This video looks at how to group RadioButtons with panels and by GroupName. There is also a look at how to use the ToggleButton attached events.
- [Narrator] Let's look at an example of a radio button in the Visual Studio Tools Option dialog. I'll look at the radio buttons in the Text Editor, C sharp, Tabs section. On this page, there are five radio buttons separated into two groups. The top group has three radio buttons, and the bottom group has two radio buttons. A principle of the radio button is that only one radio button in a group can be selected at any time. That means if I choose the Block radio button, it unselects the Smart radio button.
This bottom group only has two items in it, so I'm essentially moving back and forth between those two choices. You'll notice that because they're in two groups, changing the bottom group doesn't affect the top group, and vice versa. Another principle of good UI when you're working with radio buttons is to tell the user the purpose of the radio button. Radio buttons themself have the property that you're changing, None, Block, and Smart, but it also is helpful to have an identifier that says what these three radio buttons are setting, the Indenting property, or the Tab properties.
This is done in this example with something called a group box. A group box is essentially a border that goes around the group, and then it has an overlay at the top with some text, which is called the header. I'll show you in this example how to work with radio buttons and how to work with the group box. Over here in this class diagram we can see that the radio button is a toggle button, so all the principles of the toggle button and all the principles of the checkbox are the same.
You have the IsChecked property, which can be checked, unchecked, and null. You've got the IsThreeState property, and you've got these three events, Checked, Indeterminate, and Unchecked. So, I won't spend too much time on those, 'cause I've already talked about those in the toggle button video and in the checkbox video. There is one additional property in the radio button. Let's take a look here. It's called the GroupName. Remember that radio buttons are placed in groups. In WPF there's two ways to group radio buttons. One way to group them is by putting them in a panel, like a stack panel, or a wrap panel, or a grid.
The other way to group them is to provide a group name for some of the radio buttons. And, I'll show you both examples. Start by looking at this XAML page here. What I have here is a grid with four columns, and in the first column, I have three radio buttons that change colors. You'll see that they're defined inside this stack panel here. So, that group sees three together, because all three of these radio buttons are inside the same container.
Over in the second column, I have a separate stack panel, with a different background color, and I have three additional radio buttons in there that are in their own group. That's for the size. In the third column, I have four radio buttons, and this time I'm using the group box to provide a header. So, I have a stack panel, that's the group that makes these four radio buttons into a single group, and then the stack panel's inside a group box.
Now, the group box is a content control, which means it can only have a single child element. I have to use the stack panel and then put the radio buttons in there. And, the group box has this property called Header, which I've set to Fabric, and so you can see that's appearing here at the top. For the last example, I have another group box, but I won't talk about that until a little bit later in this demo. I'll be using that one to demonstrate the radio button events. Now, let's go verify that these are working. Click Insert. I'm able to select one item in the first group, one item in the second group, and one item in the third group.
You'll notice that by default none of these were selected. If you want to have an initial member of one of these radio buttons selected, like, say I want to have the medium shirt size selected, and the blue color choice selected, then I would need to go back to my XAML, select Blue, set that to True, and then I'll go to Medium, and set IsChecked to True for this one, too.
And, you can see in the designer, those now are selected, and when I run the app, they're pre-selected. It's working the way we want, they are grouped by their container, in this case it's a stack panel. Remember that there's a GroupName property. Actually, I didn't show you that, so let's go over here and look at that. In the radio button, there is a property called GroupName, and that allows me to group them in another way. Instead of using a container like a stack panel, I can group them using a group name.
So, let me show you an example of that. Go over here, I will copy this stack panel, paste it, change the content to Red, Orange, and Purple, uncheck this Red radio button, run the app, and you'll see that I really have two separate groups here.
So, what I'll use is the group name to combine all of those into a single group, even though they're in separate stack panels. This can be any string as long as it's the same string across all of the radio buttons. We'll copy that and then paste it in to all six radio buttons. Remember, they're in two separate stack panels now, but they function as one group.
For the last demonstration, I want to look at the RadioButton Events, that's over here in this radio button group. You'll see when I click on one of these items, I'm specifying which of the radio buttons was checked. Now, to refresh your memory, go back to the diagram here. There is a event called Checked, Indeterminate, and Unchecked, so I can write event handlers for each of those. Now, let's think about how I'd have to do that. Let's go over here. I would have to write Checked for each of the three buttons, and what I'll show you is the principle called an attached event.
What I have here, remember, is a stack panel that contains these three radio buttons, so rather than writing the event handler at each of the radio buttons levels, I'm going to go to its parent, and then here, I'm going to use what's called an attached event. So, the event's actually part of the toggle button class, but because it was registered with the WPF system as an attached event, that means I can actually use it in the XAML for another element.
So, here I'm at the stack panel, I can say ToggleButton.Checked, and then I give it the name of the event handler here and ToggleButton.Unchecked, and then that means I can go over here, and this will fire when any of the radio buttons inside that stack panel are checked. Now, normally, the way you get the sender raised event is you usually call object sender, but in my case that's not what I want, because the sender will be the stack panel.
And, what I want to do is write some code to get the radio button. So, to work with that I'll use the RoutedEventArgs, which has a property called OriginalSource. So, it's the radio button that's the original source, it's the stack panel that's the sender. So, I say get the original source, cast it to a radio button, and then go get its content and print that out, do the tech property.
- Interactions and controls
- UIElement family
- FrameworkElement family
- Shape family
- Decorator Family
- Control Fundamentals
- Button family
- Text Editor family