ListView Overview

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

This topic contains the following sections.

• What Is a ListView?
• Defining a View Mode for a ListView
• Binding Data to a ListView
• Styling a ListView That Implements a GridView
• Sharing the Same View Mode
• Creating a Custom View Mode
• Related Topics

What Is a ListView?

The ListView control is an ItemsControl that is derived 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. For the complete sample, see ListView That Uses a GridView Sample.

<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.

You can create a custom view mode by defining a class that inherits from the ViewBase class. The ViewBase class provides the infrastructure that you need to create a custom view. For more information about how to create a custom view, see How to: 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 that is called EmployeeInfoDataSource. For the complete sample, see ListView That Uses a GridView Sample.

<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. For the complete sample, see ListView That Uses a GridView Sample.

GridViewColumn gvc1 = 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 that is identified with a ResourceKey sets the Binding for a GridViewColumn. Note that this example does not define the DisplayMemberBinding because doing so overrides the binding that is specified by DataTemplate. For the complete sample, see ListView That Uses a GridView with Templates Sample.

<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:

• On the ListView control, use the ItemTemplate, ItemTemplateSelector, and ItemContainerStyle properties.

• On the ListViewItem control, use the ContentTemplate and ContentTemplateSelector properties.

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 that is displayed by using 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. For an example of how to define views as Resources, see ListView with Multiple Views Sample.

Creating a Custom View Mode

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

For an example of a custom view mode, see ListView with Multiple Views Sample.

See Also

Concepts

GridView Overview

Optimizing Performance: Controls

Reference

GridView

ListView

ListViewItem

Binding

Other Resources

ListView How-to Topics

ListView Samples

Change History

Date	History	Reason
February 2009	Corrected the last example in "Binding Data to a ListView."	Customer feedback.