Container controls are used to organize, group, and visually structure the user interface in WPF applications. Instead of simply placing controls directly on a window, container controls help improve readability, usability, and maintainability.
In this article, you’ll learn about three commonly used container controls:
- GroupBox – Groups related controls under a titled border.
- Expander – Shows or hides content by expanding or collapsing.
- Border – Draws a border around a single child element and provides styling.
In this article, you’ll learn:
- What each control is used for
- Key properties
- Common events
- XAML examples
- Best practices
- Real-world usage
1. GroupBox #
A GroupBox is a container that groups related controls together under a heading.
It helps users understand that several controls belong to the same section.
Common examples include:
- Personal Information
- Shipping Address
- Payment Details
- Company Settings
- User Preferences
Basic Syntax #
<GroupBox Header="Personal Information">
<StackPanel Margin="10">
<TextBox Width="220"/>
<TextBox Width="220"
Margin="0,10,0,0"/>
</StackPanel>
</GroupBox>
GroupBox with Multiple Controls #
<GroupBox Header="Login">
<StackPanel Margin="10">
<Label Content="Username"/>
<TextBox Width="200"/>
<Label Content="Password"
Margin="0,10,0,0"/>
<PasswordBox Width="200"/>
<Button Content="Sign In"
Width="100"
Margin="0,15,0,0"/>
</StackPanel>
</GroupBox>
Styling the Header #
<GroupBox Header="Employee Details"
FontSize="16"
FontWeight="Bold"
Foreground="DarkBlue"/>
Important Properties #
| Property | Description |
|---|---|
| Header | Title displayed at the top |
| Content | Child control inside the GroupBox |
| Padding | Space between border and content |
| BorderBrush | Border color |
| BorderThickness | Border width |
| FontWeight | Header font weight |
Common Events #
Although GroupBox does not have dedicated events, events from controls placed inside it are commonly handled.
Example:
<Button Click="SaveButton_Click"
Content="Save"/>
Best Practice #
Group controls that belong together logically. Avoid placing unrelated fields inside the same GroupBox.
2. Expander #
An Expander displays content that users can expand or collapse.
It helps reduce screen clutter by hiding content that isn’t always needed.
Common uses include:
- Advanced Settings
- Filters
- Frequently Asked Questions (FAQ)
- Optional Information
- Help Sections
Basic Syntax #
<Expander Header="Advanced Settings">
<TextBlock Margin="10"
Text="Additional options."/>
</Expander>
Expanded by Default #
<Expander Header="Details"
IsExpanded="True">
<TextBlock Margin="10"
Text="Expanded content."/>
</Expander>
Expanding Downward #
<Expander Header="Customer Details"
ExpandDirection="Down"/>
Expanding Upward #
<Expander Header="Logs"
ExpandDirection="Up"/>
Possible directions:
- Down
- Up
- Left
- Right
Expander with Form Controls #
<Expander Header="Shipping Address">
<StackPanel Margin="10">
<TextBox Width="220"
Margin="0,5"/>
<TextBox Width="220"
Margin="0,5"/>
<TextBox Width="220"
Margin="0,5"/>
</StackPanel>
</Expander>
Important Properties #
| Property | Description |
|---|---|
| Header | Expander title |
| IsExpanded | Expanded or collapsed state |
| ExpandDirection | Expansion direction |
| Content | Child control |
Common Events #
<Expander Expanded="Expander_Expanded"
Collapsed="Expander_Collapsed"/>
Example Code Behind #
private void Expander_Expanded(object sender, RoutedEventArgs e)
{
MessageBox.Show("Expanded");
}
private void Expander_Collapsed(object sender, RoutedEventArgs e)
{
MessageBox.Show("Collapsed");
}
Best Practice #
Use Expander for optional or advanced settings that users don’t need to see all the time.
3. Border #
A Border draws a border around a single child element.
It is commonly used to improve the appearance of controls by adding borders, rounded corners, spacing, and background colors.
Examples include:
- Cards
- Login panels
- Dashboards
- Product tiles
- Information boxes
Basic Syntax #
<Border BorderBrush="Gray"
BorderThickness="1">
<TextBlock Text="Hello WPF"/>
</Border>
Rounded Corners #
<Border BorderBrush="SteelBlue"
BorderThickness="2"
CornerRadius="8">
<TextBlock Margin="10"
Text="Rounded Border"/>
</Border>
Background Color #
<Border Background="LightYellow"
BorderBrush="Goldenrod"
BorderThickness="1">
<TextBlock Margin="10"
Text="Highlighted Information"/>
</Border>
Padding and Margin #
<Border BorderBrush="Black"
BorderThickness="1"
Padding="15"
Margin="10">
<TextBlock Text="Border Example"/>
</Border>
Border Around a Form #
<Border BorderBrush="DarkGray"
BorderThickness="1"
CornerRadius="10"
Padding="20">
<StackPanel>
<Label Content="Email"/>
<TextBox Width="220"/>
<Label Content="Password"
Margin="0,10,0,0"/>
<PasswordBox Width="220"/>
<Button Content="Login"
Width="100"
Margin="0,15,0,0"/>
</StackPanel>
</Border>
Important Properties #
| Property | Description |
|---|---|
| BorderBrush | Border color |
| BorderThickness | Border width |
| CornerRadius | Rounded corners |
| Background | Background color |
| Padding | Space inside the border |
| Margin | Space outside the border |
| Child | Single child element |
Common Events #
The Border control itself has no commonly used events. Events are usually handled by the child controls placed inside it.
Best Practice #
Remember that a Border can contain only one child element. If you need multiple controls inside it, place a layout container such as Grid, StackPanel, or DockPanel inside the Border first.
GroupBox vs Expander vs Border #
| Feature | GroupBox | Expander | Border |
|---|---|---|---|
| Displays a Header | ✔ | ✔ | ✘ |
| Expand/Collapse Content | ✘ | ✔ | ✘ |
| Draws a Border | ✔ | ✔ | ✔ |
| Organizes Related Controls | ✔ | ✔ | ✔ |
| Rounded Corners | Limited (Template) | Limited (Template) | ✔ |
| Contains One Child | ✔ | ✔ | ✔ |
Complete Example #
<StackPanel Margin="20">
<GroupBox Header="Employee Information"
Margin="0,0,0,15">
<StackPanel Margin="10">
<TextBox Width="220"
Margin="0,5"/>
<TextBox Width="220"
Margin="0,5"/>
</StackPanel>
</GroupBox>
<Expander Header="Advanced Options"
Margin="0,0,0,15">
<StackPanel Margin="10">
<CheckBox Content="Enable Notifications"/>
<CheckBox Content="Auto Save"/>
</StackPanel>
</Expander>
<Border BorderBrush="Gray"
BorderThickness="1"
CornerRadius="8"
Padding="15">
<TextBlock Text="This content is displayed inside a Border."/>
</Border>
</StackPanel>
Summary #
Container controls play an important role in creating organized and visually appealing WPF applications.
- GroupBox groups related controls under a titled section, making forms easier to understand.
- Expander allows content to be expanded or collapsed, helping reduce clutter and improve navigation.
- Border enhances the appearance of controls by adding borders, padding, backgrounds, and rounded corners.
By using these controls effectively, you can create interfaces that are both user-friendly and professional. Proper grouping and visual organization also make applications easier to maintain as they grow.
In the next tutorial, you’ll learn about Menu, ContextMenu, ToolBar, StatusBar, and ToolTip, which help you build feature-rich desktop applications with professional navigation and user interaction.