Übersicht über TreeView

  • Artikel

Das TreeView-Steuerelement Bietet eine Möglichkeit, Informationen in einer hierarchischen Struktur mit reduzierbaren Knoten anzuzeigen. In diesem Thema werden die TreeView- und TreeViewItem-Steuerelemente vorgestellt und einfache Beispiele für ihre Verwendung gegeben.

Was versteht man unter einem TreeView-Steuerelement?

TreeView ist ein ItemsControl Element, das die Elemente mithilfe TreeViewItem von Steuerelementen verschachtelt. Im folgenden Beispiel wird ein TreeView erstellt.

<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 eines TreeView-Steuerelements

Das TreeView Steuerelement enthält eine Hierarchie von TreeViewItem Steuerelementen. Ein TreeViewItem Steuerelement ist ein HeaderedItemsControl Steuerelement, das über eine Header und eine Items Sammlung verfügt.

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

Sie können auch ein ItemsSource als Datenquelle angeben und dann HeaderTemplate und ItemTemplate alsTreeViewItem Inhalt definieren.

Um das Layout eines TreeViewItem-Steuerelements zu definieren, können Sie auch HierarchicalDataTemplate-Objekte verwenden. Weitere Informationen und ein Beispiel dazu finden Sie unter Use SelectedValue, SelectedValuePath, and SelectedItem (Verwenden von SelectedValue, SelectedValuePath und SelectedItem)

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

Erweitern und Reduzieren von TreeViewItem-Steuerelementen

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

Wenn die Methode auf einem BringIntoView Steuerelement aufgerufen wird, erweitern die TreeViewItem und die TreeViewItem ihre übergeordneten TreeViewItem Steuerelemente. Wenn TreeViewItem nicht oder nur teilweise sichtbar ist, scrollt die TreeView, um es sichtbar zu machen.

Auswählen eines TreeViewItem-Steuerelements

Wenn ein Benutzer auf ein TreeViewItem Steuerelement klickt, um es auszuwählen, tritt das Selected Ereignis auf, und seine IsSelected Eigenschaft wird auf true festgelegt. Dieses TreeViewItem wird auch zum SelectedItem des TreeView Steuerelements. Umgekehrt, wenn sich die Auswahl von einem TreeViewItem-Steuerelement ändert, tritt dessen Unselected-Ereignis ein und seine IsSelected-Eigenschaft wird auf false gesetzt.

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

Verwenden Sie die SelectedValuePath Eigenschaft, um eine SelectedValue von einer SelectedItem anzugeben. Weitere Informationen finden Sie unter Use SelectedValue, SelectedValuePath, and SelectedItem (Verwenden von SelectedValue, SelectedValuePath und SelectedItem)

Sie können einen Ereignishandler für das SelectedItemChanged-Ereignis registrieren, um festzustellen, wann sich eine TreeViewItem-Auswahl ändert. Die dem Ereignishandler zur Verfügung gestellte RoutedPropertyChangedEventArgs<T> gibt die OldValue, die die vorherige Auswahl ist, und die NewValue, die die aktuelle Auswahl ist, an. Es kann kein Wert null sein, wenn die Anwendung oder der Benutzer keine vorherige oder aktuelle Auswahl getroffen hat.

TreeView-Format

Der Standardstil für ein TreeView-Steuerelement platziert es innerhalb eines StackPanel-Objekts, das ein ScrollViewer-Steuerelement enthält. Wenn Sie die Width und Height Eigenschaften für eine TreeView festlegen, werden diese Werte verwendet, um das StackPanel Objekt, das TreeViewangezeig, in der Größe zu ändern. Wenn der anzuzeigende Inhalt größer ist als der Anzeigebereich, wird ScrollViewer automatisch angezeigt, damit der Benutzer durch den TreeView-Inhalt blättern kann.

Um die Darstellung eines TreeViewItem-Steuerelements anzupassen, legen Sie die Style-Eigenschaft auf einen benutzerdefinierten Style-Wert fest.

Im folgenden Beispiel wird gezeigt, wie Sie die Foreground und FontSize Werte für ein Steuerelement mithilfe eines TreeViewItem Steuerelements mit Style festlegen.

<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 Header-Inhalt einer TreeViewItem einschließen. Um mehrere Objekte in den Header-Inhalt einzubinden, schließen Sie die Objekte in ein Layout-Steuerelement ein, wie z. B. Panel oder StackPanel.

Im folgenden Beispiel wird gezeigt, wie Sie die Header einer 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 DataTemplate definieren, das an Image und TextBlock enthält, die in ein DockPanel-Steuerelement eingeschlossen sind. Sie können eine DataTemplate zum Festlegen der HeaderTemplate oder ItemTemplate einer TreeViewItem nutzen.

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

Weitere Informationen