Bearbeiten

Share via


Erstellen einer Internet-Explorer-Style Symbolleiste

Eines der wichtigsten Benutzeroberflächenfeatures von Windows Internet Explorer ist die Symbolleiste. Es bietet Benutzern nicht nur Zugriff auf eine vielzahl von Funktionen, es ermöglicht es Benutzern auch, ihr Layout an ihre persönlichen Vorlieben anzupassen.

Der folgende Screenshot zeigt die Symbolleiste "Internet Explorer" und hebt einige der wichtigsten Features hervor.

Screenshot der Windows Internet Explorer-Symbolleiste mit Bezeichnungen für acht Features

Diese Symbolleiste besteht im Wesentlichen aus einem Rebar-Steuerelement mit vier Bändern: drei Symbolleisten und einer Menüleiste. Da es mit der allgemeinen Steuerelement-API implementiert ist, können Entwickler Symbolleisten mit einem oder allen features erstellen. In diesem Thema werden die wesentlichen Features der Symbolleiste "Internet Explorer" und deren Implementierung in Ihrer Anwendung erläutert.

Das Rebar-Steuerelement

Die zugrunde liegende Struktur der Symbolleiste "Internet Explorer" wird durch ein Rebar-Steuerelement bereitgestellt. Dieses Steuerelement bietet Benutzern die Möglichkeit, die Anordnung einer Sammlung von Tools anzupassen. Jede Leiste enthält einen oder mehrere Bänder, bei denen es sich in der Regel um lange, schmale Rechtecke handelt, die ein untergeordnetes Fenster enthalten, in der Regel ein Symbolleistensteuerelement.

Das Rebar-Steuerelement zeigt seine Bänder in einem rechteckigen Bereich an, in der Regel am oberen Rand des Fensters. Dieses Rechteck ist in einen oder mehrere Streifen unterteilt, die die Höhe eines Bandes aufweisen. Jedes Band kann sich auf einem separaten Streifen befinden, oder mehrere Bänder können auf demselben Streifen platziert werden.

Ein Rebar-Steuerelement bietet Benutzern zwei Möglichkeiten, ihre Tools anzuordnen:

  • Jedes Band hat normalerweise einen Greifer am linken Rand. Greifer werden verwendet, wenn zwei oder mehr Bänder auf einem einzelnen Streifen die Breite des Fensters überschreiten. Durch Ziehen des Greifers nach links oder rechts können Benutzer steuern, wie viel Platz jedem Band zugewiesen ist.
  • Benutzer können die Bänder innerhalb des Anzeigerechtecks der Leiste verschieben, indem sie ziehen und ablegen. Das Rebar-Steuerelement ändert dann die Anzeige, um die neue Anordnung der Bänder aufzunehmen. Wenn alle Bänder von einem Streifen entfernt werden, wird die Höhe des Balkens verringert, soweit der Anzeigebereich vergrößert wird.

Eine Anwendung kann bei Bedarf Bänder hinzufügen oder entfernen. In der Regel können Benutzer über das Menü Ansicht oder ein Kontextmenü auswählen, welche Bands angezeigt werden sollen.

Wenn die kombinierte Breite der Bänder auf einem Streifen die Breite des Fensters überschreitet, passt das Rebar-Steuerelement ihre Breiten nach Bedarf an. Einige der Werkzeuge können durch das angrenzende Band abgedeckt werden.

Version 5.80 der allgemeinen Steuerelemente bietet eine Möglichkeit, Tools, die von einem anderen Band abgedeckt wurden, für den Benutzer zugänglich zu machen. Wenn Sie das RBBS_USECHEVRON-Flag im fStyle-Member der REBARBANDINFO-Struktur der Band festlegen, wird ein Chevron für die abgedeckten Symbolleisten angezeigt. Wenn ein Benutzer auf den Chevron klickt, wird ein Menü angezeigt, in dem er die ausgeblendeten Tools verwenden kann. Der folgende Screenshot von Microsoft Internet Explorer 6 zeigt das Menü, das angezeigt wird, wenn ein Teil der Standardsymbolleiste abgedeckt ist.

Screenshot des angezeigten Menüs durch Klicken auf den Chevron

