WPF: Listview with a gridview

This entry is part 35 of 54 in the series Learn WPF

Typically for a listview, its items are members of a data collection and are represented as ListViewItem objects.

To use a listview, we will usually specify a view mode such as a gridview.  A gridview displays a collection of data items in a table that has customizable columns.

MainWindow.xaml
<Window x:Class="ListViewNSpace.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:src="clr-namespace:ListViewNSpace"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.Resources>
            <src:Employees x:Key="employees"/>
        </Grid.Resources>
        <ListView ItemsSource="{Binding Source={StaticResource employees}}">
            <ListView.View>
                <GridView AllowsColumnReorder="true" ColumnHeaderToolTip="Employee Information">
                    <GridViewColumn DisplayMemberBinding="{Binding Path=FirstName}" Header="First Name" Width="100"/>
                    <GridViewColumn DisplayMemberBinding="{Binding Path=LastName}" Header="Last Name" Width="100"/>
                    <GridViewColumn DisplayMemberBinding="{Binding Path=EmployeeNumber}" Header="Employee No." Width="100"/>
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
</Window>

The presentation of the data items in a ListView is defined by its view mode, which is specified by the View property.  The view is defined in line 11 and its mode GridView in line 12.

Each GridViewColumn is one column in the gridview as in line 13.

To make the MainWindow.xaml looks cleaner, we can simplify it as below.

A cleaner MainWindow.xaml
<Window x:Class="ListViewNSpace.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:src="clr-namespace:ListViewNSpace"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.Resources>
            <src:Employees x:Key="employees"/>
        </Grid.Resources>
        <ListView ItemsSource="{StaticResource employees}">
            <ListView.View>
                <GridView AllowsColumnReorder="true" ColumnHeaderToolTip="Employee Information">
                    <GridViewColumn DisplayMemberBinding="{Binding FirstName}" Header="First Name" Width="100"/>
                    <GridViewColumn DisplayMemberBinding="{Binding LastName}" Header="Last Name" Width="100"/>
                    <GridViewColumn DisplayMemberBinding="{Binding EmployeeNumber}" Header="Employee No." Width="100"/>
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
</Window>

MainWindow.xaml.cs
using System;
using System.Collections.ObjectModel;
using System.Windows;

namespace ListViewNSpace
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    /// 

    public class Employee
    {
        public String FirstName { get; set; }
        public String LastName { get; set; }
        public String EmployeeNumber { get; set; }

        public Employee(String firstName, String lastName, String employeeNumber)
        {
            this.FirstName = firstName;
            this.LastName = lastName;
            this.EmployeeNumber = employeeNumber;
        }
    }

    public class Employees : ObservableCollection<Employee>
    {
        public Employees()
        {
            Add(new Employee("Michael", "Anderberg",
                    "1812"));
            Add(new Employee("Chris", "Ashton",
                    "1290"));
            Add(new Employee("Cassie", "Hicks",
                    "1562"));
            Add(new Employee("Guido", "Pica",
                    "1523"));
        }
    }

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

 

 

Series Navigation<< WPF: Using instance name for ListBox
WPF: Using an instance name for the listview >>

Leave a comment

Leave a Reply