Partekatu honen bidez:

Cómo estilizar una fila en un ListView que implementa un GridView

Este ejemplo muestra cómo dar estilo a una fila en un ListView control que usa un modo GridViewView.

Ejemplo

Puede aplicar estilo a una fila en un ListView control estableciendo un ItemContainerStyle en los ListView controles. Establezca el estilo de sus elementos representados como ListViewItem objetos. El ItemContainerStyle hace referencia a los objetos ControlTemplate que se usan 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 canción almacenada 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 canción.

En el ejemplo siguiente se muestra cómo definir ItemContainerStyle para los ListViewItem objetos que representan las canciones de la colección de canciones. Los ItemContainerStyle hacen referencia a ControlTemplate objetos que indican cómo mostrar una fila de información de 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 ControlTemplate que agrega la cadena "Strongly Recommended" de texto a la fila. Se hace referencia a esta plantilla en ItemContainerStyle y se muestra cuando la calificación de la canción tiene un valor de 5 (cinco). ControlTemplate incluye un GridViewRowPresenter objeto que establece el contenido de la fila en columnas tal como se define en el GridView modo de vista.

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

Consulte también

  • Last updated on