Übersicht über TreeView
Das TreeView-Steuerelement bietet eine Möglichkeit, Informationen in einer hierarchischen Struktur durch das Verwenden von reduzierbaren Knoten anzuzeigen. In diesem Thema werden die Steuerelemente TreeView und TreeViewItem eingeführt. Außerdem sind einfache Beispiele für ihre Verwendung enthalten.
Dieses Thema enthält folgende Abschnitte.
- Was ist ein TreeView?
- Erstellen eines TreeView
- Erweitern und Reduzieren eines TreeViewItem
- TreeViewItem-Auswahl
- TreeView-Stil
- Hinzufügen von Bildern und anderen Inhalten zu TreeView-Elementen
- Verwandte Abschnitte
Was ist ein TreeView?
TreeView ist ein ItemsControl, das die Elemente mithilfe von TreeViewItem-Steuerelementen schachtelt. Im folgenden Beispiel wird ein TreeView-Steuerelement 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
Das TreeView-Steuerelement enthält eine Hierarchie von TreeViewItem-Steuerelementen. Ein TreeViewItem-Steuerelement ist ein HeaderedItemsControl, das über einen Header und eine Items-Auflistung verfügt.
Wenn Sie ein TreeView mithilfe von Extensible Application Markup Language (XAML) definieren, können Sie den Header-Inhalt eines TreeViewItem-Steuerelements und die Elemente, aus denen die zugehörige Auflistung besteht, explizit festlegen. Die vorherige Darstellung veranschaulicht diese Methode.
Sie können ebenfalls eine ItemsSource als Datenquelle angeben und dann ein HeaderTemplate und ein ItemTemplate angeben, um den TreeViewItem-Inhalt zu definieren.
Zum Definieren des Layouts eines TreeViewItem-Steuerelements können Sie auch HierarchicalDataTemplate-Objekte verwenden. Weitere Informationen und ein Beispiel finden Sie unter Gewusst wie: Verwendung 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 Reduzieren eines TreeViewItem
Wenn der Benutzer ein TreeViewItem erweitert, wird die IsExpanded-Eigenschaft auf true festgelegt. Sie können ein TreeViewItem auch 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-Ereignis oder ein Collapsed-Ereignis auf.
Wenn die BringIntoView-Methode für ein TreeViewItem-Steuerelement aufgerufen wird, werden das TreeViewItem-Steuerelement und dessen übergeordnete TreeViewItem-Steuerelemente erweitert. Wenn ein TreeViewItem nicht sichtbar oder nur teilweise sichtbar ist, führt das TreeView-Steuerelement einen Bildlauf durch, um es sichtbar zu machen.
TreeViewItem-Auswahl
Wenn ein Benutzer auf ein TreeViewItem-Steuerelement klickt, um es auszuwählen, wird das Selected-Ereignis ausgelöst und seine IsSelected-Eigenschaft auf true festgelegt. Das TreeViewItem wird außerdem zum SelectedItem des TreeView-Steuerelements. Ändert sich die Auswahl von einem TreeViewItem-Steuerelement, wird umgekehrt sein Unselected-Ereignis ausgelöst und seine IsSelected-Eigenschaft auf false festgelegt.
Die SelectedItem-Eigenschaft des TreeView-Steuerelements 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 die IsSelected-Eigenschaft auf true für das TreeViewItem-Steuerelement festgelegt wird.
MIt der SelectedValuePath-Eigenschaft können Sie eine SelectedValue-Eigenschaft von SelectedItem angeben. Weitere Informationen finden Sie unter Gewusst wie: Verwendung von SelectedValue, SelectedValuePath und SelectedItem.
Sie können für das SelectedItemChanged-Ereignis einen Ereignishandler registrieren, um festzustellen, wann sich ein TreeViewItem ändert. Die RoutedPropertyChangedEventArgs<T>, die an den Ereignishandler übergeben werden, geben den Wert OldValue, bei dem es sich um die vorherige Auswahl handelt, und den Wert NewValue an, bei dem es sich um die aktuelle Auswahl handelt. Beide können den Wert null enthalten, wenn der Benutzer bisher keine Auswahl vorgenommen hat.
TreeView-Stil
Standardmäßig wird ein TreeView-Steuerelement in einem StackPanel-Objekt platziert, das ein ScrollViewer-Steuerelement enthält. Wenn Sie die Eigenschaften Width und Height für ein TreeView-Steuerelement festlegen, wird das StackPanel-Objekt, das das TreeView-Steuerelement anzeigt, anhand dieser Werte dimensioniert. Wenn der anzuzeigende Inhalt größer als der Anzeigebereich ist, wird automatisch ein ScrollViewer-Steuerelement angezeigt, sodass der Benutzer einen Bildlauf durch den Inhalt des TreeView-Steuerelements durchführen kann.
Um die Darstellung eines TreeViewItem-Steuerelements anzupassen, legen Sie die Style-Eigenschaft auf einen benutzerdefinierten Style fest.
Das folgende Beispiel zeigt, wie die Eigenschaftswerte Foreground und FontSize für ein TreeViewItem-Steuerelement mithilfe eines Style 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 mehr als ein Objekt in den Header-Inhalt eines TreeViewItem-Steuerelements einschließen. Um mehrere Objekte in den Header-Inhalt aufzunehmen, umschließen Sie die Objekte mit einem Layoutsteuerelement, wie beispielsweise Panel oder StackPanel.
Das folgende Beispiel zeigt, wie der Header eines TreeViewItem als CheckBox und TextBlock definiert wird, die beide von einem DockPanel-Steuerelement umschlossen werden.
<TreeViewItem>
<TreeViewItem.Header>
<DockPanel>
<CheckBox/>
<TextBlock>
TreeViewItem Text
</TextBlock>
</DockPanel>
</TreeViewItem.Header>
</TreeViewItem>
Das folgende Beispiel zeigt, wie ein DataTemplate definiert wird, das ein Image und ein TextBlock enthält, die von einem DockPanel-Steuerelement umschlossen werden. Sie können ein DataTemplate verwenden, um das HeaderTemplate oder das ItemTemplate für ein TreeViewItem festzulegen.
<DataTemplate x:Key="NewspaperTVItem">
<DockPanel>
<Image Source="images\icon.jpg"/>
<TextBlock VerticalAlignment="center" Text ="{Binding Path=Name}"/>
</DockPanel>
</DataTemplate>