Freigeben über

TreeView (Übersicht)

Das TreeView Steuerelement bietet eine Möglichkeit, Informationen in einer hierarchischen Struktur mithilfe von zusammenklappbaren Knoten anzuzeigen. In diesem Thema werden die Steuerelemente TreeView und TreeViewItem vorgestellt, und es werden einfache Beispiele für deren Verwendung bereitgestellt.

Was ist eine Strukturansicht?

TreeView ist ein ItemsControl-Element, das die Elemente mithilfe von TreeViewItem-Steuerelementen verschachtelt. Das folgende Beispiel erstellt ein 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>

Erstellen einer Strukturansicht

Das TreeView Steuerelement enthält eine Hierarchie von TreeViewItem Steuerelementen. Ein TreeViewItem Steuerelement ist ein HeaderedItemsControl, das eine Header- und eine Items-Kollektion hat.

Wenn Sie eine TreeView Mithilfe von XAML (Extensible Application Markup Language) definieren, können Sie explizit den Header Inhalt eines TreeViewItem Steuerelements und der Elemente definieren, aus denen die Auflistung besteht. Die vorherige Abbildung zeigt diese Methode.

Sie können auch eine ItemsSource als Datenquelle angeben und dann einen HeaderTemplate und ItemTemplate verwenden, um den TreeViewItem Inhalt zu definieren.

Zum Definieren des Layouts eines TreeViewItem Steuerelements können Sie auch Objekte verwenden HierarchicalDataTemplate . Weitere Informationen und ein Beispiel finden Sie unter Verwenden von SelectedValue, SelectedValuePath und SelectedItem.

Wenn ein Element kein TreeViewItem Steuerelement ist, wird es automatisch von einem TreeViewItem Steuerelement eingeschlossen, wenn das TreeView Steuerelement angezeigt wird.

Erweitern und Zusammenklappen eines TreeView-Elements

Wenn der Benutzer ein TreeViewItem erweitert, wird die IsExpanded-Eigenschaft auf true gesetzt. Sie können auch eine TreeViewItem ohne direkte Benutzeraktion erweitern oder reduzieren, indem Sie die IsExpanded Eigenschaft auf true (Erweitern) oder false (Reduzieren) festlegen. Wenn diese Eigenschaft geändert wird, tritt ein Expanded- oder Collapsed-Ereignis auf.

Wenn die BringIntoView Methode für ein TreeViewItem Steuerelement aufgerufen wird, werden sowohl das TreeViewItem als auch sein übergeordnetes TreeViewItem Steuerelement erweitert. Wenn ein Objekt TreeViewItem nicht sichtbar oder teilweise sichtbar ist, werden die TreeView Bildläufe angezeigt, um sie sichtbar zu machen.

TreeViewItem-Auswahl

Wenn ein Benutzer auf ein TreeViewItem Steuerelement klickt, um es auszuwählen, tritt das Selected Ereignis auf, und seine IsSelected Eigenschaft wird auf true. Das TreeViewItem wird auch zum SelectedItem des TreeView Steuerungselements. Wenn sich die Auswahl hingegen von einem TreeViewItem Steuerelement ändert, tritt das Unselected Ereignis auf und seine IsSelected Eigenschaft wird auf false.

Die SelectedItem Eigenschaft des TreeView Steuerelements ist eine schreibgeschützte Eigenschaft. Daher kann man sie nicht explizit festlegen. Die SelectedItem Eigenschaft wird festgelegt, wenn der Benutzer auf ein TreeViewItem Steuerelement klickt oder wenn die IsSelected Eigenschaft auf true für das TreeViewItem Steuerelement festgelegt ist.

Verwenden Sie die Eigenschaft SelectedValuePath, um SelectedValue für ein SelectedItem festzulegen. Weitere Informationen finden Sie unter Verwenden von SelectedValue, SelectedValuePath und SelectedItem.

Sie können einen Ereignishandler für das SelectedItemChanged Ereignis registrieren, um zu bestimmen, wann sich eine ausgewählte TreeViewItem Änderung ändert. Die RoutedPropertyChangedEventArgs<T> für den Ereignishandler bereitgestellte Eigenschaft gibt die OldValuevorherige Auswahl und die NewValueaktuelle Auswahl an. Ein Wert kann sein null , wenn die Anwendung oder der Benutzer keine vorherige oder aktuelle Auswahl vorgenommen hat.

Baumansicht-Stil

Der Standardstil für ein TreeView Steuerelement platziert es in einem StackPanel Objekt, das ein ScrollViewer Steuerelement enthält. Wenn Sie die Eigenschaften Width und Height für ein TreeView festlegen, werden diese Werte verwendet, um das StackPanel-Objekt zu dimensionieren, das die TreeView anzeigt. Wenn der anzuzeigende Inhalt größer als der Anzeigebereich ist, wird automatisch ein ScrollViewer Fenster angezeigt, damit der Benutzer durch den TreeView Inhalt scrollen kann.

Um die Darstellung eines TreeViewItem Steuerelements anzupassen, legen Sie die Style Eigenschaft auf eine benutzerdefinierte Fest.Style

Das folgende Beispiel zeigt, wie die Foreground Werte und FontSize Eigenschaftenwerte für ein TreeViewItem Steuerelement mithilfe eines StyleSteuerelements festgelegt werden.

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

Hinzufügen von Bildern und anderen Inhalten zu TreeView-Elementen

Sie können mehrere Objekte in den Header Inhalt eines TreeViewItemObjekts einschließen. Um mehrere Objekte in Header Den Inhalt einzuschließen, schließen Sie die Objekte in ein Layoutsteuerelement ein, z. B. ein oder Panel.StackPanel

Im folgenden Beispiel wird gezeigt, wie Sie das Header Objekt als a TreeViewItemCheckBox definieren und TextBlock beide in ein DockPanel Steuerelement eingeschlossen sind.

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

Das folgende Beispiel zeigt, wie Sie ein DataTemplate Steuerelement definieren, das eine Image und eine TextBlock enthält, die in ein DockPanel Steuerelement eingeschlossen sind. Sie können ein DataTemplate Steuerelement verwenden, um das HeaderTemplate Oder ItemTemplate für ein TreeViewItem.

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

Siehe auch