Vue d'ensemble de TreeView

Article
10/18/2023

Le TreeView contrôle permet d’afficher des informations dans une structure hiérarchique à l’aide de nœuds réductibles. Cette rubrique présente les TreeView contrôles et TreeViewItem les contrôles, et fournit des exemples simples de leur utilisation.

Qu’est-ce qu’un contrôle TreeView ?

TreeView est un ItemsControl qui imbrication des éléments à l’aide TreeViewItem de contrôles. L’exemple suivant crée un TreeView.

<TreeView Name="myTreeViewEvent" >
  <TreeViewItem Header="Employee1" IsSelected="True">
    <TreeViewItem Header="Jesper Aaberg"/>
    <TreeViewItem Header="Employee Number">
      <TreeViewItem Header="12345"/>
    </TreeViewItem>
    <TreeViewItem Header="Work Days">
      <TreeViewItem Header="Monday"/>
      <TreeViewItem Header="Tuesday"/>
      <TreeViewItem Header="Thursday"/>
    </TreeViewItem>
  </TreeViewItem>
  <TreeViewItem Header="Employee2">
    <TreeViewItem Header="Dominik Paiha"/>
    <TreeViewItem Header="Employee Number">
      <TreeViewItem Header="98765"/>
    </TreeViewItem>
    <TreeViewItem Header="Work Days">
      <TreeViewItem Header="Tuesday"/>
      <TreeViewItem Header="Wednesday"/>
      <TreeViewItem Header="Friday"/>
    </TreeViewItem>
  </TreeViewItem>
</TreeView>

Création d’un contrôle TreeView

Le TreeView contrôle contient une hiérarchie de TreeViewItem contrôles. Un TreeViewItem contrôle est un HeaderedItemsControl contrôle qui a une collection et une Header Items collection.

Si vous définissez un TreeView langage XAML (Extensible Application Markup Language), vous pouvez définir explicitement le Header contenu d’un TreeViewItem contrôle et les éléments qui composent sa collection. L’illustration précédente montre cette méthode.

Vous pouvez également spécifier une ItemsSource source de données, puis spécifier une HeaderTemplate et ItemTemplate définir le TreeViewItem contenu.

Pour définir la disposition d’un TreeViewItem contrôle, vous pouvez également utiliser des HierarchicalDataTemplate objets. Pour plus d’informations illustrées par un exemple, consultez la page Utiliser SelectedValue, SelectedValuePath et SelectedItem.

Si un élément n’est pas un TreeViewItem contrôle, il est automatiquement placé entre un TreeViewItem contrôle lorsque le TreeView contrôle est affiché.

Développer et réduire un élément TreeViewItem

Si l’utilisateur développe un TreeViewItem, la IsExpanded propriété est définie sur true. Vous pouvez également développer ou réduire un TreeViewItem sans action directe de l’utilisateur en définissant la IsExpanded propriété sur true (développer) ou false (réduire). Lorsque cette propriété change, une ou Collapsed un Expanded événement se produit.

Lorsque la BringIntoView méthode est appelée sur un TreeViewItem contrôle, les TreeViewItem contrôles parent et les contrôles parent TreeViewItem s’étendent. Si un élément TreeViewItem n’est pas visible ou partiellement visible, les TreeView défilements le rendent visible.

Sélection d’un élément TreeViewItem

Lorsqu’un utilisateur clique sur un TreeViewItem contrôle pour le sélectionner, l’événement Selected se produit et sa IsSelected propriété est définie truesur . Le TreeViewItem contrôle devient également le SelectedItem TreeView contrôle. À l’inverse, lorsque la sélection change d’un TreeViewItem contrôle, son Unselected événement se produit et sa IsSelected propriété est définie falsesur .

La SelectedItem propriété sur le TreeView contrôle est une propriété en lecture seule ; par conséquent, vous ne pouvez pas la définir explicitement. La SelectedItem propriété est définie si l’utilisateur clique sur un TreeViewItem contrôle ou lorsque la IsSelected propriété est définie true sur le TreeViewItem contrôle.

Utilisez la SelectedValuePath propriété pour spécifier un SelectedValue SelectedItem. Pour plus d’informations, consultez la page Utiliser SelectedValue, SelectedValuePath et SelectedItem.

Vous pouvez inscrire un gestionnaire d’événements sur l’événement SelectedItemChanged afin de déterminer quand une modification sélectionnée est modifiée TreeViewItem . Celui RoutedPropertyChangedEventArgs<T> qui est fourni au gestionnaire d’événements spécifie le OldValue, qui est la sélection précédente, et NewValuele , qui est la sélection actuelle. Les deux valeurs peuvent être null si l’application ou l’utilisateur n’a effectué aucune sélection (aussi bien une sélection précédente qu’une sélection en cours).

Style de TreeView

Le style par défaut d’un TreeView contrôle le place à l’intérieur d’un StackPanel objet qui contient un ScrollViewer contrôle. Lorsque vous définissez les propriétés et les Width propriétés d’un TreeView, ces valeurs sont utilisées pour dimensionner l’objet StackPanel qui affiche le TreeView Height . Si le contenu à afficher est supérieur à la zone d’affichage, un ScrollViewer écran s’affiche automatiquement afin que l’utilisateur puisse parcourir le TreeView contenu.

Pour personnaliser l’apparence d’un TreeViewItem contrôle, définissez la Style propriété sur une propriété personnalisée Style.

L’exemple suivant montre comment définir les valeurs et les Foreground valeurs de propriété d’un TreeViewItem contrôle à l’aide d’un Style.FontSize

<Style TargetType="{x:Type TreeViewItem}">
  <Setter Property="Foreground" Value="Blue"/>
  <Setter Property="FontSize" Value="12"/>
</Style>

Ajouter des images et d’autres contenus à des éléments TreeView

Vous pouvez inclure plusieurs objets dans le Header contenu d’un TreeViewItem. Pour inclure plusieurs objets dans le Header contenu, placez les objets à l’intérieur d’un contrôle de disposition, tel qu’un Panel ou StackPanel.

L’exemple suivant montre comment définir l’un Header comme un CheckBox TreeViewItem et TextBlock qui sont tous deux placés dans un DockPanel contrôle.

<TreeViewItem>
  <TreeViewItem.Header>
    <DockPanel>
      <CheckBox/>
      <TextBlock>
        TreeViewItem Text
      </TextBlock>
    </DockPanel>
  </TreeViewItem.Header>
</TreeViewItem>

L’exemple suivant montre comment définir un DataTemplate qui contient un Image et un TextBlock qui sont placés dans un DockPanel contrôle. Vous pouvez utiliser un DataTemplate pour définir ou HeaderTemplate ItemTemplate pour un TreeViewItem.

<DataTemplate x:Key="NewspaperTVItem">
  <DockPanel>
    <Image Source="images\icon.jpg"/>
    <TextBlock VerticalAlignment="center" Text ="{Binding Path=Name}"/>
  </DockPanel>
</DataTemplate>

Partager via