Partilhar via

Como criar uma linha em um ListView que implemente um GridView

  • Artigo

Este exemplo mostra como estilizar uma linha em um ListView controle que usa um GridViewView modo.

Exemplo

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

O exemplo completo, do qual os exemplos a seguir são extraídos, exibe uma coleção de informações de música armazenadas em um banco de dados XML. Cada música no banco de dados tem um campo de classificação e o valor desse campo especifica como exibir uma linha de informações sobre a música.

O exemplo a seguir mostra como definir ItemContainerStyle os ListViewItem objetos que representam as músicas na coleção de músicas. Os ItemContainerStyle objetos de referência ControlTemplate que especificam como exibir uma linha de informações da 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 cadeia de caracteres "Strongly Recommended" de texto à linha. Este modelo é referenciado ItemContainerStyle no e é exibido quando a classificação da música tem um valor de 5 (cinco). O ControlTemplate inclui um GridViewRowPresenter objeto que apresenta o conteúdo da linha em colunas, conforme definido pelo GridView modo de exibição.

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

Confira também