Verwenden von Bildern mit dem TreeView-Steuerelement

Artikel
10/22/2014

Aktualisiert: November 2007

Das TreeView-Steuerelement verfügt über viele verschiedene Darstellungsformen und ermöglicht so eine flexible Bildanpassung bzw. bietet Eigenschaften, mit denen benutzerdefinierte Optionen für die Benutzeroberfläche angegeben werden können. Mit dem TreeView-Steuerelement können Bilder verwendet werden, um Knoten darzustellen, Linien zu verbinden sowie Symbole zu erweitern und zu reduzieren. Sie können auch auf einen vordefinierten Satz an Bildern aus der ImageSet-Eigenschaft zurückgreifen oder benutzerdefinierte Bilder verwenden, indem Sie die einzelnen Bildeigenschaften festlegen.

Im TreeView-Steuerelement verwendete Bilder

Das TreeView-Steuerelement enthält unter anderem die folgenden visuellen Elemente:

Bilder für reduzierte Knoten
Bilder für erweiterte Knoten
Nicht erweiterbare Bilder
Bilder für Stammknoten
Bilder für übergeordnete Knoten
Bilder für Endknoten

Neben diesen Bildern verwendet das TreeView-Steuerelement zum Erstellen von Linien auch Bilder, die TreeView-Elemente miteinander verbinden, wenn die ShowLines-Eigenschaft auf true festgelegt ist. Sie können diese Linien im Dialogfeld Liniengrafik-Generator des TreeView-Steuerelements generieren (bei aktivierter Eigenschaft Linien anzeigen) oder die Bilder selbst erstellen. Beachten Sie, dass nicht jede Bildeigenschaft angepasst werden muss. Wenn eine Bildeigenschaft nicht explizit festgelegt ist, wird das integrierte Standardbild verwendet.

Verwenden von Standardbildern in einem Bildsatz

Die einfachste Methode der Zuweisung von Bildern zu einem TreeView-Steuerelement ist mithilfe der ImageSet-Eigenschaft. Der im TreeView-Steuerelement integrierte Bildsatz umfasst Sätze von Bildressourcen, die häufig für Strukturen in MSN Messenger, Microsoft Outlook, Windows Explorer und der Microsoft Windows-Hilfe verwendet werden. Darüber hinaus enthalten diese Sätze mehrere Aufzählungsformate.

Im folgenden Codebeispiel ist ein TreeView-Steuerelement dargestellt, das den Bildsatz des Datei-Explorers von Windows XP verwendet.

        <asp:TreeView ID="TreeView1" 
         
        DataSourceID="XmlDataSource1" 
        ImageSet= "XPFileExplorer">

Eine vollständige Liste und Beschreibung der Bildsätze für das TreeView-Steuerelement finden Sie in der ImageSet-Eigenschaft.

Verwenden benutzerdefinierter Bilder für die reduzierte und erweiterte Darstellung

Bilder können zur Darstellung erweiterbarer Knoten, reduzierbarer Knoten und für Knoten, die sich weder erweitern noch reduzieren lassen, verwendet werden. Bilder für diesen Zweck können mit den meisten Grafikprogrammen erstellt werden.

Um ein Bild einem bestimmten Knotentyp zuzuweisen, weisen Sie den Speicherort der gewünschten Bilddatei der entsprechenden Eigenschaft zu. Zu diesen Eigenschaften zählen ExpandImageUrl, CollapseImageUrl und NoExpandImageUrl. Im folgenden Beispiel sind diese Eigenschaften auf benutzerdefinierte Bilder im Verzeichnis Images der Website festgelegt.

    <asp:TreeView ID="TreeView1" 
         
        DataSourceID="XmlDataSource1"
            ExpandImageUrl="~/Images/ExpandAll.gif"
            CollapseImageUrl="~/Images/CollapseAll.gif"
            NoExpandImageUrl="~/Images/stop.gif">
    </asp:TreeView>

Beachten Sie, dass Sie die Darstellung der erweiterten und reduzierten Bilder durch Festlegen der ShowExpandCollapse-Eigenschaft auf false deaktivieren können.

Verwenden benutzerdefinierter Bilder für Stammknoten, übergeordnete Knoten und Endknoten

