Partilhar via


Como: Usar modelos para estilizar um ListView que usa GridView

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

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 DisplayMemberBinding propriedade define o conteúdo das células da coluna.

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

O HeaderContainerStyle e HeaderTemplate são apenas duas das várias propriedades que você pode usar para personalizar a aparência do cabeçalho da coluna para um GridView controle. Para obter mais informações, consulte Visão geral de estilos e modelos de cabeçalho de coluna GridView.

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 isso DataTemplate para definir o conteúdo de uma GridViewColumn célula. Este modelo é usado em vez da propriedade mostrada DisplayMemberBinding no exemplo anterior GridViewColumn .

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

Ver também