TreeView

Het besturingselement TreeView geeft informatie weer in een hiërarchische structuur met behulp van samenvouwbare knooppunten. In dit artikel worden de TreeView en TreeViewItem besturingselementen geïntroduceerd en vindt u voorbeelden van het gebruik ervan.

De volgende illustratie is een voorbeeld van een TreeView-bedieningselement met geneste TreeViewItem-bedieningselementen.

Wat is een TreeView?

TreeView is een ItemsControl die de items nestelt met TreeViewItem bedieningselementen. In het volgende voorbeeld wordt een TreeView gemaakt.

<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 TreeView besturingselement bevat een hiërarchie van TreeViewItem besturingselementen. Een TreeViewItem besturingselement is een HeaderedItemsControl met een Header en een Items verzameling.

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

U kunt ook een ItemsSource als gegevensbron opgeven en vervolgens een HeaderTemplate en ItemTemplate 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 SelectedValue, SelectedValuePath en SelectedItem gebruiken voor meer informatie en een voorbeeld.

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 IsExpanded eigenschap ingesteld op true. U kunt ook een TreeViewItem 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 BringIntoView-methode wordt aangeroepen op een TreeViewItem-besturingselement, worden de TreeViewItem- en de ouder-TreeViewItem-besturingselementen uitgevouwen. Als een TreeViewItem niet zichtbaar of slechts gedeeltelijk zichtbaar is, scrolt de TreeView automatisch om het zichtbaar te maken.

Een TreeViewItem selecteren

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

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

Gebruik de SelectedValuePath eigenschap om een SelectedValue van een SelectedItem. Zie SelectedValue, SelectedValuePath en SelectedItem gebruiken voor meer informatie.

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, specificeert de OldValue, dat de vorige selectie is en de NewValue, die de huidige selectie is. Een van beide waarden kan zijn null als de toepassing of gebruiker geen vorige of huidige selectie heeft gemaakt.

Een TreeView stylen

De standaardstijl voor een TreeView besturingselement plaatst het in een StackPanel object dat een ScrollViewer besturingselement bevat. Wanneer u de Width en Height eigenschappen voor een TreeView instelt, worden deze waarden gebruikt om de grootte van het StackPanel-object aan te passen dat de TreeView weergeeft. Als de weer te geven inhoud groter is dan het weergavegebied, wordt er automatisch een ScrollViewer weergave weergegeven, zodat de gebruiker door de TreeView inhoud kan bladeren.

Als u het uiterlijk van een TreeViewItem besturingselement wilt aanpassen, stelt u de Style eigenschap in op een aangepast Style.

In het volgende voorbeeld ziet u hoe u de Foreground en FontSize eigenschapswaarden 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 binnen een DockPanel controle-element zijn opgenomen.

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

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

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

Algemene taken

De volgende tabel bevat algemene taken voor het werken met het besturingselement TreeView:

Verwante secties

Overzicht van gegevensbindingen

Data-templating Overzicht

Referentie

TreeView TreeViewItem

Stijlen en sjablonen

U kunt de standaardinstelling ControlTemplate wijzigen om het TreeView besturingselement een uniek uiterlijk te geven. Zie Wat zijn stijlen en sjablonen voor meer informatie en hoe u een sjabloon voor een besturingselement maakt.

Onderdelen

Het TreeView besturingselement heeft geen benoemde onderdelen.

Wanneer u een ControlTemplate voor een TreeView maakt, kan uw sjabloon mogelijk een ItemsPresenter binnen een ScrollViewer bevatten. (ItemsPresenter geeft elk item in het TreeView weer; ScrollViewer maakt scrollen binnen het besturingselement mogelijk). Als het ItemsPresenter niet het directe kind van de ScrollVieweris, moet u de ItemsPresenter naam opgeven. ItemsPresenter

Visuele statussen

De volgende tabel bevat de visuele statussen voor het TreeView besturingselement.

TreeViewItem-onderdelen

De volgende tabel bevat de benoemde onderdelen voor het TreeViewItem besturingselement.

TreeViewItem Toestanden

De volgende tabel bevat de visuele statussen voor TreeViewItem beheer.

Gerelateerde Secties

Overzicht van gegevensbindingOverzicht van gegevenssjablonen