WPF provides several powerful controls for displaying collections of data and organizing user interfaces. Whether you’re creating a settings page, a file explorer, or a business application, controls like ComboBox, ListBox, ListView, TreeView, and TabControl are used extensively.
In this article, you’ll learn:
- What each control is used for
- Key properties
- Common events
- XAML examples
- Best practices
- Real-world usage
1. ComboBox #
A ComboBox allows users to select one item from a drop-down list. It can also allow users to type custom values when configured as editable.
Examples:
- Country selection
- Department selection
- Currency selection
- Product categories
Basic Syntax #
<ComboBox Width="200">
<ComboBoxItem Content="Pakistan"/>
<ComboBoxItem Content="Canada"/>
<ComboBoxItem Content="USA"/>
</ComboBox>
Setting Default Selection #
<ComboBox Width="200"
SelectedIndex="0">
<ComboBoxItem Content="Admin"/>
<ComboBoxItem Content="Manager"/>
<ComboBoxItem Content="User"/>
</ComboBox>
Editable ComboBox #
<ComboBox Width="200"
IsEditable="True"/>
Data Binding Example #
<ComboBox ItemsSource="{Binding Countries}"
SelectedItem="{Binding SelectedCountry}"/>
Important Properties #
| Property | Description |
|---|---|
| Items | Collection of items |
| ItemsSource | Bind a data collection |
| SelectedItem | Selected object |
| SelectedIndex | Selected index |
| IsEditable | Allows typing |
| IsReadOnly | Prevent editing |
Common Events #
<ComboBox SelectionChanged="ComboBox_SelectionChanged"/>
Best Practice #
Use ItemsSource with data binding instead of manually adding items whenever possible.
2. ListBox #
A ListBox displays multiple items and allows users to select one or more items.
Examples:
- Categories
- Users
- Cities
- Files
Basic Syntax #
<ListBox Width="220">
<ListBoxItem Content="Apple"/>
<ListBoxItem Content="Orange"/>
<ListBoxItem Content="Banana"/>
</ListBox>
Multiple Selection #
<ListBox SelectionMode="Multiple">
<ListBoxItem Content="C#"/>
<ListBoxItem Content="Java"/>
<ListBoxItem Content="Python"/>
</ListBox>
Extended Selection #
<ListBox SelectionMode="Extended"/>
Users can use Ctrl and Shift keys to select multiple items.
Data Binding #
<ListBox ItemsSource="{Binding Employees}"/>
Important Properties #
| Property | Description |
|---|---|
| ItemsSource | Data collection |
| SelectedItem | Selected object |
| SelectedItems | Multiple selected items |
| SelectionMode | Single, Multiple, Extended |
Common Event #
<ListBox SelectionChanged="ListBox_SelectionChanged"/>
Best Practice #
Use a ListBox for simple item selection. For complex layouts with multiple columns, consider using a ListView instead.
3. ListView #
A ListView displays collections with customizable layouts. It is commonly used to show data in multiple columns.
Examples:
- Employee lists
- Products
- Customers
- Orders
Basic Syntax #
<ListView>
<ListViewItem>Product A</ListViewItem>
<ListViewItem>Product B</ListViewItem>
</ListView>
GridView Example #
<ListView ItemsSource="{Binding Employees}">
<ListView.View>
<GridView>
<GridViewColumn Header="ID"
DisplayMemberBinding="{Binding Id}"/>
<GridViewColumn Header="Name"
DisplayMemberBinding="{Binding Name}"/>
<GridViewColumn Header="Department"
DisplayMemberBinding="{Binding Department}"/>
</GridView>
</ListView.View>
</ListView>
Important Properties #
| Property | Description |
|---|---|
| ItemsSource | Data collection |
| SelectedItem | Current selection |
| View | Display style |
| ItemTemplate | Custom appearance |
Common Event #
<ListView SelectionChanged="ListView_SelectionChanged"/>
Best Practice #
Use GridView when displaying structured business data.
4. TreeView #
A TreeView displays hierarchical data using expandable nodes.
Examples:
- Folder structure
- Organization chart
- Product categories
- Menu hierarchy
Basic Syntax #
<TreeView>
<TreeViewItem Header="Documents">
<TreeViewItem Header="Invoices"/>
<TreeViewItem Header="Reports"/>
</TreeViewItem>
</TreeView>
Expanded Node #
<TreeViewItem Header="Projects"
IsExpanded="True">
Data Binding #
<TreeView ItemsSource="{Binding Categories}"/>
Important Properties #
| Property | Description |
|---|---|
| Items | Child nodes |
| ItemsSource | Data collection |
| SelectedItem | Selected node |
| IsExpanded | Expand node |
| IsSelected | Selected state |
Common Event #
<TreeView SelectedItemChanged="TreeView_SelectedItemChanged"/>
Best Practice #
Keep the hierarchy shallow whenever possible to improve usability.
5. TabControl #
A TabControl organizes related content into separate tabs, allowing users to switch between different views without opening new windows.
Examples:
- Settings screens
- Customer details
- Product information
- Reports
Basic Syntax #
<TabControl>
<TabItem Header="General">
<TextBlock Text="General Settings"/>
</TabItem>
<TabItem Header="Security">
<TextBlock Text="Security Settings"/>
</TabItem>
</TabControl>
Tab with Layout #
<TabControl>
<TabItem Header="Profile">
<StackPanel Margin="10">
<TextBox Width="200"/>
<Button Content="Save"
Width="100"
Margin="0,10"/>
</StackPanel>
</TabItem>
</TabControl>
Selecting Default Tab #
<TabControl SelectedIndex="1"/>
Important Properties #
| Property | Description |
|---|---|
| SelectedIndex | Active tab |
| SelectedItem | Selected tab |
| Items | Collection of tabs |
| ItemTemplate | Tab appearance |
Common Event #
<TabControl SelectionChanged="TabControl_SelectionChanged"/>
Best Practice #
Avoid placing too many tabs in a single TabControl. Group related content logically to keep navigation intuitive.
Complete Example #
<StackPanel Margin="20">
<ComboBox Width="200"
Margin="0,0,0,10">
<ComboBoxItem Content="Pakistan"/>
<ComboBoxItem Content="Canada"/>
<ComboBoxItem Content="USA"/>
</ComboBox>
<ListBox Width="200"
Height="100"
Margin="0,0,0,10">
<ListBoxItem Content="Apple"/>
<ListBoxItem Content="Orange"/>
<ListBoxItem Content="Banana"/>
</ListBox>
<TreeView Height="120"
Margin="0,0,0,10">
<TreeViewItem Header="Products">
<TreeViewItem Header="Electronics"/>
<TreeViewItem Header="Furniture"/>
</TreeViewItem>
</TreeView>
<TabControl Height="180">
<TabItem Header="Home">
<TextBlock Margin="10"
Text="Welcome to WPF"/>
</TabItem>
<TabItem Header="About">
<TextBlock Margin="10"
Text="This is a sample application."/>
</TabItem>
</TabControl>
</StackPanel>
Summary #
These controls are essential for building rich desktop applications in WPF:
- ComboBox lets users choose a single item from a drop-down list and can optionally allow custom input.
- ListBox displays collections and supports single or multiple selection.
- ListView presents data in customizable layouts, making it ideal for business applications.
- TreeView is perfect for displaying hierarchical information such as folders and categories.
- TabControl organizes related content into tabs, helping create clean and user-friendly interfaces.
By mastering these controls, you’ll be able to build professional WPF applications with intuitive navigation and efficient data presentation.
In the next tutorial, you’ll learn about DataGrid, DataTemplate, ItemsControl, Image, Slider, ProgressBar, DatePicker, Calendar, RichTextBox, and MediaElement, enabling you to create even more powerful and interactive desktop applications.