Jedes TreeView-Steuerelement kann aus Stammknoten, übergeordneten Knoten und Endknoten bestehen. Ein Stammknoten ist ein Knoten, der über untergeordnete Knoten verfügt und dessen Parent-Eigenschaft auf null festgelegt ist. Er befindet sich auf der obersten Ebene der Struktur. Als übergeordnet werden die Knoten in der Knotenauflistung des TreeView-Steuerelements bezeichnet, die über untergeordnete Knoten in der Hierarchie verfügen. Als Endknoten werden Knoten in der Knotenauflistung des TreeView-Steuerelements bezeichnet, die keine untergeordneten Knoten aufweisen. Es handelt sich somit weder um Stammknoten noch um übergeordnete Knoten.

Das TreeView-Steuerelement stellt Eigenschaftenstile für die drei TreeNode-Typen zur Verfügung: Stamm, übergeordnetes Element und Blattknoten. Die entsprechenden Eigenschaften sind RootNodeStyle, ParentNodeStyle und LeafNodeStyle. In jeder Eigenschaft kann ein ImageUrl-Wert für eine Eigenschaft festgelegt werden, die auf diesen Knotentyp angewendet wird. Diese Bilder werden links neben dem Knotentext dargestellt. Mithilfe der ImageUrl-Eigenschaft kann der TreeNode-Typ das Standardbild des zugehörigen Knotentyps selektiv überschreiben.

Im folgenden Beispiel ist die Zuweisung von Eigenschaften dargestellt.

<asp:TreeView ID="TreeView1"  DataSourceID="XmlDataSource1" >
        <RootNodeStyle ImageUrl="~/Images/root.gif" />
        <ParentNodeStyle ImageUrl="~/Images/parent.gif" />
        <LeafNodeStyle ImageUrl="~/Images/leaf.gif" />
    </asp:TreeView>

Anhand des folgenden Beispiels wird verdeutlicht, wie das festgelegte Bild des Knotenformats für einen einzelnen Strukturknoten überschrieben werden kann. Bei der Darstellung wird dem Strukturknoten "Page 2" anstelle des mithilfe der LeafNodeStyle-Eigenschaft festgelegten Bilds ein Stern (Star.gif) als Knotenbild zugewiesen.

      <asp:TreeView id="SampleTreeView" 
        >
          <RootNodeStyle ImageUrl="~/Images/root.gif" />
          <ParentNodeStyle ImageUrl="~/Images/parent.gif" />
          <LeafNodeStyle ImageUrl="~/Images/leaf.gif" />
        <Nodes>
          <asp:TreeNode Value="Home" 
            Text="Home"
            Target="Content" 
            Expanded="True">
            <asp:TreeNode Value="Page 1" 
              Text="Page1"
              Target="Content">
              <asp:TreeNode Value="Section 1" 
                Text="Section 1"
                Target="Content"/>
            </asp:TreeNode>              
            <asp:TreeNode Value="Page 2" 
              Text="Page 2"
              Target="Content"
                ImageUrl="~/Images/star.gif">
            </asp:TreeNode> 
          </asp:TreeNode>
        </Nodes>
      </asp:TreeView>

Verwenden von Linienbildern

Das TreeView-Steuerelement kann Linien darstellen, durch die Strukturknoten mit einer Reihe vorgegebener Bilder verbunden werden. Diese Linien werden vom Steuerelement dargestellt, wenn die ShowLines-Eigenschaft auf true festgelegt wird. Sie können die Darstellung dieser Linienbilder mithilfe des Liniengrafik-Generators im Kontextmenü des TreeView-Steuerelements bearbeiten oder den einzelnen Linien benutzerdefinierte Bilder zuweisen.

Hinweis:
Visuelle Entwurfstools wie Visual Studio 2005 enthalten oft Dienstprogramme zur automatischen Generierung der Linienbilder.

Das TreeView-Steuerelement verwendet eine spezielle Benennungskonvention für die 16 verschiedenen Bilder, aus denen die Linien zum Verbinden von Strukturknoten bestehen. Die folgende Tabelle enthält die Dateinamen und Beschreibungen für die einzelnen Bilder, aus denen die Linienverbindungen gebildet werden.

