TreeView

Le contrôle TreeView affiche des informations dans une structure hiérarchique à l’aide de nœuds repliables. Cet article présente les contrôles TreeView et TreeViewItem, et fournit des exemples de leur utilisation.

L’illustration suivante est un exemple de contrôle TreeView qui a imbriqué des contrôles TreeViewItem :

Qu’est-ce qu’un TreeView ?

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

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

Si vous définissez un TreeView à l’aide du 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 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 placé par un TreeViewItem contrôle lorsque le TreeView contrôle est affiché.

Développer et replier un 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, 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 son contrôle parent TreeViewItem s'étendent. S'il TreeViewItem n'est pas visible ou partiellement visible, le TreeView défile pour le rendre visible.

Sélectionner un 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 sur true. Le TreeViewItem devient également le SelectedItem du contrôle TreeView. En revanche, lorsque la sélection change d’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. Vous ne pouvez donc 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 pour déterminer quand la sélection TreeViewItem change. Le RoutedPropertyChangedEventArgs<T> fourni au gestionnaire d’événements spécifie le OldValue, qui est la sélection précédente, et le NewValue, 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.

Styliser un TreeView

Le style par défaut d’un TreeView contrôleur le positionne à l’intérieur d’un StackPanel objet contenant un ScrollViewer contrôleur. Lorsque vous définissez les propriétés Width et Height d’un TreeView, ces valeurs sont utilisées pour ajuster la taille de 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>

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 le Header d’un TreeViewItem comme un CheckBox et un TextBlock qui sont tous deux placés dans un contrôle DockPanel.

<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 le HeaderTemplate ou le ItemTemplate pour un TreeViewItem.

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

Tâches courantes

Le tableau suivant répertorie les tâches courantes pour l’utilisation du contrôle TreeView :

Titre	Descriptif
Créer des TreeViews simples ou complexes	Découvrez comment créer des contrôles TreeView avec différentes structures.
Utilisez SelectedValue, SelectedValuePath et SelectedItem	Découvrez comment utiliser les propriétés de sélection dans un TreeView.
Lier un TreeView aux données dont la profondeur est indéterminable	Découvrez comment lier un TreeView à des données hiérarchiques avec une profondeur inconnue.
Améliorer les performances d’un TreeView	Découvrez comment optimiser les performances de TreeView.
Rechercher un TreeViewItem dans un TreeView	Découvrez comment localiser un TreeViewItem spécifique dans un TreeView.

Sections connexes

Vue d’ensemble de la liaison de données

Vue d’ensemble de la création de modèles de données

Référence

TreeView TreeViewItem

Styles et modèles

Vous pouvez modifier la valeur par défaut ControlTemplate pour donner au TreeView contrôle une apparence unique. Pour plus d’informations, consultez Quels sont les styles et les modèles ? et Comment créer un modèle pour un contrôle.

Pièces

Le TreeView contrôle n’a aucune partie nommée.

Lorsque vous créez un ControlTemplate pour un TreeViewmodèle, votre modèle peut contenir un ItemsPresenter dans un ScrollViewer. (Affiche ItemsPresenter chaque élément dans le TreeView; la fonction ScrollViewer active le défilement du contrôle). Si ce ItemsPresenter n’est pas l’enfant direct du ScrollViewer, vous devez donner au ItemsPresenter le nom ItemsPresenter.

États visuels

Le tableau suivant répertorie les états visuels du TreeView contrôle.

Nom VisualState	Nom du VisualStateGroup	Descriptif
Valide	ValidationStates	Le contrôle utilise la Validation classe et la Validation.HasError propriété jointe est false.
NonValideConcentré	ValidationStates	La Validation.HasError propriété jointe est true et le contrôle a le focus.
InvalideNonFocalisé	ValidationStates	La propriété Validation.HasError attachée est true et le contrôle n’a pas le focus.

Éléments de l'élément de vue d'arbre

Le tableau suivant répertorie les parties nommées du TreeViewItem contrôle.

Composant	Type	Descriptif
PART_Header	FrameworkElement	Élément visuel qui contient le contenu de l’en-tête du TreeView contrôle.

États de TreeViewItem

Le tableau suivant répertorie les états visuels du TreeViewItem contrôle.

Nom VisualState	Nom du VisualStateGroup	Descriptif
Normale	CommonStates	État par défaut.
Survol de la souris	CommonStates	Le pointeur de la souris est positionné sur le TreeViewItem.
Disabled	CommonStates	Le TreeViewItem est désactivé.
Focused	FocusStates	TreeViewItem est sélectionné.
Floue	FocusStates	Le TreeViewItem n’a pas le focus.
Expanded	États d'expansion	Le TreeViewItem contrôle est étendu.
Effondré	États d'expansion	Le TreeViewItem contrôle est réduit.
ContientDesÉléments	ÉtatDesArticles	Le TreeViewItem a des éléments.
Pas d'articles	ÉtatDesArticles	Le TreeViewItem ne contient pas d’éléments.
Sélectionnée	ÉtatsDeSélection	L’option TreeViewItem est sélectionnée.
SélectionnéInactif	ÉtatsDeSélection	L’option TreeViewItem est sélectionnée, mais pas active.
Non sélectionné	ÉtatsDeSélection	L’option TreeViewItem n’est pas sélectionnée.
Valide	ValidationStates	Le contrôle utilise la Validation classe et la Validation.HasError propriété jointe est false.
NonValideConcentré	ValidationStates	La Validation.HasError propriété jointe indique que le contrôle a le focus true.
InvalideNonFocalisé	ValidationStates	La propriété Validation.HasError attachée est que true le contrôle n’a pas le focus.

Sections connexes

Vue d'ensemble des liens de donnéesVue d'ensemble des modèles de données