TreeView (Übersicht)

Artikel
12/19/2024

Das TreeView-Steuerelement bietet eine Möglichkeit, Informationen in einer hierarchischen Struktur mithilfe von aufklappbaren 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 Baumstrukturansicht?

TreeView ist eine ItemsControl, die die Elemente mithilfe von TreeViewItem-Steuerelementen schachtelt. Im folgenden Beispiel wird ein TreeViewerstellt.

<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 mit einer Header und einer Items-Kollektion.

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

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

Um das Layout eines TreeViewItem Steuerelements zu definieren, können Sie auch Objekte von HierarchicalDataTemplate verwenden. Weitere Informationen und ein Beispiel finden Sie unter Use 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 eine TreeViewItemerweitert, wird die IsExpanded-Eigenschaft auf truefestgelegt. 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 sich diese Eigenschaft ändert, tritt ein Expanded- oder Collapsed-Ereignis auf.

Wenn die BringIntoView-Methode für ein TreeViewItem-Steuerelement aufgerufen wird, werden die TreeViewItem und die übergeordneten TreeViewItem-Steuerelemente erweitert. Wenn ein TreeViewItem nicht sichtbar oder nur teilweise sichtbar ist, scrollt TreeView, um es 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 truefestgelegt. Die TreeViewItem wird auch zum SelectedItem der TreeView-Steuereinheit. Wenn sich die Auswahl hingegen von einem TreeViewItem-Steuerelement ändert, tritt das Unselected-Ereignis auf und die IsSelected-Eigenschaft wird auf falsefestgelegt.

Die SelectedItem-Eigenschaft für das TreeView-Steuerelement ist eine schreibgeschützte Eigenschaft; daher können Sie sie nicht explizit festlegen. Die SelectedItem-Eigenschaft wird festgelegt, wenn der Benutzer auf ein TreeViewItem-Steuerelement klickt oder wenn die IsSelected-Eigenschaft im TreeViewItem-Steuerelement auf true festgelegt ist.

Verwenden Sie die SelectedValuePath-Eigenschaft, um eine SelectedValue eines SelectedItemanzugeben. 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 ein ausgewählter TreeViewItem ändert. Die RoutedPropertyChangedEventArgs<T>, die dem Ereignishandler bereitgestellt wird, gibt die OldValuean, die die vorherige Auswahl ist, und die NewValue, die die aktuelle Auswahl ist. Jeder Wert kann null werden, wenn die Anwendung oder der Benutzer keine vorherige oder aktuelle Auswahl vorgenommen hat.

TreeView-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 TreeViewfestlegen, werden diese Werte verwendet, um die Größe des StackPanel-Objekts festzulegen, das die TreeViewanzeigt. Wenn der anzuzeigende Inhalt größer als der Anzeigebereich ist, wird automatisch ein ScrollViewer 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 Stylefest.

Das folgende Beispiel zeigt, wie sie die Werte der Foreground und FontSize Eigenschaft für ein TreeViewItem-Steuerelement mithilfe eines Stylefestlegen.

<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 mehr als ein Objekt in den Inhalt von Header eines TreeViewItemeinfügen. Um mehrere Objekte im Header-Inhalt einzuschließen, schließen Sie die Objekte in ein Layoutsteuerelement ein, z. B. ein Panel- oder StackPanel-Layoutsteuerelement.

Das folgende Beispiel zeigt, wie Sie die Header eines TreeViewItem als CheckBox und TextBlock definieren, die beide in einem 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 definieren, das ein Image und ein TextBlock enthält, die in einem DockPanel-Steuerelement eingeschlossen sind. Sie können ein DataTemplate verwenden, um die HeaderTemplate oder ItemTemplate für eine TreeViewItemfestzulegen.

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

Freigeben über