How to: Style a Row in a ListView That Implements a GridView

This example shows how to style a row in a ListView control that implements a GridView View mode.

Example

You can style a row in a ListView control by setting an ItemContainerStyle on the ListView control. Set the style for its items that are represented as ListViewItem objects. The ItemContainerStyle references the ControlTemplate objects that are used to display the row content.

The complete sample, which the following examples are extracted from, displays a collection of song information that is stored in an XML database. Each song in the database has a rating field and the value of this field specifies how to display a row of song information.

The following example shows how to define ItemContainerStyle for the ListViewItem objects that represent the songs in the song collection. The ItemContainerStyle references ControlTemplate objects that specify how to display a row of song information.

 <ListView.ItemContainerStyle>
  <Style TargetType="{x:Type ListViewItem}"  >
    <Setter Property="Template"
          Value="{StaticResource Default}"/>
    <Style.Triggers>
      <DataTrigger Binding="{Binding XPath=@Rating}" Value="5">
              <Setter Property="Template" 
              Value="{StaticResource StronglyRecommended}"/>
      </DataTrigger>
      <DataTrigger Binding="{Binding XPath=@Rating}" Value="4">
        <Setter Property="Template" 
              Value="{StaticResource Recommended}"/>
      </DataTrigger>
    </Style.Triggers>
  </Style>
</ListView.ItemContainerStyle>

The following example shows a ControlTemplate that adds the text string "Strongly Recommended" to the row. This template is referenced in the ItemContainerStyle and displays when the song's rating has a value of 5 (five). The ControlTemplate includes a GridViewRowPresenter object that lays out the contents of the row in columns as defined by the GridView view mode.

<ControlTemplate x:Key="StronglyRecommended" 
                 TargetType='{x:Type ListViewItem}'>
  <StackPanel Background="Beige">
    <GridViewRowPresenter Content="{TemplateBinding Content}"
       Columns="{TemplateBinding GridView.ColumnCollection}"/>
    <TextBlock Background="LightBlue" Text="Strongly Recommended" />
  </StackPanel>
</ControlTemplate>

The following example defines GridView.

<ListView.View>
  <GridView ColumnHeaderContainerStyle="{StaticResource MyHeaderStyle}">
    <GridViewColumn Header="Name" 
                    DisplayMemberBinding="{Binding XPath=@Name}" 
                    Width="100"/>
    <GridViewColumn Header="Time" 
                    DisplayMemberBinding="{Binding XPath=@Time}" 
                    Width="80"/>
    <GridViewColumn Header="Artist"  
                    DisplayMemberBinding="{Binding XPath=@Artist}" 
                    Width="80" />
    <GridViewColumn Header="Disk" 
                    DisplayMemberBinding="{Binding XPath=@Disk}"  
                    Width="100"/>
  </GridView>
</ListView.View>

For the complete sample, see ListView with Styled ListViewItems Sample.

See Also

Reference

ListView
GridView

Concepts

ListView Overview
Styling and Templating

Other Resources

ListView How-to Topics
ListView Samples