Anpassen von Aussehen und Verhalten des TreeView-Webserversteuerelements
Aktualisiert: November 2007
Die Darstellung des TreeView-Steuerelements ist vollständig anpassbar. Dies ermöglicht eine große Anzahl von Anzeigeformaten.
Um das Aussehen und Verhalten des TreeView-Steuerelements anzupassen, können Sie wie folgt vorgehen:
Legen Sie Eigenschaften des TreeView-Steuerelements fest. Dadurch beeinflussen Sie die Steuerelementanzeige und die Darstellung.
Legen Sie eine ImageSet-Eigenschaft fest, welche eine Gruppe von eingebauten Bildern auswählt, die während der Laufzeit mit dem Steuerelement dargestellt werden.
Legen Sie selbst Bild- und Formateigenschaften fest, die die Anzeige- und Darstellungsmerkmale von bestimmten Gruppen von TreeNode-Objekten bestimmen, welche innerhalb von TreeView-Steuerelementen liegen.
Verwenden Sie das AutoFormat-Feature von Visual Studio, um eine Gruppe von Bild- und Formateigenschaften gleichzeitig anzupassen.
Wenden Sie vordefinierte Designs an, um Anzeige und Darstellung von TreeView-Steuerelementen in der Anwendung während der Laufzeit zu definieren.
Oberste Layouteigenschaften
Zusätzlich zu den standardmäßigen Serversteuerelementeigenschaften (wie der BackColor-Eigenschaft) macht das TreeView-Steuerelement eine Reihe von Eigenschaften verfügbar, die eine genaue Steuerung des Aussehens des TreeViewSteuerelements ermöglichen.
Die NodeIndent-Eigenschaft
Die NodeIndent-Eigenschaft gibt die Einzugsebene für alle Knoten an. Knoten werden von der Seite eingezogen, auf der das TreeView-Steuerelement dargestellt wird. Für Gebietsschemas mit Darstellung von links nach rechts ist dies die linke Seite, für Gebietsschemas mit Darstellung von rechts nach links entsprechend die rechte Seite.
Die NodeWrap-Eigenschaft
Die NodeWrap-Eigenschaft legt fest, ob der in einem Knoten dargestellte Text mit oder ohne Zeilenumbruch dargestellt wird, sobald die Zeile für den entsprechenden Text nicht mehr ausreicht.
Die ShowLines-Eigenschaft
Die ShowLines-Eigenschaft gibt an, ob die Linien angezeigt werden, die untergeordnete Knoten mit übergeordneten Knoten verbinden. Wenn der Wert dieser Eigenschaft auf true festgelegt wird, durchsucht das TreeView-Steuerelement den vom Web erreichbaren Ordner in der LineImagesFolder-Eigenschaft nach den Bildern für die Linien.
TreeNodeStyle-Eigenschaften
Zusätzlich zu den eigenen Eigenschaften unterstützt das TreeView-Steuerelement auch die Eigenschaften der TreeNodeStyle-Steuerelemente bei jedem Knotentyp. Diese Formateigenschaften überschreiben die NodeStyle-Eigenschaft, die für alle Knotentypen gilt.
Das TreeView-Steuerelement verfügt weiterhin über eine NodeIndent-Eigenschaft, welche die Einzugsebene für alle Knoten angibt. Knoten werden von der Seite eingezogen, auf der das TreeView-Steuerelement dargestellt wird. Für Gebietsschemas mit Darstellung von links nach rechts ist dies die linke Seite, für Gebietsschemas mit Darstellung von rechts nach links entsprechend die rechte Seite.
Ein Knoten kann bei einer Auswahl oder bei einer Mausbewegung darüber ein anderes Format erhalten. Sobald die Selected-Eigenschaft eines Knotens auf true festgelegt wird, wird die SelectedNodeStyle-Eigenschaft angewendet. Die Formateigenschaften des unselektierten Knotens werden dadurch überschrieben. Wenn der Mauszeiger über einen Knoten bewegt wird, wird die HoverNodeStyle-Eigenschaft angewendet. Das folgende Bild und die Tabelle beschreiben die TreeNodeStyle-Eigenschaften.
TreeNodeStyle-Eigenschaften
.gif)
Knoteneigenschaft |
Beschreibung |
|---|---|
Legt den vertikalen Abstand zwischen aktuellem Knoten und den jeweils anhängenden darüber- und darunterliegenden Knoten fest. |
|
Legt den dargestellten Abstand über und unter dem TreeNode-Text fest. |
|
Legt den dargestellten Abstand links und rechts des TreeNode-Textes fest. |
|
Legt den dargestellten Abstand über und unter den untergeordneten Knoten des TreeNode fest. |
|
Legt den Pfad zu dem Bild fest, welches neben dem TreeNode angezeigt wird. |
Die Auflistung Ebenenformate
Die LevelStyles-Auflistung ist eine Alternative zur Verwendung benutzerdefinierter Formate, wie zum Beispiel der NodeStyle-Eigenschaft. Die LevelStyles-Auflistung bestimmt das Format der Knoten jeweils in bestimmten Ebenen der Baumstruktur. Das erste Format in der Auflistung trifft auf die erste Ebene in der Baumstruktur zu. Das zweite Format in der Auflistung trifft auf die zweite Ebene in der Baumstruktur zu usw. Diese Eigenschaft wird meist dann eingesetzt, wenn Navigationsmenüs nach Art eines Inhaltsverzeichnisses generiert werden sollen, bei denen Knoten einer bestimmten Ebene unabhängig von der Zahl der untergeordneten Knoten dasselbe Format haben sollen.
.gif "Hinweis") Hinweis: |
|---|
Ein Format, welches für eine bestimmte Ebene mittels der LevelStyles-Auflistung festgelegt wurde, überschreibt alle durch übergeordnete, untergeordnete und Stammknoten festgelegten Formate dieser Ebene. |
Rangfolge von Formaten
Formateigenschaften werden in der folgenden Rangfolge angewendet:
RootNodeStyle, ParentNodeStyle oder LeafNodeStyle, abhängig vom Knotentyp. Die LevelStyles-Auflistung wird mit der Definition gleichzeitig angewendet und überschreibt jedwede Formateigenschaften der Knoten.
AutoFormat
Wenn Sie ein visuelles Designtool wie Visual Web Developer verwenden, macht das TreeView-Steuerelement das AutoFormat-Feature verfügbar. Das AutoFormat-Feature wendet zur Entwurfszeit einen Satz von Anzeigeeigenschaften auf das Steuerelement an. Diese Eigenschaften überschreiben alle bisher festgelegten Eigenschaftenwerte und können im Code Designer geändert werden.
Zusätzlich zu den standardmäßigen Formatmerkmalen legt AutoFormat die ImageSet-Eigenschaft auf einen Satz von Bildern fest, welche in dem TreeView-Steuerelement enthalten sind. Mit AutoFormat können Sie das Aussehen des TreeView-Steuerelements schnell und einfach zur Nachbildung von bekannten Baumstrukturen ändern. Dies sind zum Beispiel:
Outlook-Inbox-Ordner
Microsoft Windows-Dateisystem
MSN Messenger-Kontaktliste
Outlook Express-Newsgroups-Liste
MSDN-Inhaltsverzeichnis
Windows-Hilfe-Inhaltsverzeichnis
Häufig gestellte Fragen (FAQs)
Windows-Ereignislistenansicht
Zusätzlich zu den normalen Baumformaten enthält das AutoFormat-Feature noch eine Reihe von formatierten Aufzählungslisten.
AutoFormat ist sehr nützlich, um eine Reihe von Eigenschaften auf ein bestimmtes Steuerelement anzuwenden. Verwenden Sie dagegen Designs, um das Aussehen und Verhalten mehrerer TreeView-Steuerelemente auf Ihrer Webseite einander anzugleichen. Weitere Informationen finden Sie unter Übersicht über ASP.NET-Designs und ASP.NET-Skins.
Bildeigenschaften
Anders als die meisten Steuerelemente hat das TreeView-Steuerelement den Vorteil, dass auf dieses ein Satz von Grafiken angewendet werden kann. Bilder werden verwendet, um Knoten, Erweiterungs- und Reduzierungsschaltflächen sowie Verbindungslinien darzustellen.
Sie können Bilder auf der TreeView-Ebene festlegen. Legen Sie dazu die ImageSet-Eigenschaft fest, oder erstellen Sie eigene Bilder und legen deren einzelne Bildeigenschaften fest. Sie können auch auf der TreeNode-Ebene Bilder festlegen, um so die Darstellung des TreeView-Steuerelements noch weiter zu ändern.
Bildsätze
Das TreeView-Steuerelement umfasst einige Sätze von Bildressourcen, die in vielen allgemeinen Bäumen verwendet werden. Die folgende Tabelle führt einige der allgemeinen Bildsätze auf, die Sie verwenden könnten.
ImageSet-Name |
Beschreibung |
|---|---|
TreeViewImageSet.Contacts |
MSN Messenger-Bilder |
TreeViewImageSet.Faq |
FAQ-Format-Bilder |
TreeViewImageSet.Inbox |
Outlook-Inbox-Bilder |
TreeViewImageSet.News |
Outlook Express-Newsgroupbilder |
TreeViewImageSet.Help |
Microsoft Windows-Hilfesystembilder |
TreeViewImageSet.XPFileExplorer |
Microsoft Windows XP Explorer-Bilder |
Benutzerdefinierte Bilder und Linien
Zusätzlich zu der Verwendung von vorgefertigten Bildressourcen können Sie Ihren eigenen Satz von Bildressourcen für das TreeView-Steuerelement erstellen. Für einen benutzerdefinierten Satz von Bildern müssen Sie zwei Typen von Bildern erstellen. Zum ersten gehören Knotenbilder, die jeweils einen erweiterbaren Knoten, einen reduzierbaren Knoten und einen weder erweiter- noch reduzierbaren Knoten zeigen. Diese Bilder können in einem Programm wie Microsoft Paint erstellt werden. Falls Sie Verbindungslinien zwischen den Knoten darstellen möchten, müssen Sie einen Satz von Bildern für Verbindungslinien erstellen und die ShowLines-Eigenschaft auf true festlegen. Wenn Sie ein visuelles Designtool wie Visual Web Developer verwenden, können Sie die Linienbilder mit dem Line Image Creator-Tool erstellen. Falls nicht, müssen Sie sie manuell mit einem Programm wie Microsoft Paint erstellen.
Sobald Sie die Knotenbilder erstellt haben, speichern Sie diese in einem Verzeichnis Ihrer Website ab, und legen Sie folgende Eigenschaften für dasTreeView-Steuerelement fest:
Die Bilder für die Verbindungslinien müssen ebenfalls in einem Ordner gespeichert werden. Anschließend muss die LineImagesFolder-Eigenschaft auf den Ordner Ihrer Linienbilder festgelegt werden.
Weitere Informationen zur ImageSet-Eigenschaft und eine vollständige Liste der verfügbaren Bildersätze finden Sie unter ImageSet.
Weitere Informationen über Linienbilder und eine Liste aller TreeView-Steuerelementbilder finden Sie unter LineImagesFolder.
Designs
Designs ermöglichen es, auf einfache Art und Weise einen Satz von Eigenschaften auf mehrere Steuerelemente innerhalb einer Website anzuwenden. Innerhalb eines Designs können Sie noch untergeordnete Designs anlegen. Erstellen Sie beispielsweise ein Design mit dem Namen MeinDesign. Definieren Sie innerhalb dieses Designs ein untergeordnetes Design mit dem Namen MeinTreeViewDesign. Nun können Sie MeinTreeViewDesign nach einmaliger Erstellung auf viele TreeView-Steuerelemente anwenden.
Weitere Informationen finden Sie unter Übersicht über ASP.NET-Designs und ASP.NET-Skins.