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

  • Artículo

En este ejemplo se muestra cómo aplicar un estilo a una fila de un control ListView que usa un modo GridViewView.

Ejemplo

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

En el ejemplo completo, del cual se extraen los siguientes ejemplos, se muestra una colección de información de la canción que se almacena en una base de datos XML. Cada canción de la base de datos tiene un campo de clasificación y el valor de este campo especifica cómo mostrar una fila de información de la canción.

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

 <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. Se hace referencia a esta plantilla en ItemContainerStyle y se muestra cuándo la calificación de la canción tiene un valor de 5 (cinco). ControlTemplate incluye un objeto GridViewRowPresenter que muestra los contenidos de la fila en columnas tal y como se define mediante el modo de vista 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>

Vea también