Edit

Share via

ListView Overview

  • Article

The ListView control provides the infrastructure to display a set of data items in using a different layout or view. For example, a user may want to display data items in a table and also to sort its columns.

Note

The types referenced in this article are available in the Code reference section.

What Is a ListView?

The ListView derives from ListBox. Typically, its items are members of a data collection and are represented as ListViewItem objects. A ListViewItem is a ContentControl and can contain only a single child element. However, that child element can be any visual element.

Defining a View Mode for a ListView

To specify a view mode for the content of a ListView control, you set the View property. One view mode that Windows Presentation Foundation (WPF) provides is GridView, which displays a collection of data items in a table that has customizable columns.

The following example shows how to define a GridView for a ListView control that displays employee information.


<ListView ItemsSource="{Binding Source={StaticResource EmployeeInfoDataSource}}">

    <ListView.View>

        <GridView AllowsColumnReorder="true" ColumnHeaderToolTip="Employee Information">

            <GridViewColumn DisplayMemberBinding="{Binding Path=FirstName}" Header="First Name" Width="100"/>

            <GridViewColumn DisplayMemberBinding="{Binding Path=LastName}" Width="100">
                <GridViewColumnHeader>Last Name
                    <GridViewColumnHeader.ContextMenu>
                        <ContextMenu MenuItem.Click="LastNameCM_Click" Name="LastNameCM">
                            <MenuItem Header="Ascending" />
                            <MenuItem Header="Descending" />
                        </ContextMenu>
                    </GridViewColumnHeader.ContextMenu>
                </GridViewColumnHeader>
            </GridViewColumn>

            <GridViewColumn DisplayMemberBinding="{Binding Path=EmployeeNumber}" Header="Employee No." Width="100"/>
        </GridView>

    </ListView.View>
</ListView>

The following illustration shows how the data appears for the previous example.

Screenshot that shows a ListView with GridView output.

You can create a custom view mode by defining a class that inherits from the ViewBase class. The ViewBase class provides the infrastructure you need to create a custom view. For more information about how to create a custom view, see Create a Custom View Mode for a ListView.

Binding Data to a ListView

Use the Items and ItemsSource properties to specify items for a ListView control. The following example sets the ItemsSource property to a data collection called EmployeeInfoDataSource.

<ListView ItemsSource="{Binding Source={StaticResource EmployeeInfoDataSource}}">

In a GridView, GridViewColumn objects bind to specified data fields. The following example binds a GridViewColumn object to a data field by specifying a Binding for the DisplayMemberBinding property.

GridViewColumn gvc1 = new GridViewColumn();
gvc1.DisplayMemberBinding = new Binding("FirstName");
gvc1.Header = "FirstName";
gvc1.Width = 100;

Dim gvc1 As New GridViewColumn()
gvc1.DisplayMemberBinding = New Binding("FirstName")
gvc1.Header = "FirstName"
gvc1.Width = 100

<GridViewColumn DisplayMemberBinding="{Binding Path=FirstName}" Header="First Name" Width="100"/>

You can also specify a Binding as part of a DataTemplate definition that you use to style the cells in a column. In the following example, the DataTemplate identified with a ResourceKey sets the Binding for a GridViewColumn. Note that this example doesn't define the DisplayMemberBinding because doing so takes precedence over CellTemplate.

<DataTemplate x:Key="myCellTemplateMonth">
  <DockPanel>
    <TextBlock Foreground="DarkBlue" HorizontalAlignment="Center">
      <TextBlock.Text>
        <Binding Path="Month"/>
      </TextBlock.Text>
    </TextBlock>
  </DockPanel>
</DataTemplate>

<GridViewColumn Header="Month" Width="80"
      CellTemplate="{StaticResource myCellTemplateMonth}"/>

Styling a ListView That Implements a GridView

The ListView control contains ListViewItem objects, which represent the data items that are displayed. You can use the following properties to define the content and style of data items:

To avoid alignment issues between cells in a GridView, do not use the ItemContainerStyle to set properties or add content that affects the width of an item in a ListView. For example, an alignment issue can occur when you set the Margin property in the ItemContainerStyle. To specify properties or define content that affects the width of items in a GridView, use the properties of the GridView class and its related classes, such as GridViewColumn.

For more information about how to use GridView and its supporting classes, see GridView Overview.

If you define an ItemContainerStyle for a ListView control and also define an ItemTemplate, you must include a ContentPresenter in the style in order for the ItemTemplate to work correctly.

Do not use the HorizontalContentAlignment and VerticalContentAlignment properties for ListView content displayed by a GridView. To specify the alignment of content in a column of a GridView, define a CellTemplate.

Sharing the Same View Mode

Two ListView controls cannot share the same view mode at the same time. If you try to use the same view mode with more than one ListView control, an exception occurs.

To specify a view mode that can be simultaneously used by more than one ListView, use templates or styles.

Creating a Custom View Mode

Customized views like GridView are derived from the ViewBase abstract class, which provides the tools to display data items represented as ListViewItem objects.

Code reference

The following objects are referenced in this article:

  • EmployeeInfoDataSource data collection. If you're using Visual Basic .NET, the Window element is declared slightly different from what you see in the example code:

    <Window x:Class="SDKSample.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="OnLoad"
        xmlns:ds="clr-namespace:SDKSample">

    <Window.Resources>
        <ObjectDataProvider x:Key="EmployeeInfoDataSource" ObjectType="{x:Type ds:myEmployees}" />
    </Window.Resources>

  • EmployeeInfo class, which is used as the type for the EmployeeInfoDataSource data collection.

    public class EmployeeInfo
{
    private string _firstName;
    private string _lastName;
    private string _employeeNumber;

    public string FirstName
    {
        get {return _firstName;}
        set {_firstName = value;}
    }

    public string LastName
    {
        get {return _lastName;}
        set {_lastName = value;}
    }

    public string EmployeeNumber
    {
        get {return _employeeNumber;}
        set {_employeeNumber = value;}
    }

    public EmployeeInfo(string firstname, string lastname, string empnumber)
    {
        _firstName = firstname;
        _lastName = lastname;
        _employeeNumber = empnumber;
    }
}

    Public Class EmployeeInfo
    Private _firstName As String
    Private _lastName As String
    Private _employeeNumber As String

    Public Property FirstName() As String
        Get
            Return _firstName
        End Get
        Set(ByVal value As String)
            _firstName = value
        End Set
    End Property

    Public Property LastName() As String
        Get
            Return _lastName
        End Get
        Set(ByVal value As String)
            _lastName = value
        End Set
    End Property

    Public Property EmployeeNumber() As String
        Get
            Return _employeeNumber
        End Get
        Set(ByVal value As String)
            _employeeNumber = value
        End Set
    End Property

    Public Sub New(ByVal firstname As String, ByVal lastname As String, ByVal empnumber As String)
        _firstName = firstname
        _lastName = lastname
        _employeeNumber = empnumber
    End Sub
End Class

See also