Wpf Advanced Controls Listbox Datagrid Complete Guide

1. ListBox Example: Displaying and Interacting with Custom Objects

Step 1: Create a New WPF Project

1. Open Visual Studio.
2. Create a new WPF App (.NET Core) project named WpfListBoxExample.

Step 2: Define a Custom Data Model

Let's create a simple class to represent the data we'll display in the ListBox.

// Define a simple data model
public class Person
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public int Age { get; set; }

    public Person(string firstName, string lastName, int age)
    {
        FirstName = firstName;
        LastName = lastName;
        Age = age;
    }

    // Optional: Override ToString to provide a default display
    public override string ToString()
    {
        return $"{FirstName} {LastName}, {Age} years old";
    }
}

Step 3: Design the XAML Layout

Open MainWindow.xaml and add a ListBox control. We'll use data binding to display a collection of Person objects.

<Window x:Class="WpfListBoxExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ListBox Example" Height="450" Width="400">
    <Grid>
        <ListBox x:Name="PeopleListBox"
                 Margin="10"
                 SelectionChanged="PeopleListBox_SelectionChanged">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Margin="5">
                        <TextBlock Text="{Binding FirstName}" FontWeight="Bold" Margin="0,0,5,0"/>
                        <TextBlock Text="{Binding LastName}" Margin="0,0,5,0"/>
                        <TextBlock Text="{Binding Age}" FontStyle="Italic"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Window>

Step 4: Populate the ListBox in Code-Behind

In MainWindow.xaml.cs, initialize a list of Person objects and bind this list to the ListBox.

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

namespace WpfListBoxExample
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            // Create a list of Person objects
            List<Person> people = new List<Person>
            {
                new Person("John", "Doe", 30),
                new Person("Jane", "Smith", 25),
                new Person("Alice", "Johnson", 35)
            };
            // Bind the list to the ListBox
            PeopleListBox.ItemsSource = people;
        }

        private void PeopleListBox_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
        {
            if (PeopleListBox.SelectedItem is Person selectedPerson)
            {
                MessageBox.Show($"Selected: {selectedPerson.FirstName} {selectedPerson.LastName}, {selectedPerson.Age} years old");
            }
        }
    }
}

Step 5: Run the Application

Build and run the application. You should see a list of names and ages in the ListBox. Clicking on an item will show a message box with the selected person's details.

2. DataGrid Example: Displaying, Editing, and Sorting Data

Step 1: Create a New WPF Project

1. Open Visual Studio.
2. Create a new WPF App (.NET Core) project named WpfDataGridExample.

Step 2: Define a Custom Data Model

We'll reuse the Person class defined in the previous example.

Step 3: Design the XAML Layout

Open MainWindow.xaml and add a DataGrid control. Configure the columns to display FirstName, LastName, and Age.

<Window x:Class="WpfDataGridExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DataGrid Example" Height="450" Width="600">
    <Grid>
        <DataGrid x:Name="PeopleDataGrid"
                  Margin="10"
                  AutoGenerateColumns="False"
                  IsReadOnly="False"
                  CanUserAddRows="True"
                  CanUserDeleteRows="True"
                  SelectionMode="Extended">

            <DataGrid.ColumnHeaderStyle>
                <Style TargetType="DataGridColumnHeader">
                    <Setter Property="FontWeight" Value="Bold"/>
                </Style>
            </DataGrid.ColumnHeaderStyle>

            <DataGrid.Columns>
                <DataGridTextColumn Header="First Name" Binding="{Binding FirstName}" Width="*"/>
                <DataGridTextColumn Header="Last Name" Binding="{Binding LastName}" Width="*"/>
                <DataGridTextColumn Header="Age" Binding="{Binding Age}" Width="Auto"/>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

Step 4: Populate the DataGrid in Code-Behind

In MainWindow.xaml.cs, initialize a list of Person objects and bind this list to the DataGrid.

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

namespace WpfDataGridExample
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            // Create a list of Person objects
            List<Person> people = new List<Person>
            {
                new Person("John", "Doe", 30),
                new Person("Jane", "Smith", 25),
                new Person("Alice", "Johnson", 35)
            };
            // Bind the list to the DataGrid
            PeopleDataGrid.ItemsSource = people;
        }
    }
}

Step 5: Enable Sorting and Grouping

To enable sorting and grouping, set the CanUserSortColumns property to True and add grouping in code-behind.

Enable Sorting

<DataGrid x:Name="PeopleDataGrid"
          Margin="10"
          AutoGenerateColumns="False"
          IsReadOnly="False"
          CanUserAddRows="True"
          CanUserDeleteRows="True"
          SelectionMode="Extended"
          CanUserSortColumns="True">

Enable Grouping

In MainWindow.xaml.cs, add the following code to group the data by LastName.

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Windows;
using System.Windows.Data;

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

            // Create a list of Person objects
            List<Person> people = new List<Person>
            {
                new Person("John", "Doe", 30),
                new Person("Jane", "Smith", 25),
                new Person("Alice", "Johnson", 35)
            };

            // Create a CollectionView for grouping
            CollectionViewSource viewSource = new CollectionViewSource();
            viewSource.Source = people;
            viewSource.GroupDescriptions.Add(new PropertyGroupDescription("LastName"));

            // Bind the view to the DataGrid
            PeopleDataGrid.ItemsSource = viewSource.View;
        }
    }
}

Step 6: Run the Application

Build and run the application. You should see a DataGrid displaying the list of people. You can sort the columns by clicking on the headers and add or delete rows. The data is grouped by LastName.

Conclusion