WPF GroupBox Example

GroupBox. Controls must be arranged somehow.

With a GroupBox in WPF, we can place them within a box that has a header. This makes interfaces easier to understand and interact with. In a GroupBox we nest another control.

Based on:

.NET 4.5

Example. A GroupBox must have a sub-control in it. The Grid can be used inside a GroupBox to lay out other controls. In this example, I dragged a GroupBox to the Window from the Toolbox in Visual Studio.

Then: I adjusted the bounds of the GroupBox, also by dragging, to expand to fit the containing Window.

Next: I added a Grid. I added controls to the Grid. I moved things around to make them look less awful.

Grid

So: The GroupBox control's contribution is the header, which I changed to read "Pizza," and the border around its sub-controls.

Example markup: XAML

<Window x:Class="WpfApplication9.MainWindow"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	Title="MainWindow" Height="350" Width="525">
    <Grid>
	<GroupBox Header="Pizza" HorizontalAlignment="Left" Margin="10,10,0,0"
		  VerticalAlignment="Top" Height="236" Width="263">
	    <Grid HorizontalAlignment="Left" Height="226" VerticalAlignment="Top"
		  Width="253" Margin="0,0,-2,-12">
		<Label Content="These are some pizza toppings."
		       HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,10,0,0"/>
		<CheckBox Content="Cheese" HorizontalAlignment="Left"
			  Margin="10,41,0,0" VerticalAlignment="Top"/>
		<CheckBox Content="Mushrooms" HorizontalAlignment="Left"
			  Margin="10,61,0,0" VerticalAlignment="Top"/>
		<CheckBox Content="Olives" HorizontalAlignment="Left"
			  Margin="10,81,0,0" VerticalAlignment="Top"/>
	    </Grid>
	</GroupBox>
    </Grid>
</Window>

Discussion. A GroupBox is a container control. It is not worth much on its own. Instead we add controls inside of it, which may be more interactive with the user. A Grid or TabControl are handy choices here.

TabControl

Generally: We do not need to manipulate the GroupBox in our C# code, but such operations are possible.

Tip: In WPF, any property can be changed in code. If needed, we do not need to use Visual Studio to manually change the XAML.

Usually, using prebuilt controls is the easiest way to create WPF programs. This is an advantage of GroupBox. It would be possible to use Rectangle and Label to create your own, but this would likely make your program harder to maintain.

Here: We used the Grid, Label and CheckBox controls within a GroupBox. More details on these sub-controls are available.

LabelCheckBox

Summary. Developing complex user interfaces has some challenges. Organizing all the controls in them is a major one. With a control like GroupBox we arrange our controls neatly, making cleaner, nicer programs.

Related Links