In yesterday’s discussion on RadioButtons, I mentioned it would be a good idea to give a visual cue to the users that certain buttons were associated with each other. The GroupBox is one such way of doing that.
Let’s go back to the RadioButton example from yesterday. You’d think all that’s needed is to surround our sets of radio buttons with the <GroupBox> tags. Unfortunately, the GroupBox can only have one child in it’s content, hence the need to insert a StackPanel, Grid, or other container control.
<StackPanel>
<GroupBox>
<StackPanel>
<RadioButton GroupName=“One“ IsChecked=“True“>Option 1</RadioButton>
<RadioButton GroupName=“One“ IsChecked=“False“>Option 2</RadioButton>
</StackPanel>
</GroupBox>
<GroupBox>
<StackPanel>
<RadioButton GroupName=“Two“ IsChecked=“False“>Option 3</RadioButton>
<RadioButton GroupName=“Two“ IsChecked=“True“>Option 4</RadioButton>
</StackPanel>
</GroupBox>
</StackPanel>
Produces
If you look carefully, you can see thin lines surrounding each set of buttons. You can go further and add headers to the GroupBox frame.
<GroupBox Header=“Group One“>
Adds a header to the first box.
You can even go further, and add true content to the header area. Here we’ll add a button.
<StackPanel>
<GroupBox Header=“Group One“>
<StackPanel>
<RadioButton GroupName=“One“ IsChecked=“True“>Option 1</RadioButton>
<RadioButton GroupName=“One“ IsChecked=“False“>Option 2</RadioButton>
</StackPanel>
</GroupBox>
<GroupBox>
<GroupBox.Header>
<Button>Group Two</Button>
</GroupBox.Header>
<StackPanel>
<RadioButton GroupName=“Two“ IsChecked=“False“>Option 3</RadioButton>
<RadioButton GroupName=“Two“ IsChecked=“True“>Option 4</RadioButton>
</StackPanel>
</GroupBox>
</StackPanel>
Gives us
Using a GroupBox can be a simple but visually appealing way to organize your visual elements.
