Vue d'ensemble de TreeView
Mise à jour : novembre 2007
Le contrôle TreeView offre un moyen d'afficher des informations dans une structure hiérarchique en utilisant des nœuds réductibles. Cette rubrique présente les contrôles TreeView et TreeViewItem et fournit des exemples simples de leur utilisation.
Cette rubrique comprend les sections suivantes.
- Qu'est-ce qu'un TreeView ?
- Création d'un TreeView
- Développement et réduction d'un TreeViewItem
- Sélection d'un TreeViewItem
- Style d'un TreeView
- Ajout d'images et autre contenu aux éléments TreeView
- Rubriques connexes
Qu'est-ce qu'un TreeView ?
TreeView est un ItemsControl qui imbrique les éléments en utilisant les 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éation d'un TreeView
Le contrôle TreeView contient une hiérarchie de contrôles TreeViewItem. Un contrôle TreeViewItem est un HeaderedItemsControl qui dispose d'un Header et d'une collection Items.
Si vous définissez un TreeView en utilisant XAML (Extensible Application Markup Language), vous pouvez définir explicitement le contenu Header d'un contrôle TreeViewItem et les éléments qui composent sa collection. L'illustration précédente démontre cette méthode.
Vous pouvez également spécifier un ItemsSource comme source de données, puis spécifier un HeaderTemplate et un ItemTemplate pour définir le contenu TreeViewItem.
Pour définir la disposition d'un contrôle TreeViewItem, vous pouvez également utiliser des objets HierarchicalDataTemplate. Pour obtenir des informations supplémentaires et un exemple, consultez Comment : utiliser SelectedValue, SelectedValuePath et SelectedItem.
Si un élément n'est pas un contrôle TreeViewItem, il est automatiquement entouré par un contrôle TreeViewItem lorsque le contrôle TreeView est affiché.
Développement et réduction d'un TreeViewItem
Si l'utilisateur développe un TreeViewItem, la propriété IsExpanded a la valeur true. Vous pouvez également développer ou réduire un TreeViewItem sans action d'utilisateur directe, en affectant à la propriété IsExpanded la valeur true (développer) ou false (réduire). Lorsque cette propriété change, un évènement Expanded ou Collapsed se produit.
Lorsque la méthode BringIntoView est appelée sur un contrôle TreeViewItem, le TreeViewItem et ses contrôles TreeViewItem parents sont développés. Si un TreeViewItem n'est pas visible ou partiellement visible, le TreeView fait défiler pour le rendre visible.
Sélection d'un TreeViewItem
Lorsqu'un utilisateur clique sur un contrôle TreeViewItem pour le sélectionner, l'événement Selected se produit et sa propriété IsSelected a la valeur true. Le TreeViewItem devient également le SelectedItem du contrôle TreeView. Inversement, lorsque la sélection change de contrôle TreeViewItem, son événement Unselected se produit et sa propriété IsSelected a la valeur false.
La propriété SelectedItem sur le contrôle TreeView est une propriété en lecture seule ; vous ne pouvez donc pas la définir explicitement. La propriété SelectedItem est définie si l'utilisateur clique sur un contrôle TreeViewItem ou lorsque la propriété IsSelected a la valeur true sur le contrôle TreeViewItem.
Utilisez les propriétés SelectedValue et SelectedValuePath pour assigner une valeur à un SelectedItem. Pour plus d'informations, consultez Comment : utiliser SelectedValue, SelectedValuePath et SelectedItem.
Vous pouvez enregistrer un gestionnaire d'événements sur l'événement SelectedItemChanged pour déterminer à quel moment un TreeViewItem sélectionné est modifié. Le RoutedPropertyChangedEventArgs<T> qui est fourni au gestionnaire d'événements spécifie le OldValue, qui correspond à la sélection précédente, et le NewValue, qui correspond à la sélection actuelle. L'une ou l'autre de ces valeurs peut être null si l'application ou l'utilisateur n'a pas fait de sélection précédente ou actuelle.
Style d'un TreeView
Le style par défaut pour un contrôle TreeView le place à l'intérieur d'un objet StackPanel qui contient un contrôle ScrollViewer. Lorsque vous définissez les propriétés Width et Height pour un TreeView, ces valeurs sont utilisées pour dimensionner l'objet StackPanel qui affiche le TreeView. Si le contenu à afficher est plus grand que la zone d'affichage, un ScrollViewer s'affiche automatiquement afin que l'utilisateur puisse faire défiler le contenu TreeView.
Pour personnaliser l'apparence d'un contrôle TreeViewItem, affectez à la propriété Style un Style personnalisé.
L'exemple suivant montre comment définir les valeurs des propriétés Foreground et FontSize pour un contrôle TreeViewItem en utilisant un Style.
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="Foreground" Value="Blue"/>
<Setter Property="FontSize" Value="12"/>
</Style>
Ajout d'images et autre contenu aux éléments TreeView
Vous pouvez inclure plusieurs objets dans le contenu Header d'un TreeViewItem. Pour inclure plusieurs objets dans le contenu Header, insérez les objets dans un contrôle de disposition, tel qu'un Panel ou StackPanel.
L'exemple suivant indique comment définir le Header d'un TreeViewItem comme CheckBox et TextBlock tous deux insérés dans un contrôle DockPanel.
<TreeViewItem>
<TreeViewItem.Header>
<DockPanel>
<CheckBox/>
<TextBlock>
TreeViewItem Text
</TextBlock>
</DockPanel>
</TreeViewItem.Header>
</TreeViewItem>
L'exemple suivant indique comment définir un DataTemplate qui contient un Image et un TextBlock qui sont insérés dans un contrôle DockPanel. 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>
Voir aussi
Concepts
Vue d'ensemble du modèle de contenu des contrôles