Da jedes Band ein Steuerelement enthält, können Sie über die API des Steuerelements zusätzliche Flexibilität bieten. Beispielsweise können Sie die Symbolleistenanpassung implementieren, um es dem Benutzer zu ermöglichen, Schaltflächen auf einer Symbolleiste hinzuzufügen, zu verschieben oder zu löschen.

Implementieren des Rebar-Steuerelements

Die meisten Features der Internet-Explorer Symbolleiste werden tatsächlich in den einzelnen Bändern implementiert. Die Implementierung des Rebar-Steuerelements selbst ist einfach und wird unten aufgeführt.

  1. Erstellen Sie das Rebar-Steuerelement mit CreateWindowEx. Legen Sie dwExStyle auf WS_EX_TOOLWINDOW und lpClassName auf REBARCLASSNAME fest. Internet Explorer verwendet die folgenden Fensterstile:

    Legen Sie die anderen Parameter für Ihre Anwendung fest.

  2. Erstellen Sie ein Steuerelement mit CreateWindowEx oder einer spezialisierten Steuerelementerstellungsfunktion wie CreateToolbarEx.

  3. Initialisieren Sie eine Band für das Steuerelement, indem Sie die Member von REBARBANDINFO ausfüllen. Fügen Sie den RBBS_USECHEVRON-Stil in das fStyle-Element ein, um Chevrons zu aktivieren.

  4. Fügen Sie das Band zum Rebar-Steuerelement mit einer RB_INSERTBAND Nachricht hinzu.

  5. Wiederholen Sie die Schritte 2 bis 4 für die verbleibenden Bänder.

  6. Implementieren Sie Handler für die Benachrichtigungen für die Beleisten. Insbesondere müssen Sie RBN_CHEVRONPUSHED verarbeiten, um ein Dropdownmenü anzuzeigen, wenn auf ein Chevron geklickt wird. Weitere Informationen finden Sie unter Umgang mit Chevrons.

Die Greifer sind standardmäßig enthalten. Um den Greifer für ein Band wegzulassen, legen Sie das RBBS_NOGRIPPER-Flag im fStyle-Element der REBARBANDINFO-Struktur der Band fest. Weitere Informationen zum Implementieren von Beleistensteuerelementen finden Sie unter Informationen zu Steuerelementen für die Leiste.

Umgang mit Chevrons

Wenn ein Benutzer auf einen Chevron klickt, sendet das Rebar-Steuerelement Ihrer Anwendung eine RBN_CHEVRONPUSHED Benachrichtigung. Die NMREBARCHEVRON-Struktur , die mit der Benachrichtigung übergeben wird, enthält den Bezeichner des Bandes und eine RECT-Struktur mit dem Rechteck, das vom Chevron belegt wird. Ihr Handler muss ermitteln, welche Schaltflächen ausgeblendet sind, und die zugehörigen Befehle in einem Popupmenü anzeigen.

Im folgenden Verfahren wird beschrieben, wie eine RBN_CHEVRONPUSHED Benachrichtigung behandelt wird:

  1. Rufen Sie das aktuelle begrenzungsbasierte Rechteck für das ausgewählte Band ab, indem Sie dem Rebar-Steuerelement eine RB_GETRECT Nachricht senden.
  2. Rufen Sie die Gesamtzahl der Schaltflächen ab, indem Sie dem Symbolleistensteuerelement des Bandes eine TB_BUTTONCOUNT Nachricht senden.
  3. Rufen Sie ab der linken Schaltfläche das umgebende Rechteck der Schaltfläche ab, indem Sie dem Symbolleistensteuerelement eine TB_GETITEMRECT Nachricht senden.
  4. Übergeben Sie die Band- und Schaltflächenrechtecke an die IntersectRect-Funktion . Diese Funktion gibt eine RECT-Struktur zurück, die dem sichtbaren Teil der Schaltfläche entspricht.
  5. Übergeben Sie das Schaltflächenrechteck und das Rechteck für den sichtbaren Teil der Schaltfläche an die EqualRect-Funktion .
  6. Wenn EqualRectTRUE zurückgibt, ist die gesamte Schaltfläche sichtbar. Wiederholen Sie die Schritte 3 bis 5 für die nächste Schaltfläche auf der Symbolleiste. Wenn EqualRectFALSE zurückgibt, ist die Schaltfläche zumindest teilweise ausgeblendet, und alle verbleibenden Schaltflächen werden vollständig ausgeblendet. Fahren Sie mit dem nächsten Schritt fort.
  7. Erstellen Sie ein Popupmenü mit Elementen für jede der ausgeblendeten Schaltflächen.
  8. Zeigen Sie das Popupmenü mithilfe der Funktion TrackPopupMenu an. Verwenden Sie das Chevronrechteck, das mit der RBN_CHEVRONPUSHED Benachrichtigung übergeben wurde, um das Menü zu positionieren. Das Menü sollte direkt unter dem Chevron liegen, wobei die linken Kanten ausgerichtet sind.
  9. Behandeln Sie die Menübefehle.

