Verwenden des "TreeView"-Steuerelements

  • Artikel

Das TreeView-Steuerelement kann eine hierarchische (bzw. geschachtelte oder rekursive) Auflistung von Daten in einer Struktur mit erweiterbaren Knoten anzeigen.

Weitere Informationen zum TreeView-Steuerelement finden Sie auf der MSDN-Website unter TreeView-Klasse (möglicherweise in englischer Sprache).

So erstellen Sie Beispieldaten für die Anzeige in einem "TreeView"-Steuerelement

Sie können im TreeView-Steuerelement jede Art von Auflistung verwenden, aber bei hierarchischen Auflistungen können alle Funktionen des TreeView-Steuerelements optimal genutzt werden. Falls Sie nicht bereits über Daten verfügen, die Sie für das Verfahren "So füllen Sie ein TreeView-Steuerelement auf" weiter unten in diesem Thema verwenden können, können Sie mit diesem Verfahren Beispieldaten festlegen, mit denen sich die Funktionen des TreeView-Steuerelements umfassend verdeutlichen lassen:

  1. Falls das Datenpanel noch nicht angezeigt wird, klicken Sie im Menü Fenster auf Daten.

  2. Klicken Sie im Datenpanel auf Beispieldatenquelle hinzufügen Ee371155.30540d76-7256-43ce-b5d9-4b2edf3d339f(DE-DE,Expression.30).png, und klicken Sie dann auf Neue Beispieldaten definieren.

  3. Im Dialogfeld Neue Beispieldaten definieren können Sie den Standardnamen für die festgelegten Daten ändern und dann den Teil des Projekts auswählen, für den die Daten bereitgestellt werden sollen.

  4. Aktivieren Sie das Kontrollkästchen Beispieldaten beim Ausführen der Anwendung aktivieren.

    Ee371155.alert_tip(DE-DE,Expression.30).gifTipp:

    Im Kontrollkästchen Beispieldaten beim Ausführen der Anwendung aktivieren kann das Projekt die Beispieldaten anzeigen, wenn Sie die Anwendung ausführen. Wenn das Kontrollkästchen nicht aktiviert ist, zeigt Microsoft Expression Blend die Beispieldaten nur auf der Zeichenfläche an.

    Weitere Informationen finden Sie unter Anzeigen von Beispieldaten beim Ausführen einer Anwendung.

  5. Klicken Sie auf OK.

    Es wird eine Beispieldatenquelle mit einer Auflistung Ee371155.94dad06c-7ddb-4c5e-b2ee-74b394c713ff(DE-DE,Expression.30).png der drei Typen von Eigenschaften (Zeichenfolge Ee371155.0baebca0-a722-4aa2-ad58-a96325a0536d(DE-DE,Expression.30).png, Zahl Ee371155.3a9d424b-3e04-443e-8c96-2bcb744fd037(DE-DE,Expression.30).png und boolescher Wert Ee371155.b09651ed-c8ae-4f66-b10c-d8478c5337c7(DE-DE,Expression.30).png) erstellt.

    Ee371155.496d7ebc-fe46-42f6-95a8-57b0e5be5d49(DE-DE,Expression.30).png

  6. Klicken Sie neben Ee371155.94dad06c-7ddb-4c5e-b2ee-74b394c713ff(DE-DE,Expression.30).png Auflistung auf den Dropdownpfeil der Option Einfache Eigenschaft hinzufügen Ee371155.203a14a5-0db2-486e-9b94-4fdf658d531b(DE-DE,Expression.30).png, und klicken Sie dann auf Zu hierarchischer Auflistung hinzufügen.

    Die Auflistung wird so konvertiert, dass sie Eigenschaften mit fünf geschachtelten Ebenen aufweist.

Sie verfügen jetzt über eine Beispieldatenauflistung für die Anzeige in einem TreeView-Steuerelement.

Informationen zum Ändern von Beispieldaten und Hinzufügen weiterer Dateneigenschaften finden Sie unter Ändern von Beispieldaten.

So füllen Sie das "TreeView"-Steuerelement auf

Es gibt mehrere Möglichkeiten, Daten auf der Zeichenfläche an ein Steuerelement zu binden. Das folgende Verfahren ist die schnellste Möglichkeit, wenn Sie ein TreeView-Steuerelement verwenden.

