Partilhar via


Como: Estilizar uma linha em um ListView que implementa um GridView

This example shows how to style a row in a ListView control that implements a GridView View mode.

Exemplo

Você pode estilizar uma linha em um controle ListView definindo um ItemContainerStyle no controle ListView. Defina o estilo para seus itens que são representados como objetos ListViewItem. O ItemContainerStyle referencia os objetos ControlTemplate que são usados para exibir o conteúdo da linha.

O exemplo completo, do qual os exemplos a seguir foram extraídos, exibe um conjunto de informações de músicas que está armazenado em uma base de dados XML. Cada música na base de dados tem um campo de classificação e o valor deste campo especifica como exibir uma linha de informações da música.

O exemplo a seguir mostra como definir ItemContainerStyle para os objetos ListViewItem que representam as músicas na coleção de músicas. O ItemContainerStyle referencia os objetos ControlTemplate que especificam como exibir uma linha de informações sobre a música.

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

O exemplo a seguir mostra um ControlTemplate que adiciona a sequência de texto "Strongly Recommended" à linha. Este modelo é referenciado no ItemContainerStyle e exibe quando a classificação da música tem um valor de 5 (cinco). O ControlTemplate inclui um objeto GridViewRowPresenter que dispõe o conteúdo da linha em colunas, conforme definido pelo modo de exibição 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>

O exemplo a seguir 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>

For the complete sample, see ListView com o exemplo de ListViewItems estilizado.

Consulte também

Conceitos

Visão geral de ListView

Styling and Templating

Referência

ListView

GridView

Outros recursos

ListView How-to Topics

Exemplos de Exibição em Lista