Partilhar via


Como: Usar modelos para Estilizar um ListView que usa GridView

Este exemplo mostra como usar os objetos DataTemplate e Style para especificar a aparência de um controle ListView que usa um modo de visualização GridView.

Exemplo

Os exemplos a seguir mostram objetos Style e DataTemplate que personalizam a aparência de um cabeçalho de coluna para um 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>

O exemplo a seguir mostra como usar esses objetos Style e DataTemplate para definir as propriedades HeaderContainerStyle e HeaderTemplate de um GridViewColumn. A propriedade DisplayMemberBinding define o conteúdo de células da coluna.

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

HeaderContainerStyle e HeaderTemplate são apenas duas das várias propriedades que você pode usar para personalizar a aparência de cabeçalho de coluna para um controle GridView. Para obter mais informações, consulte GridView Column Header Styles and Templates Overview.

O exemplo a seguir mostra como definir um DataTemplate que personaliza a aparência das células em um GridViewColumn.

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

O exemplo a seguir mostra como usar este DataTemplate para definir o conteúdo de uma célula de GridViewColumn. Esse modelo é usado em vez da propriedade DisplayMemberBinding que é mostrada no exemplo anterior GridViewColumn.

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

For the complete sample, see Exibição em Lista que usa um controle GridView com modelos de exemplo.

Consulte também

Conceitos

GridView Overview

Visão geral de ListView

Referência

ListView

GridView

Outros recursos

ListView How-to Topics

Exemplos de Exibição em Lista