Symbolleisten

Der Größte Teil der Komplexität der Internet-Explorer Symbolleiste liegt in der Implementierung von Steuerelementen, aus denen die Balkenbänder bestehen. Internet Explorer zeigt in der Regel vier Bänder an:

  • Menüleiste
  • Die Standardsymbolleiste
  • Symbolleiste "Links"
  • Die Adresssymbolleiste

Alle diese Bänder, einschließlich der Menüleiste, enthalten tatsächlich Symbolleistensteuerelemente. In diesem Abschnitt wird die Implementierung der Symbolleisten "Standard" und "Links" erläutert. Die Menüleiste ist etwas komplizierter und wird separat unter Erstellen eines Internets Explorer-Style Menüleiste erläutert.

Die grundlegenden Verfahren zum Implementieren von Symbolleistensteuerelementen werden unter Informationen zu Symbolleistensteuerelementen erläutert. In diesem Abschnitt werden einige der neueren Symbolleistenfeatures behandelt, die vom Internet Explorer verwendet werden, um die Benutzerfreundlichkeit des Steuerelements zu erhöhen.

Dropdownschaltflächen unterstützen mehrere Befehle. Wenn der Benutzer auf eine Dropdownschaltfläche klickt, zeigt die Schaltfläche ein Popupmenü an, anstatt einen Befehl zu starten. Der Benutzer startet einen Befehl, indem er ihn im Menü auswählt. Der folgende Screenshot zeigt eine Dropdownschaltfläche und ein Menü aus der Internet-Explorer Standardsymbolleiste.

Screenshot des Dropdownmenüs

Dropdownfunktionen können jeder Schaltflächenformatvorlage hinzugefügt werden, indem sie dem fStyle-Member der TBBUTTON-Struktur der Schaltfläche ein Stilflag hinzufügen. Es gibt drei Arten von Dropdownschaltflächen, die alle von Internet Explorer verwendet werden:

  • Einfache Dropdownschaltflächen haben den BTNS_DROPDOWN Stil. Sie sehen wie normale Schaltflächen aus, aber sie zeigen ein Menü an, wenn Sie darauf klicken, anstatt einen Befehl zu starten.

  • Einfache Dropdown-Pfeilschaltflächen weisen das format BTNS_WHOLEDROPDOWN auf. Neben dem Schaltflächenbild oder -text wird ein Pfeil angezeigt. Abgesehen von der unterschiedlichen Darstellung sind sie mit einfachen Dropdownschaltflächen identisch. Die E-Mail-Schaltfläche, die als Beispiel in der vorherigen Abbildung verwendet wird, ist eine Dropdown-Pfeilschaltfläche.

  • Dropdownpfeilschaltflächen, die die TBSTYLE_EX_DRAWDDARROWS erweiterten Formatvorlage hinzufügen , BTNS_DROPDOWN einen Pfeil aufweisen, der vom Text oder Bild getrennt ist. Dieser Schaltflächenstil kombiniert die Funktionalität von Dropdown- und Standardschaltflächen. Wenn der Benutzer auf den Pfeil klickt, wird ein Menü angezeigt, und der Benutzer kann aus mehreren Befehlen wählen. Wenn der Benutzer auf die angrenzende Schaltfläche klickt, wird ein Standardbefehl gestartet. Der folgende Screenshot zeigt die Schaltfläche Internet Explorer Zurück, die einen separaten Pfeil verwendet.

    Screenshot, der das Menü der Schaltfläche

