Partager via

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

  • Article

Cet exemple montre comment mettre en forme une ligne dans un ListView contrôle qui utilise un GridView View mode.

Exemple

Vous pouvez styler une ligne dans un ListView contrôle en définissant un ItemContainerStyle contrôle sur le ListView contrôle. Définissez le style de ses éléments représentés en tant qu’objets ListViewItem . Référence ItemContainerStyle les ControlTemplate objets utilisés pour afficher le contenu de ligne.

L’exemple complet, à partir duquel les exemples suivants sont extraits, affiche une collection d’informations de chanson stockées dans une base de données XML. Chaque chanson de la base de données est associée à un champ d’évaluation. La valeur de ce champ spécifie comment afficher une ligne d’informations sur la chanson.

L’exemple suivant montre comment définir ItemContainerStyle pour les ListViewItem objets qui représentent les chansons de la collection de chansons. Objets ItemContainerStyle de référence ControlTemplate qui spécifient comment afficher une ligne d’informations sur la 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 montre une ControlTemplate chaîne de texte qui ajoute la chaîne "Strongly Recommended" de texte à la ligne. Ce modèle est référencé dans le ItemContainerStyle modèle et s’affiche lorsque l’évaluation de la chanson a une valeur de 5 (cinq). Inclut ControlTemplate un GridViewRowPresenter objet qui présente le contenu de la ligne dans les colonnes, tel que défini 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