Informationen zu anderen Optionen finden Sie unter Binden eines Objekts an Daten.

  1. Klicken Sie im Werkzeugpanel auf Objekte Ee371155.0d8b8d29-1af9-418f-8741-be3097d76eab(DE-DE,Expression.30).png.

    Ee371155.alert_tip(DE-DE,Expression.30).gifTipp:

    Alternativ dazu können Sie das Objektepanel anzeigen, indem Sie im Menü Fenster auf Objekte klicken.

  2. Erweitern Sie im Objektepanel den Knoten Steuerelemente, klicken Sie auf Alle, und klicken Sie dann auf das TreeView-Steuerelement Ee371155.7ecbf7de-e46f-44e9-b931-98c8c12c0b2a(DE-DE,Expression.30).png.

    Im Werkzeugpanel wird auf der Schaltfläche unterhalb der Schaltfläche Objekte Ee371155.0d8b8d29-1af9-418f-8741-be3097d76eab(DE-DE,Expression.30).png das Symbol für das TreeView-Steuerelement angezeigt, und die Schaltfläche ist aktiviert.

  3. Ziehen Sie im Hauptdokument auf der Zeichenfläche mit dem Mauszeiger ein großes TreeView-Objekt auf.

  4. Ziehen Sie die oberste Auflistung (Ee371155.94dad06c-7ddb-4c5e-b2ee-74b394c713ff(DE-DE,Expression.30).png Auflistung) im Datenpanel auf das neue TreeView-Objekt.

    Das TreeView-Objekt zeigt die Auflistung in der Beispieldatenquelle an, und Bildeigenschaften werden in Bildobjekte und boolesche Eigenschaften in Kontrollkästchen konvertiert.

  5. Drücken Sie F5, um die Anwendung auszuführen.

    Wenn Sie die Beispieldaten des vorherigen Verfahrens verwenden und die Beispieldaten beim Testen der Anwendung aktiviert haben, sehen Sie Folgendes:

    Ee371155.b4ccdfe0-38ac-486f-a617-bd0044bce42b(DE-DE,Expression.30).png

Ändern der Darstellung eines "TreeView"-Steuerelements

Sie können die Darstellung von Steuerelementen ändern, indem Sie die Eigenschaften ändern oder indem Sie die Vorlagen ändern, die zum Formatieren verwendet werden. Sie können die Hauptvorlage, die Vorlagen für die Anordnung der Elemente in den einzelnen Zeilen und andere Vorlagen ändern.

Weitere Informationen finden Sie unter Erstellen oder Bearbeiten einer Vorlage.

So ändern Sie das Layout und die Darstellung der Elemente in den einzelnen Zeilen

  1. Klicken Sie im Panel Objekte und Zeitachsen oder auf der Zeichenfläche mit der rechten Maustaste auf das TreeView-Objekt, zeigen Sie auf Zusätzliche Vorlagen bearbeiten, zeigen Sie auf Generierte Elemente bearbeiten (ItemTemplate), und klicken Sie dann auf Kopie bearbeiten.

  2. Klicken Sie im Dialogfeld Ressource "Datenvorlage" erstellen auf OK.

    Expression Blend wechselt in den Bearbeitungsmodus für Vorlagen. Die Breadcrumb-Leiste oben auf der Zeichenfläche zeigt an, dass Sie eine Vorlage innerhalb des TreeView-Objekts bearbeiten. Über die Breadcrumb-Leiste können Sie den Bearbeitungsmodus für Vorlagen beenden, indem Sie auf die Schaltfläche TreeView klicken.

  3. Im Panel Objekte und Zeitachsen sehen Sie, dass die Elemente in einem StackPanel-Objekt angeordnet sind. Sie können die Ausrichtung und die Reihenfolge des Stapels ändern. Außerdem können Sie für das StackPanel-Objekt zu einem anderen Layoutpanel wechseln, z. B. zu Grid (Raster) oder Canvas (Zeichenbereich).

    Weitere Informationen finden Sie unter den folgenden Themen:

  4. Fügen Sie der Vorlage im Panel Objekte und Zeitachsen weitere Objekte hinzu, oder ändern Sie im Eigenschaftenpanel die Eigenschaften vorhandener Objekte.

