WPF Development, Displaying Collections Using List Controls

Windows Presentation Foundation (WPF) is a powerful and flexible GUI application development framework. WPF supports data binding, styles and templates, advanced graphics, and a flexible layout system, enhancing productivity and user experience. In this article, we will explore how to display collections using list controls in WPF. Specifically, we will focus on controls such as ListBox, ComboBox, and DataGrid, and practice through examples.

Introduction to List Controls in WPF

List controls in WPF provide a way for users to display and interact with data. There are various types of list controls, each with different characteristics and use cases. Here, we will take a closer look at three main list controls.

1. ListBox

ListBox is a control that displays multiple items and allows users to select items. It supports various selection modes and allows for different styles and templates to be applied to list items. ListBox is useful for displaying a general list or allowing item selection.

ListBox Example

<Window x:Class="WpfApp.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="PersonsListBox" Width="200" Height="300" 
                 SelectionChanged="PersonsListBox_SelectionChanged">
            <ListBoxItem>Alice</ListBoxItem>
            <ListBoxItem>Bob</ListBoxItem>
            <ListBoxItem>Charlie</ListBoxItem>
            <ListBoxItem>Diana</ListBoxItem>
        </ListBox>
        <TextBlock Name="SelectedPersonTextBlock" VerticalAlignment="Top" 
                   Margin="220,10,0,0"/>
    </Grid>
</Window>

In the example above, the ListBox control is used to display the names of a few individuals. Whenever the user selects an item, the name of the selected person is displayed in the TextBlock. This is accomplished by leveraging the SelectionChanged event.

using System.Windows;

namespace WpfApp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void PersonsListBox_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
        {
            if (PersonsListBox.SelectedItem != null)
            {
                SelectedPersonTextBlock.Text = "Selected Person: " + PersonsListBox.SelectedItem.ToString();
            }
        }
    }
}

2. ComboBox

ComboBox provides a dropdown list and displays a list of items that the user can select. It is similar to ListBox but displays only one value by default, saving space for the user. ComboBox is useful when there are many selectable items.

ComboBox Example

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ComboBox Example" Height="300" Width="400">
    <Grid>
        <ComboBox Name="FruitsComboBox" Margin="10" SelectionChanged="FruitsComboBox_SelectionChanged">
            <ComboBoxItem>Apple</ComboBoxItem>
            <ComboBoxItem>Banana</ComboBoxItem>
            <ComboBoxItem>Cherry</ComboBoxItem>
            <ComboBoxItem>Date</ComboBoxItem>
        </ComboBox>
        <TextBlock Name="SelectedFruitTextBlock" VerticalAlignment="Bottom" Margin="10"/>
    </Grid>
</Window>

In the above example, the ComboBox is used to display a list of fruits and update the selected fruit’s name in the TextBlock. When the user selects an item from the ComboBox, the SelectionChanged event is triggered, displaying the selected value.

using System.Windows;

namespace WpfApp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void FruitsComboBox_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
        {
            if (FruitsComboBox.SelectedItem != null)
            {
                SelectedFruitTextBlock.Text = "Selected Fruit: " + FruitsComboBox.SelectedItem.ToString();
            }
        }
    }
}

3. DataGrid

DataGrid is used to display a list of data items in a tabular format. DataGrid allows for easy editing and displaying of large amounts of data, providing features such as column headers, sorting, filtering, and paging.

DataGrid Example

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DataGrid Example" Height="350" Width="525">
    <Grid>
        <DataGrid Name="PersonsDataGrid" AutoGenerateColumns="False">
            <DataGrid.Columns>
                <DataGridTextColumn Header="Name" Binding="{Binding Name}" Width="*"/>
                <DataGridTextColumn Header="Age" Binding="{Binding Age}" Width="*"/>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

In the example above, the DataGrid is used to display the names and ages of individuals in a tabular format. By setting AutoGenerateColumns to false, we can manually define the columns and bind the data.

using System.Collections.Generic;
using System.Windows;

namespace WpfApp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            List persons = new List
            {
                new Person { Name = "Alice", Age = 30 },
                new Person { Name = "Bob", Age = 25 },
                new Person { Name = "Charlie", Age = 35 },
                new Person { Name = "Diana", Age = 28 }
            };

            PersonsDataGrid.ItemsSource = persons;
        }
    }

    public class Person
    {
        public string Name { get; set; }
        public int Age { get; set; }
    }
}

Collections and Data Binding

In WPF, data binding is a very powerful feature that connects the UI to the data. Using data binding, you can connect the properties of UI elements to the properties of a data source, allowing the UI to reflect changes in the data automatically. This reduces the need to manually update the UI and simplifies code complexity.

You can easily bind model classes with UI controls, just like an object that holds collections. The following is an example of binding data using ObservableCollection.

using System.Collections.ObjectModel;
using System.Windows;

namespace WpfApp
{
    public partial class MainWindow : Window
    {
        public ObservableCollection Persons { get; set; }
        
        public MainWindow()
        {
            InitializeComponent();
            Persons = new ObservableCollection
            {
                new Person { Name = "Alice", Age = 30 },
                new Person { Name = "Bob", Age = 25 },
                new Person { Name = "Charlie", Age = 35 },
                new Person { Name = "Diana", Age = 28 }
            };

            PersonsDataGrid.ItemsSource = Persons;
        }
    }

    public class Person
    {
        public string Name { get; set; }
        public int Age { get; set; }
    }
}

ObservableCollection automatically handles change notifications, allowing the UI to reflect changes in the data in real-time. The UI is updated automatically when items are added or removed.

Summary and Conclusion

In this article, we have learned how to display collections using list controls in WPF. By using various list controls like ListBox, ComboBox, and DataGrid, we can provide opportunities to display data to users and interact with it. Data binding allows for easy connections between the UI and data, facilitating the simple development of applications.

Utilize the powerful features of WPF to develop richer and more flexible user interfaces. If you have any additional questions or need assistance, please feel free to contact us.