Comment : appliquer un style à une ligne dans un ListView implémentant un GridView

Cet exemple montre comment appliquer un style à une ligne dans un contrôle ListView qui implémente un mode d'View GridView.

Exemple

Vous pouvez appliquer un style à une ligne dans un contrôle ListView en définissant un ItemContainerStyle sur le contrôle ListView. Définissez le style pour ses éléments qui sont représentés comme objets ListViewItem. Le ItemContainerStyle référence les objets ControlTemplate qui sont utilisés pour afficher le contenu de ligne.

L'exemple complet, duquel sont extraits les exemples suivants, affiche une collection d'informations de chanson stockée dans une base de données XML. Chaque chanson de la base de données dispose d'un champ d'évaluation dont la valeur indique comment afficher une ligne d'informations de chanson.

L'exemple suivant montre comment définir ItemContainerStyle pour les objets ListViewItem qui représentent les chansons de la collection de chansons. Le ItemContainerStyle référence les objets ControlTemplate qui indiquent comment afficher une ligne d'informations de chanson.

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

L'exemple suivant présente un ControlTemplate qui ajoute la chaîne de texte "Strongly Recommended" à la ligne. Ce modèle est référencé dans le ItemContainerStyle et s'affiche lorsque l'évaluation de la chanson a la valeur 5 (cinq). Le ControlTemplate inclut un objet GridViewRowPresenter qui dispose le contenu de la ligne dans les colonnes, comme spécifié par le mode d'affichage 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>

L'exemple suivant définit 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>

Voir aussi

Référence

ListView

GridView

Concepts

Vue d'ensemble de ListView

Application d'un style et création de modèles

Autres ressources

Rubriques "Comment utiliser le ListView"