Compartir a través de


Cómo: Aplicar un estilo a una fila en un control ListView que implementa una clase GridView

Actualización: noviembre 2007

En este ejemplo se muestra cómo aplicar un estilo a una fila de un control ListView que implementa un modo View para GridView.

Ejemplo

Puede aplicar un estilo a una fila de un control ListView estableciendo una propiedad ItemContainerStyle en el control ListView. Establezca el estilo para sus elementos, que se representan como objetos ListViewItem. ItemContainerStyle hace referencia a los objetos ControlTemplate que se utilizan para mostrar el contenido de la fila.

El ejemplo completo, del que se extraen los ejemplos siguientes, muestra una colección de información de canciones almacenada en una base de datos XML. Cada canción de la base de datos tiene un campo de calificación cuyo valor especifica cómo mostrar una fila de información de la canción.

En el ejemplo siguiente se muestra cómo definir ItemContainerStyle para los objetos ListViewItem que representan las canciones de la colección de canciones. ItemContainerStyle hace referencia a objetos ControlTemplate que especifican cómo mostrar una fila de información de la canción.

   <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>

En el ejemplo siguiente se muestra un objeto ControlTemplate que agrega la cadena de texto "Strongly Recommended" a la fila. La propiedad ItemContainerStyle hace referencia a esta plantilla, que se muestra cuando la calificación de la canción tiene un valor de cinco. ControlTemplate incluye un objeto GridViewRowPresenter que distribuye el contenido de la fila en columnas, de acuerdo con lo definido en el modo de vista de GridView.

<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>

En el ejemplo siguiente se define 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>

Para obtener el ejemplo completo, vea Ejemplo ListView with Styled ListViewItems.

Vea también

Conceptos

Información general sobre ListView

Aplicar estilos y plantillas

Referencia

ListView

GridView

Otros recursos

Temas "Cómo..." sobre ListView

Ejemplos de ListView