Dateiname	Bild	Beschreibung
Dash.gif		Ein Linienbild, das neben dem Stammknoten angezeigt wird, wenn nur ein Stammknoten in der Baumstruktur vorhanden ist und dieser gleichzeitig ein Endknoten ist
Dashminus.gif		Das Bild eines Minuszeichens (-), das neben dem Stammknoten angezeigt wird, wenn nur ein Stammknoten in der Baumstruktur enthalten ist und dieser erweitert wurde
Dashplus.gif		Das Bild eines Pluszeichens (+), das neben dem Stammknoten angezeigt wird, wenn nur ein Stammknoten in der Baumstruktur vorhanden ist und dieser reduziert wurde
I.gif		Ein Linienbild, mit dem benachbarte Knoten miteinander verbunden werden
L.gif		Ein Linienbild, das neben dem letzten Knoten in einer Verzweigung angezeigt wird, wenn dieser ein Endknoten ist
Lminus.gif		Ein Linienbild, das neben dem letzten Knoten in einer Verzweigung angezeigt wird, wenn dieser Knoten erweitert wurde
Lplus.gif		Ein Linienbild, das neben dem letzten Knoten in einer Verzweigung angezeigt wird, wenn dieser Knoten reduziert wurde
Minus.gif		Das Bild eines Minuszeichens, das neben dem ersten Stammknoten in einer Baumstruktur mit mehreren Stammknoten angezeigt wird, wenn dieser Knoten erweitert wurde. Dieses Bild enthält keine zusätzliche Linie und wird nur angezeigt, nachdem der Stammknoten einmal reduziert wurde. Das Bild Rminus.gif wird angezeigt, wenn die Seite das erste Mal geladen wird.
Noexpand.gif		Ein leeres Abstandhalterbild, das neben einem Endknoten angezeigt wird. Dieses Bild ermöglicht ein vertikales Ausrichten von Text.
Plus.gif		Das Bild eines Pluszeichens, das neben dem ersten Stammknoten in einer Baumstruktur mit mehreren Stammknoten angezeigt wird, wenn dieser Knoten reduziert wurde. Dieses Bild enthält keine zusätzliche Linie und wird nur angezeigt, wenn der Stammknoten bereits einmal erweitert wurde. Das Bild Rplus.gif wird angezeigt, wenn die Seite das erste Mal geladen wird.
R.gif		Ein Linienbild, das neben dem ersten Stammknoten in einer Baumstruktur mit mehreren Stammknoten angezeigt wird, wenn dieser Knoten ein Endknoten ist
Rminus.gif		Das Bild eines Minuszeichens, das neben dem ersten Stammknoten in einer Baumstruktur mit mehreren Stammknoten angezeigt wird, wenn dieser Knoten erweitert wurde. Dieses Bild enthält eine zusätzliche Linie und wird nur angezeigt, wenn die Seite zum ersten Mal geladen wird. Wenn der Stammknoten bereits einmal reduziert wurde, wird das Bild Minus.gif angezeigt.
Rplus.gif		Das Bild eines Pluszeichens, das neben dem ersten Stammknoten in einer Baumstruktur mit mehreren Stammknoten angezeigt wird, wenn dieser Knoten reduziert wurde. Dieses Bild enthält eine zusätzliche Linie und wird nur angezeigt, wenn die Seite zum ersten Mal geladen wird. Nachdem der Stammknoten einmal erweitert wurde, wird das Bild Plus.gif angezeigt.
T.gif		Ein Linienbild, das neben einem Knoten in der Mitte der Baumstruktur (an einer T-Verbindung) angezeigt wird, wenn dieser Knoten ein Endknoten ist
Tminus.gif		Das Bild eines Minuszeichens, das neben einem Knoten in der Mitte der Baumstruktur (an einer T-Verbindung) angezeigt wird, wenn dieser Knoten erweitert wurde
Tplus.gif		Das Bild eines Pluszeichens, das neben einem Knoten in der Mitte der Baumstruktur (an einer T-Verbindung) angezeigt wird, wenn dieser Knoten reduziert wurde

Bei Verwendung des Liniengrafik-Generators werden die Bilder vom Steuerelement erstellt und in einem Standardordner mit dem Namen TreeLineImages gespeichert. Sie können den Namen dieses Ordners ändern und die vom Liniengrafik-Generator generierte Bilder bearbeiten. Wenden Sie bei der Erstellung benutzerdefinierter Bilder die gleichen Benennungskonventionen an wie in der oben aufgeführten Tabelle. Mit dem Liniengrafik-Generator können Sie auf einfache Weise benutzerdefinierte Bilder erstellen, die dann bearbeitet und angepasst werden können.