So ändern Sie die Farbe des ausgewählten Elements

  1. Klicken Sie im Panel Objekte und Zeitachsen oder auf der Zeichenfläche mit der rechten Maustaste auf das TreeView-Objekt, zeigen Sie auf Zusätzliche Vorlagen bearbeiten, zeigen Sie auf Erstellten Elementecontainer bearbeiten (ItemContainerStyle), und klicken Sie dann auf Kopie bearbeiten.

  2. Klicken Sie im Dialogfeld Ressource "Formatvorlage" erstellen auf OK.

    Expression Blend wechselt in den Bearbeitungsmodus für Vorlagen. Die Breadcrumb-Leiste oben auf der Zeichenfläche zeigt an, dass Sie eine Vorlage innerhalb des TreeView-Objekts bearbeiten. Über die Breadcrumb-Leiste können Sie den Bearbeitungsmodus für Vorlagen beenden, indem Sie auf die Schaltfläche TreeView klicken.

    Ee371155.alert_tip(DE-DE,Expression.30).gifTipp:

    Wenn Sie zum ersten Mal in den Bearbeitungsmodus für Vorlagen wechseln, spiegelt die Darstellung der Vorlage die Darstellungsversion des Steuerelements wider, die gilt, wenn keine Benutzerinteraktion mit dem Steuerelement stattfindet. Um die Darstellung des Steuerelements bei Benutzerinteraktion zu ändern, müssen Sie im Bearbeitungsmodus für Vorlagen einen Auslöser (in Windows Presentation Foundation [WPF]-Projekten) oder einen Status (in Microsoft Silverlight-Projekten) auswählen. Wenn Benutzer z. B. in einem TreeView-Steuerelement ein Element auswählen, interagieren sie mit dem Steuerelement und lösen ein Selected-Ereignis aus. Um die Darstellung des Steuerelements bei einem ausgewähltem Element zu ändern, müssen Sie die Vorlage bearbeiten, während der entsprechende Auslöser oder Status des Selected-Ereignisses markiert ist.

  3. Führen Sie einen der folgenden Schritte aus:

    • Bei einem WPF-Projekt: Klicken Sie im Auslöserpanel auf den Auslöser IsSelected = True, um für das Selected-Ereignis in den Bearbeitungsmodus für Vorlagen zu wechseln. Klicken Sie im Panel Objekte und Zeitachsen auf das Bd-Objekt. Ändern Sie im Eigenschaftenpanel unter Pinsel für das Bd-Objekt die Farbe für Background (Hintergrund). Klicken Sie anschließend im Auslöserpanel auf Standard, um die Auslöseraufzeichnung zu deaktivieren.

    • Bei einem Silverlight-Projekt: Klicken Sie im Zuständepanel auf den Status Selected, um für das Selected-Ereignis in den Bearbeitungsmodus für Vorlagen zu wechseln. Klicken Sie im Panel Objekte und Zeitachsen auf das Selection-Objekt. Ändern Sie im Eigenschaftenpanel unter Brushes (Pinsel) für das Selection-Objekt die Farbe für Fill (Füllung) und Stroke (Strich). Klicken Sie anschließend im Zuständepanel auf Basis, um die Statusaufzeichnung zu deaktivieren.

    Informationen zum Öffnen von Panels finden Sie unter Hinzufügen oder Entfernen eines Arbeitsbereichspanels.

    Informationen zum Ändern von Pinselfarben finden Sie unter Festlegen von Farben, Pinseln und Masken.

  4. Drücken Sie F5, um die Anwendung auszuführen, und wählen Sie in der Struktur ein Element aus.

So ändern Sie die Darstellung der Schaltfläche zum Erweitern

  1. Klicken Sie im Panel Objekte und Zeitachsen oder auf der Zeichenfläche mit der rechten Maustaste auf das TreeView-Objekt, zeigen Sie auf Zusätzliche Vorlagen bearbeiten, zeigen Sie auf Erstellten Elementecontainer bearbeiten (ItemContainerStyle), und klicken Sie dann auf Kopie bearbeiten.

    Ee371155.alert_tip(DE-DE,Expression.30).gifTipp:

    Falls Sie diese Vorlage bereits erstellt haben, ist der Befehl Aktuellen bearbeiten aktiviert, und Sie können diesen Befehl anstelle von Kopie bearbeiten verwenden.

  2. Klicken Sie im Dialogfeld Ressource "Formatvorlage" erstellen auf OK.

    Expression Blend wechselt in den Bearbeitungsmodus für Vorlagen. Die Breadcrumb-Leiste oben auf der Zeichenfläche zeigt an, dass Sie eine Vorlage innerhalb des TreeView-Objekts bearbeiten. Über die Breadcrumb-Leiste können Sie den Bearbeitungsmodus für Vorlagen beenden, indem Sie auf die Schaltfläche [TreeView] klicken.

  3. Klicken Sie im Panel Objekte und Zeitachsen mit der rechten Maustaste auf das Expander-Objekt (WPF-Projekte) oder das ExpandButton-Objekt (Silverlight-Projekte), zeigen Sie auf Vorlage bearbeiten, und klicken Sie dann auf Aktuellen bearbeiten.

  4. Erweitern Sie im Panel Objekte und Zeitachsen die Knoten, um das Pfadobjekt anzuzeigen, das die Erweiterungsschaltfläche für das TreeView-Steuerelement darstellt. Bei WPF-Projekten hat das Pfadobjekt den Namen ExpandPath. Bei Silverlight-Projekten sind zwei Pfadobjekte mit den Namen UncheckedVisual und CheckedVisual vorhanden. Sie können die Werkzeuge Stift Ee371155.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(DE-DE,Expression.30).png und Direktauswahl Ee371155.6dd6571f-c116-451d-8dd2-1f88b8406362(DE-DE,Expression.30).png verwenden, um die Formen dieses Pfads zu ändern. In WPF-Projekten muss Name und Typ des ExpandPath-Objekts beibehalten werden, weil Auslöser vorhanden sind, die davon abhängig sind.

    Weitere Informationen finden Sie unter Verwendung von Auslösern, um das Verhalten eines WPF-Steuerelements festzulegen.

    Bei Silverlight-Projekten können Sie die Darstellung der Pfadobjektänderungen im Status Checked ändern, um die Bearbeitung zu ermöglichen.

    Weitere Informationen finden Sie unter Definieren unterschiedlicher visueller Zustände für ein Steuerelement.

Siehe auch

Weitere Ressourcen

Erstellen von Beispieldaten

Herstellen einer Verbindung zu Livedaten

Anzeigen von Daten in Steuerelementen