Windows Presentation Foundation (WPF) is part of the .NET framework and provides various UI elements and a rich user interface. Today, we aim to provide an in-depth understanding of list controls in WPF. List controls play a key role in displaying and manipulating data. In this article, we will explain the types of WPF list controls, how to use them, and provide practical examples step by step.
1. Types of List Controls
WPF has several types of list controls, each serving different purposes and functionalities. The main list controls are as follows:
- ListBox: A control that shows a basic list, allowing users to select items with multiple selections available.
- ComboBox: A lightweight control in the form of a dropdown list that allows users to choose items.
- ListView: An advanced list control that displays data items in a multidimensional way, supporting both icon and detail views.
- DataGrid: A list view based on a data table that displays and manipulates data in grid format.
2. Using the ListBox Control
ListBox is the most basic list control in WPF. Users can add or remove items from the list and have the ability to handle selected items. Let’s implement a ListBox through the following step-by-step example:
2.1 Writing XAML Code
<Window x:Class="ListBoxExample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ListBox Example" Height="350" Width="525">
<Grid>
<ListBox Name="myListBox" Height="200" Width="300" SelectionChanged="myListBox_SelectionChanged">
<ListBoxItem>Item 1</ListBoxItem>
<ListBoxItem>Item 2</ListBoxItem>
<ListBoxItem>Item 3</ListBoxItem>
</ListBox>
<Button Name="addButton" Content="Add" Width="75" Height="30" Click="addButton_Click"
VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,10,10,0"/>
</Grid>
</Window>In the above code, we created a ListBox and added three items as initial values. When the add button is clicked, it will be set to add a new item to the list.
2.2 Writing C# Code
using System;
using System.Windows;
namespace ListBoxExample
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void addButton_Click(object sender, RoutedEventArgs e)
{
myListBox.Items.Add("New Item " + (myListBox.Items.Count + 1));
}
private void myListBox_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
{
if (myListBox.SelectedItem != null)
{
MessageBox.Show("Selected Item: " + myListBox.SelectedItem.ToString());
}
}
}
}The above C# code adds a new item to the ListBox when the button is clicked and displays the selected item in a message box whenever it changes.
3. Using the ComboBox Control
ComboBox is a dropdown-style list control that displays the items users can choose from. Let’s look at a simple example using a ComboBox.
3.1 Writing XAML Code
<ComboBox Name="myComboBox" Width="200" Height="30" SelectionChanged="myComboBox_SelectionChanged">
<ComboBoxItem>Option 1</ComboBoxItem>
<ComboBoxItem>Option 2</ComboBoxItem>
<ComboBoxItem>Option 3</ComboBoxItem>
</ComboBox>3.2 Writing C# Code
private void myComboBox_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
{
if (myComboBox.SelectedItem != null)
{
MessageBox.Show("Selected Option: " + ((ComboBoxItem)myComboBox.SelectedItem).Content.ToString());
}
}4. Using the ListView Control
ListView is a very useful control that helps in representing complex data. It can display data in various formats such as icons, text, checkboxes, etc.
4.1 Writing XAML Code
<ListView Name="myListView" Height="200" Width="300">
<ListView.View>
<GridView>
<GridViewColumn Header="Name" Width="100" DisplayMemberBinding="{Binding Name}"/>
<GridViewColumn Header="Age" Width="100" DisplayMemberBinding="{Binding Age}"/>
</GridView>
</ListView.View>
</ListView>4.2 Writing the Data Model Class
public class Person
{
public string Name { get; set; }
public int Age { get; set; }
}4.3 Writing C# Code
private void LoadData()
{
var people = new List<Person>()
{
new Person() { Name = "John Doe", Age = 25 },
new Person() { Name = "Lee Mong-ryong", Age = 30 },
new Person() { Name = "Seong Chun-hyang", Age = 22 }
};
myListView.ItemsSource = people;
}The LoadData method sets the data to be displayed in the ListView. This method should be called in the initialization method.
5. Using the DataGrid Control
DataGrid is a useful control for handling large amounts of data, providing sorting, filtering, and editing features. Let’s look at an example of using the DataGrid as well.
5.1 Writing XAML Code
<DataGrid Name="myDataGrid" AutoGenerateColumns="False" Height="200" Width="400">
<DataGrid.Columns>
<DataGridTextColumn Header="Product Name" Binding="{Binding ProductName}" Width="150"/>
<DataGridTextColumn Header="Price" Binding="{Binding Price}" Width="150"/>
</DataGrid.Columns>
</DataGrid>5.2 Writing the Data Model Class
public class Product
{
public string ProductName { get; set; }
public decimal Price { get; set; }
}5.3 Writing C# Code
private void LoadProducts()
{
var products = new List<Product>()
{
new Product() { ProductName = "Product A", Price = 10000 },
new Product() { ProductName = "Product B", Price = 20000 }
};
myDataGrid.ItemsSource = products;
}6. Summary
WPF’s list controls form the foundation for displaying data and allowing user interaction in all UIs. By utilizing various controls such as ListBox, ComboBox, ListView, and DataGrid, you can display and manipulate data according to user needs. Apply these controls to your projects to create useful user interfaces.
With this code, you can easily build your own WPF applications, laying the foundation for WPF and moving on to design more complex user interfaces.
Through the theory and practice of WPF’s list controls, I hope you all can create more powerful and flexible applications.