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.
Arcane Code 
When I put a button as the group box header, I can’t click on it if the mouse cursor is vertically at the same level as the group box line. If I move the mouse cursor to the top or bottom part of the button, it gets focus and can be clicked. Do you have a way to fix this problem?
A little late for the fix but I can think of two ways to do so: (both need to redefine the GroupBox’s original template with a copy)
1. In the GroupBox’s template find border with a multibinding on its OpacityMask and apply a IsHitTestVisible=”false” on it.
2. Order the content presenter over this border (with the multibinding).
The issue is that the content presenter is actually under a border with an opacity mask. Now, for some reason, the opacity mask still catches the hit thus preventing the underlying button (or any control as a matter of fact) to catch the hit.
Still occurs with WPF4.
Here is the fix, btw:
http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/fa89b481-9f7a-4f06-a8d4-290fc97fa168/