ListView Control

ListView

The ListView control provides a tabular view of data, similar to a ListBox but with multiple columns.

To set up the columns of a ListView, use the Columns property, and provide a collection of GridViewColumn objects. For each GridViewColumn, you will typically want to set:

Header: the content displayed in the column header
Width: the width of the column
One of DisplayMemberBinding, CellTemplate and CellTemplateSelector. For simple textual display, specify DisplayMemberBinding. To apply a DataTemplate, specify CellTemplate: the DataTemplate will be applied to the item being shown in the row, just as in a ListBox. To choose between a set of DataTemplates based on custom criteria, use CellTemplateSelector.

The following example uses DisplayMemberBinding for a simple textual display:

CopyExample Usage

<ms:ListView ItemsSource="{Binding}">
  <ms:ListView.Columns>
    <ms:GridViewColumn Header="Name" Width="100" DisplayMemberBinding="{Binding Name}" />
    <ms:GridViewColumn Header="Owner" Width="100" DisplayMemberBinding="{Binding Owner}" />
    <ms:GridViewColumn Header="Height" Width="100" DisplayMemberBinding="{Binding Height}" />
  </ms:ListView.Columns>
</ms:ListView>

The following example uses CellTemplate to allow users to edit the displayed value:

CopyExample Usage

<UserControl.Resources>
  <DataTemplate x:Key="NameEditor">
    <TextBox Text="{Binding Name, Mode=TwoWay}" />
  </DataTemplate>
</UserControl.Resources>

<ms:ListView ItemsSource="{Binding}">
  <ms:ListView.Columns>
    <ms:GridViewColumn Header="Name" Width="100" CellTemplate="{StaticResource NameEditor}" />
  </ms:ListView.Columns>
</ms:ListView>

Customizing the ListView Control

You can customize the appearance of headers using the ColumnHeaderTemplate and ColumnHeaderContainerStyle properties. Per-column customization is available via the HeaderTemplate, HeaderTemplateSelector and HeaderContainerStyle properties on GridViewColumn.

To allow users to reorder the columns, set the AllowsColumnReorder property.