Cómo: Utilizar plantillas para aplicar un estilo a un control ListView que utiliza un modo GridView

  • Artículo

En este ejemplo se muestra cómo usar los objetos DataTemplate y Style para especificar la apariencia de un control ListView que usa un modo de vista GridView.

Ejemplo

En los ejemplos siguientes se muestran objetos Style y DataTemplate que personalizan la apariencia de un encabezado de columna para 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>

En el ejemplo siguiente se muestra cómo usar estos objetos Style y DataTemplate para establecer las propiedades HeaderContainerStyle y HeaderTemplate de GridViewColumn. La propiedad DisplayMemberBinding define el contenido de las celdas de columna.

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

HeaderContainerStyle y HeaderTemplate son solo dos de varias propiedades que puede usar para personalizar la apariencia del encabezado de columna para un control GridView. Para más información, consulte Información general sobre plantillas y estilos de encabezado de columna en modo GridView.

En el ejemplo siguiente se muestra cómo definir un objeto DataTemplate que personaliza la apariencia de las celdas de GridViewColumn.

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

En el ejemplo siguiente se muestra cómo usar este DataTemplate para definir el contenido de una celda GridViewColumn. Esta plantilla se usa en lugar de la propiedad DisplayMemberBinding que se muestra en el ejemplo anterior de GridViewColumn.

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

Vea también