Partager via

Vue d’ensemble de TreeView

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 contrôles TreeView et TreeViewItem, et fournit des exemples simples de leur utilisation.

Qu’est-ce qu’un TreeView ?

TreeView est un ItemsControl qui imbrique les éléments à l'aide de TreeViewItem 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 TreeView

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

Si vous définissez un TreeView en utilisant le langage de balisage d'application extensible (XAML), vous pouvez définir explicitement le Header contenu d’un contrôle TreeViewItem et les éléments qui composent sa collection. L’illustration précédente illustre 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 et un exemple, consultez Utiliser SelectedValue, SelectedValuePath et SelectedItem.

Si un élément n'est pas un TreeViewItem contrôle, il est automatiquement encadré par un TreeViewItem contrôle lorsque le TreeView contrôle est affiché.

Extension et repli d’un élément de vue arborescente

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, un Expanded ou un Collapsed événement se produit.

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

TreeViewItem Sélection

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 sur true. Le TreeViewItem devient également le SelectedItem du contrôle TreeView. À l’inverse, lorsque la sélection change depuis un TreeViewItem contrôle, son Unselected événement se produit et sa IsSelected propriété est définie sur false.

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 SelectedValueSelectedItem. Pour plus d’informations, consultez Utiliser SelectedValue, SelectedValuePath et SelectedItem.

Vous pouvez inscrire un gestionnaire d’événements sur l’événement SelectedItemChanged afin de déterminer quand un TreeViewItem sélectionné change. 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. L’une ou l’autre valeur peut être null si l’application ou l’utilisateur n’a pas effectué de sélection précédente ou actuelle.

TreeView Style

Le style par défaut d'un contrôle TreeView le place à l’intérieur d'un objet StackPanel contenant un contrôle ScrollViewer. Lorsque vous définissez les propriétés Width et Height d’un TreeView, ces valeurs sont utilisées pour dimensionner l’objet StackPanel qui affiche le TreeView. 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 des propriétés Foreground et FontSize d’un contrôle TreeViewItem à l’aide d’un Style.

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

Ajout d’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 le Header comme un TreeViewItem et un CheckBox, tous deux enfermés dans un contrôle TextBlock.

<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 HeaderTemplateItemTemplate pour un TreeViewItem.

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

Voir aussi