Group Items using Group Box Control: WPF

We are using individual items all the time in our programming, doesn’t matter which programming it is. But sometimes we have to use grouping of items, so that they cannot move on their position with the resizing of the container.

For an example we cannot use two individual radio button controls to show genders on the form. Actually we can, but when we resizing the container, they may move on (from their position) a little bit. That’s why we use a group box control to place them together with a header.

Group box control is used to create a container that has some child controls and a border around them. The following code snippet (in XAML) is used to create a group box having two radio button for male and female.

<GroupBox Header="Gender">
<StackPanel>
<RadioButton Content="Male"/>
<RadioButton Content="FeMale"/>
</StackPanel>
</GroupBox>

Now the question is, why we used stack panel above. The answer is, a group box can contain only one item either it is a single item like label, textbox, radio button or it can be a container like stack panel or grid view. The image shows the output for the above code snippet

Here I used only two items in a group box, you can use as you want through a container. The group box can also be created using code in c# language like:

GroupBox grpBox = new GroupBox();
grpBox.Header = "Gender";

StackPanel stackPanel = new StackPanel();
stackPanel.Children.Add(new RadioButton() { Content = "Male" });
stackPanel.Children.Add(new RadioButton() { Content = "FeMale" });
grpBox.Content = stackPanel;

this.Content = grpBox;

The above code will create the same group box with two radio button in it.