How to: Use Templates to Style a ListView That Uses GridView

 

This example shows how to use the DataTemplate and Style objects to specify the appearance of a ListView control that uses a GridView view mode.

The following examples show Style and DataTemplate objects that customize the appearance of a column header for a GridViewColumn.

    <Style x:Key="myHeaderStyle" TargetType="{x:Type GridViewColumnHeader}">
      <Setter Property="Background" Value="LightBlue"/>
    </Style>

    <DataTemplate x:Key="myHeaderTemplate">
      <DockPanel>
        <CheckBox/>
        <TextBlock FontSize="16" Foreground="DarkBlue">
          <TextBlock.Text>
            <Binding/>
          </TextBlock.Text>
        </TextBlock>
      </DockPanel>
    </DataTemplate>

The following example shows how to use these Style and DataTemplate objects to set the HeaderContainerStyle and HeaderTemplate properties of a GridViewColumn. The DisplayMemberBinding property defines the content of the column cells.

            <GridViewColumn Header="Month" Width="80"
                  HeaderContainerStyle="{StaticResource myHeaderStyle}"
                  HeaderTemplate="{StaticResource myHeaderTemplate}"
                  DisplayMemberBinding="{Binding Path=Month}"/>

The HeaderContainerStyle and HeaderTemplate are only two of several properties that you can use to customize column header appearance for a GridView control. For more information, see GridView Column Header Styles and Templates Overview.

The following example shows how to define a DataTemplate that customizes the appearance of the cells in a GridViewColumn.

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

The following example shows how to use this DataTemplate to define the content of a GridViewColumn cell. This template is used instead of the DisplayMemberBinding property that is shown in the previous GridViewColumn example.

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

ListView
GridView
GridView Overview
How-to Topics
ListView Overview

Show: