Share via


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

Mise à jour : novembre 2007

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

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>

Pour l'exemple complet, consultez ListView avec des ListViewItems mis en forme avec des styles, exemple.

Voir aussi

Concepts

Vue d'ensemble de ListView

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

Référence

ListView

GridView

Autres ressources

Rubriques Comment relatives à ListView

Exemples de ListView