Overzicht van TreeView

Artikel
12/19/2024

Het besturingselement TreeView biedt een manier om informatie in een hiërarchische structuur weer te geven met behulp van samenvouwbare knooppunten. In dit onderwerp worden de besturingselementen voor TreeView en TreeViewItem geïntroduceerd en vindt u eenvoudige voorbeelden van hun gebruik.

Wat is een TreeView?

TreeView is een ItemsControl waarmee de items worden genest met behulp van TreeViewItem besturingselementen. In het volgende voorbeeld wordt een TreeViewgemaakt.

<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>

Een TreeView maken

Het besturingselement TreeView bevat een hiërarchie van TreeViewItem besturingselementen. Een TreeViewItem controle is een HeaderedItemsControl dat een Header en een Items-verzameling heeft.

Als u een TreeView definieert met behulp van Extensible Application Markup Language (XAML), kunt u expliciet de Header inhoud van een besturingselement TreeViewItem definiëren en de items waaruit de verzameling bestaat. In de vorige afbeelding ziet u deze methode.

U kunt ook een ItemsSource opgeven als gegevensbron en vervolgens een HeaderTemplate en ItemTemplate opgeven om de TreeViewItem inhoud te definiëren.

Als u de indeling van een TreeViewItem besturingselement wilt definiëren, kunt u ook HierarchicalDataTemplate objecten gebruiken. Zie voor meer informatie en een voorbeeld SelectedValue, SelectedValuePath en SelectedItem gebruiken.

Als een item geen TreeViewItem besturingselement is, wordt het automatisch ingesloten door een TreeViewItem besturingselement wanneer het TreeView besturingselement wordt weergegeven.

Een TreeViewItem uitvouwen en samenvouwen

Als de gebruiker een TreeViewItemuitvouwt, wordt de eigenschap IsExpanded ingesteld op true. U kunt een TreeViewItem ook uitvouwen of samenvouwen zonder directe gebruikersactie door de eigenschap IsExpanded in te stellen op true (uitvouwen) of false (samenvouwen). Wanneer deze eigenschap wordt gewijzigd, vindt er een Expanded of Collapsed gebeurtenis plaats.

Wanneer de methode BringIntoView wordt aangeroepen voor een TreeViewItem besturingselement, worden de TreeViewItem en de bovenliggende TreeViewItem besturingselementen uitgevouwen. Als een TreeViewItem niet zichtbaar of gedeeltelijk zichtbaar is, schuift het TreeView om deze zichtbaar te maken.

TreeViewItem selectie

Wanneer een gebruiker op een TreeViewItem besturingselement klikt om het te selecteren, vindt de Selected gebeurtenis plaats en wordt de eigenschap IsSelected ingesteld op true. De TreeViewItem wordt ook de SelectedItem van het TreeView besturingselement. Omgekeerd, wanneer de selectie verandert van een TreeViewItem-besturingselement, treedt de Unselected-gebeurtenis op en wordt de IsSelected-eigenschap ingesteld op false.

De eigenschap SelectedItem op het besturingselement TreeView is een alleen-lezen eigenschap; daarom kunt u deze niet expliciet instellen. De eigenschap SelectedItem is ingesteld als de gebruiker op een TreeViewItem besturingselement klikt of wanneer de eigenschap IsSelected is ingesteld op true op het besturingselement TreeViewItem.

Gebruik de eigenschap SelectedValuePath om een SelectedValue van een SelectedItemop te geven. Voor meer informatie, zie Gebruik SelectedValue, SelectedValuePath en SelectedItem.

U kunt een gebeurtenis-handler registreren voor de SelectedItemChanged gebeurtenis om te bepalen wanneer een geselecteerde TreeViewItem verandert. De RoutedPropertyChangedEventArgs<T> die aan de gebeurtenis-handler wordt verstrekt, geeft de OldValueop, wat de vorige selectie is, en de NewValue, wat de huidige selectie is. Beide waarden kunnen worden null als de toepassing of gebruiker geen vorige of huidige selectie heeft gemaakt.

TreeView-stijl

De standaardstijl van een TreeView controle-element plaatst het in een StackPanel-object dat een ScrollViewer-controle-element bevat. Wanneer u de eigenschappen Width en Height voor een TreeViewinstelt, worden deze waarden gebruikt om de grootte van het StackPanel-object dat de TreeViewweergeeft. Als de weer te geven inhoud groter is dan het weergavegebied, wordt een ScrollViewer automatisch weergegeven, zodat de gebruiker door de TreeView inhoud kan schuiven.

Om het uiterlijk van een TreeViewItem-besturingselement aan te passen, zet u de eigenschap Style op een aangepaste Style.

In het volgende voorbeeld ziet u hoe u de eigenschapswaarden voor Foreground en FontSize voor een TreeViewItem besturingselement instelt met behulp van een Style.

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

Afbeeldingen en andere inhoud toevoegen aan TreeView-items

U kunt meer dan één object opnemen in de Header inhoud van een TreeViewItem. Als u meerdere objecten in Header inhoud wilt opnemen, plaatst u de objecten in een indelingsbesturingselement, zoals een Panel of StackPanel.

In het volgende voorbeeld ziet u hoe u de Header van een TreeViewItem definieert als een CheckBox en TextBlock die beide zijn opgenomen in een DockPanel besturingselement.

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

In het volgende voorbeeld ziet u hoe u een DataTemplate definieert die een Image en een TextBlock bevat die zijn opgenomen in een DockPanel besturingselement. U kunt een DataTemplate gebruiken om de HeaderTemplate of ItemTemplate voor een TreeViewItemte configureren.

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

Delen via