Wenn der Benutzer auf eine Dropdownschaltfläche mit der einfachen oder einfachen Pfeilart klickt, sendet das Symbolleistensteuerelement ihrer Anwendung eine TBN_DROPDOWN Benachrichtigung. Wenn Ihre Anwendung diese Nachricht empfängt, ist sie für das Erstellen und Anzeigen des Menüs und für die Behandlung des ausgewählten Befehls verantwortlich.

Wenn der Benutzer auf einen getrennten Pfeil klickt, sendet das Symbolleistensteuerelement ihrer Anwendung eine TBN_DROPDOWN Benachrichtigung. Ihre Anwendung sollte dies auf die gleiche Weise behandeln wie die anderen beiden Arten von Dropdownschaltflächen. Wenn der Benutzer auf die Schaltfläche Standard klickt, empfängt Ihre Anwendung eine WM_COMMAND-Nachricht mit der Befehls-ID der Schaltfläche, als wäre es eine Standardschaltfläche. Anwendungen reagieren in der Regel, indem sie den befehl top im Dropdownmenü starten, aber Sie können auf jede geeignete Weise reagieren.

List-Style-Schaltflächen

Wenn Sie Text hinzufügen, wird dieser bei Standardschaltflächen unterhalb der Bitmap angezeigt. Der folgende Screenshot zeigt die Schaltflächen Internet Explorer Sucheund Favoriten mit Standard-Schaltflächentext.

Screenshot mit der Symbolleiste

Microsoft Internet Explorer 5 und höhere Versionen verwenden den TBSTYLE_LIST-Stil. Der Text befindet sich rechts neben der Bitmap, wodurch die Höhe der Schaltfläche reduziert und der Anzeigebereich vergrößert wird. Die folgende Abbildung zeigt die Schaltflächen "Internet Explorer 6 Suchen" und "Favoriten" im stil "TBSTYLE_LIST".

Screenshot der Symbolleiste

Chevrons

Wenn der Benutzer die Bänder im Rebar-Steuerelement neu anordnet, wird möglicherweise ein Teil einer Symbolleiste verdeckt. Wenn das Band mit der RBBS_USECHEVRON-Formatvorlage erstellt wurde, zeigt das Rebar-Steuerelement am rechten Rand der Symbolleiste ein Chevron an. Der Benutzer klickt auf das Chevron, um ein Menü mit den ausgeblendeten Tools anzuzeigen.

Hot-Tracking

Wenn hot-tracking aktiviert ist, wird eine Schaltfläche heiß , wenn der Cursor darüber ist. Die Schaltfläche wird normalerweise durch ein unverwechselbares Bild von den anderen Schaltflächen auf der Symbolleiste unterschieden. Standardmäßig wird über dem Rest der Symbolleiste eine Heiße Schaltfläche ausgelöst. Wenn eine neue Schaltfläche heiß wird, erhält Ihre Anwendung eine TBN_HOTITEMCHANGE Benachrichtigung. Die folgende Abbildung zeigt die Schaltflächen Internet Explorer 5 Suche und Favoriten mit einer heißen Schaltfläche Suchen. Zusätzlich zu einer erhöhten Darstellung wurde die graue Bitmap der Schaltfläche durch eine farbige ersetzt.

Screenshot mit den Schaltflächen

Um hot-tracking zu aktivieren, erstellen Sie ein Symbolleistensteuerelement mit der TBSTYLE_FLAT oder TBSTYLE_LIST Stil. Diese werden als flache Symbolleisten bezeichnet, da die einzelnen Schaltflächen in keiner Weise hervorgehoben sind. Die Bitmaps werden einfach nebeneinander angezeigt. Nur wenn sie heiß sind, erhalten sie ein schaltflächenähnliches Aussehen. Diese beiden Stile sind auch transparent, was bedeutet, dass der Hintergrund der Symbole der Farbe des zugrunde liegenden Clientfensters entspricht.

Damit eine andere Bitmap angezeigt wird, wenn die Schaltfläche heiß ist, erstellen Sie eine zweite Bildliste , die heiße Bilder für alle Schaltflächen auf der Symbolleiste enthält. Größe und Reihenfolge dieser Bilder sollten identisch sein wie in der Standardbildliste. Senden Sie dem Symbolleistensteuerelement eine TB_SETHOTIMAGELIST-Nachricht , um die Liste der heißen Bilder festzulegen.