Durch Anpassung des Ribbons oder des Backstage-Bereichs kann man seinen Anwendungen praktische Elemente zum Aufrufen von Funktionen, Formularen oder Berichten hinzufügen. Noch individueller werden benutzerdefinierte Ribbons und der Backstage-Bereich, wenn man den Steuerelementen auch noch eigene Icons hinzufügt. Das ist jedoch mit Bordmitteln nicht so einfach möglich. Früher hat man diese Aufgabe unter Verwendung zahlreicher API-Funktionen aus der GDI-Bibliothek erledigt. Mittlerweile haben wir wesentlich einfachere Routinen dafür entwickelt. In diesem Artikel stellen wir diese vor und zeigen, wie Du Ribbon- und Backstage-Steuerelemente einfach mit solchen Icons ausstatten kannst.
Voraussetzung
Wie immer, wenn wir das Ribbon für eine Datenbank-Anwendung individuell anpassen wollen, benötigen wir die Ribbon-Definition selbst. Diese speichern wir in der Tabelle USysRibbons (siehe Bild 1).
Bild 1: Ribbon-Definition in der Tabelle USysRibbons
Bilder im Ribbon
Der erste Bereich, den wir mit eigenen Bildern ausstatten wollen, ist ein tab-Element im Ribbon. Dafür haben wir ein neues Tab namens Projektverwaltung angelegt, das im Endergebnis wie in Bild 2 aussieht.
Bild 2: Ribbon-Steuerelemente mit Bildern
Den XML-Code für diesen Bereich sehen wir in Listing 1. Hier haben wir an einigen Stellen für das Attribut image den Namen des jeweiligen Bildes angegeben.
Bild 1<customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui" onLoad="onLoad" loadImage="loadImage">
<ribbon>
<tabs>
<tab id="tabProjekt" label="Projektverwaltung" insertAfterMso="TabHome">
<group id="grpDokumente" label="Dokumente" imageMso="FileSave">
<button id="btnNeuesProjekt" label="Neues Projekt" image="cubes" size="large" onAction="onAction"/>
<button id="btnProjektOeffnen" label="Projekt öffnen" image="folder_cubes" size="large" onAction="onAction"/>
<separator id="sep1"/>
<button id="btnSpeichern" label="Speichern" image="floppy_disk" size="normal" onAction="onAction"/>
<button id="btnExportieren" label="Exportieren" image="export" size="normal" onAction="onAction"/>
<button id="btnDrucken" label="Drucken" image="printer" size="normal" onAction="onAction"/>
</group>
<group id="grpTeam" label="Team">
<button id="btnMitgliedHinzu" label="Mitglied hinzufügen" image="user" size="large" onAction="onAction"/>
<button id="btnNachricht" label="Nachricht senden" image="mail" size="large" onAction="onAction"/>
<separator id="sep2"/>
<button id="btnAufgaben" label="Aufgaben" image="checkbox" size="normal" onAction="onAction"/>
<button id="btnKalender" label="Kalender" image="calendar" size="normal" onAction="onAction"/>
</group>
<group id="grpBerichte" label="Berichte">
<button id="btnStatusbericht" label="Statusbericht" image="clipboard_paste" size="large" onAction="onAction"/>
<splitButton id="sbZeiterfassung" size="large">
<button id="btnZeiterfassung" label="Zeiterfassung" image="timer" onAction="onAction"/>
<menu id="mnuZeiterfassung" label="Zeiterfassung">
<button id="btnZeitStarten" label="Starten" image="media_play" onAction="onAction"/>
<button id="btnZeitStoppen" label="Stoppen" image="media_stop" onAction="onAction"/>
<menuSeparator id="msep1"/>
<button id="btnZeitUebersicht" label="Übersicht" image="window_time" onAction="onAction"/>
</menu>
</splitButton>
</group>
</tab>
</tabs>
</ribbon>
...
Listing 1: Erster Teil der Ribbon-Definition
Bilder im Backstage-Bereich
Außerdem wollen wir den Backstage-Bereich an einigen Stellen mit eigenen Bildern versehen. Dazu haben wir der Ribbon-Definition im Bereich backstage die Elemente wie in Listing 2 hinzugefügt.
...
<backstage>
<tab id="tabProjektInfo" label="Projektinfo" insertAfterMso="TabInfo" title="Projektverwaltung">
<firstColumn>
<group id="grpProjektdaten" label="Projektdaten">
<primaryItem>
<button id="btnProjektSpeichern" label="Projekt speichern" _
image="clipboard_paste" onAction="onAction"/>
</primaryItem>
<topItems>
...
</topItems>
<bottomItems>
<hyperlink id="lnkDoku" label="Projektdokumentation" image="upload" _
target="https://www.example.com"/>
</bottomItems>
</group>
</firstColumn>
...
</tab>
</backstage>
</customUI>
Listing 2: Zweiter Teil der Ribbon-Definition, hier für den Backstage-Bereich
Diese Erweiterungen spiegeln sich im Backstage-Bereich in einem neuen tab-Element wieder, das nach dem Anklicken den Bereich aus Bild 3 liefert.
Bild 3: Backstage-Bereich mit einigen Bildern
Verschieden Bildgrößen
Wir können in den meisten Steuerelementen im Ribbon zwei Bildgrößen verwenden.
Wenn wir die Eigenschaft size für das Element auf normal einstellen oder diese weglassen, werden die Bilder mit 16 x 16 Pixeln angezeigt. Geben wir large an, erscheinen die Bilder mit 32 x 32 Pixeln. Optimalerweise liegen die Bilddateien in der passenden Größe vor, also 16 x 16 Pixel für kleine und 32 x 32 Pixel für große Bilder.
Die Bilddateien sollten außerdem in einem Format vorliegen, das Transparenz unterstützt. Optimal sind .png-Bilder geeignet, aber es funktioniert auch mit .ico– und .bmp-Dateien.
Weitere Schritte
Mit der Angabe von Bildnamen für die image-Elemente haben wir bereits den ersten Teil geschafft – wir haben festgelegt, welches Bild für welches Steuerelement angezeigt werden soll. Es fehlen noch zwei weitere Schritte:
- Wir müssen für das Element customUI im Attribut loadImage angeben, welche VBA-Prozedur dafür sorgt, dass die im image-Attribut angegebenen Bilddateien geladen werden.
- Außerdem müssen wir die Bilddateien noch verfügbar machen. Diese hinterlegt man dazu am einfachsten in der Tabelle MSysResources, in der auch die Icons für Schaltflächen oder Bild-Steuerelemente in Formularen hinterlegt werden.
Bilder in der Tabelle MSysResources hinterlegen
Durch Anpassung des Ribbons oder des Backstage-Bereichs kann man seinen Anwendungen praktische Elemente zum Aufrufen von Funktionen, Formularen oder Berichten hinzufügen. Noch individueller werden benutzerdefinierte Ribbons und der Backstage-Bereich, wenn man den Steuerelementen auch noch eigene Icons hinzufügt. Das ist jedoch mit Bordmitteln nicht so einfach möglich. Früher hat man diese Aufgabe unter Verwendung zahlreicher API-Funktionen aus der GDI-Bibliothek erledigt. Mittlerweile haben wir wesentlich einfachere Routinen dafür entwickelt. In diesem Artikel stellen wir diese vor und zeigen, wie Du Ribbon- und Backstage-Steuerelemente einfach mit solchen Icons ausstatten kannst.
Voraussetzung
Wie immer, wenn wir das Ribbon für eine Datenbank-Anwendung individuell anpassen wollen, benötigen wir die Ribbon-Definition selbst. Diese speichern wir in der Tabelle USysRibbons (siehe Bild 1).
Bild 1: Ribbon-Definition in der Tabelle USysRibbons
Bilder im Ribbon
Der erste Bereich, den wir mit eigenen Bildern ausstatten wollen, ist ein tab-Element im Ribbon. Dafür haben wir ein neues Tab namens Projektverwaltung angelegt, das im Endergebnis wie in Bild 2 aussieht.
Bild 2: Ribbon-Steuerelemente mit Bildern
Den XML-Code für diesen Bereich sehen wir in Listing 1. Hier haben wir an einigen Stellen für das Attribut image den Namen des jeweiligen Bildes angegeben.
Bild 1<customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui" onLoad="onLoad" loadImage="loadImage">
<ribbon>
<tabs>
<tab id="tabProjekt" label="Projektverwaltung" insertAfterMso="TabHome">
<group id="grpDokumente" label="Dokumente" imageMso="FileSave">
<button id="btnNeuesProjekt" label="Neues Projekt" image="cubes" size="large" onAction="onAction"/>
<button id="btnProjektOeffnen" label="Projekt öffnen" image="folder_cubes" size="large" onAction="onAction"/>
<separator id="sep1"/>
<button id="btnSpeichern" label="Speichern" image="floppy_disk" size="normal" onAction="onAction"/>
<button id="btnExportieren" label="Exportieren" image="export" size="normal" onAction="onAction"/>
<button id="btnDrucken" label="Drucken" image="printer" size="normal" onAction="onAction"/>
</group>
<group id="grpTeam" label="Team">
<button id="btnMitgliedHinzu" label="Mitglied hinzufügen" image="user" size="large" onAction="onAction"/>
<button id="btnNachricht" label="Nachricht senden" image="mail" size="large" onAction="onAction"/>
<separator id="sep2"/>
<button id="btnAufgaben" label="Aufgaben" image="checkbox" size="normal" onAction="onAction"/>
<button id="btnKalender" label="Kalender" image="calendar" size="normal" onAction="onAction"/>
</group>
<group id="grpBerichte" label="Berichte">
<button id="btnStatusbericht" label="Statusbericht" image="clipboard_paste" size="large" onAction="onAction"/>
<splitButton id="sbZeiterfassung" size="large">
<button id="btnZeiterfassung" label="Zeiterfassung" image="timer" onAction="onAction"/>
<menu id="mnuZeiterfassung" label="Zeiterfassung">
<button id="btnZeitStarten" label="Starten" image="media_play" onAction="onAction"/>
<button id="btnZeitStoppen" label="Stoppen" image="media_stop" onAction="onAction"/>
<menuSeparator id="msep1"/>
<button id="btnZeitUebersicht" label="Übersicht" image="window_time" onAction="onAction"/>
</menu>
</splitButton>
</group>
</tab>
</tabs>
</ribbon>
...
Listing 1: Erster Teil der Ribbon-Definition
Bilder im Backstage-Bereich
Außerdem wollen wir den Backstage-Bereich an einigen Stellen mit eigenen Bildern versehen. Dazu haben wir der Ribbon-Definition im Bereich backstage die Elemente wie in Listing 2 hinzugefügt.
...
<backstage>
<tab id="tabProjektInfo" label="Projektinfo" insertAfterMso="TabInfo" title="Projektverwaltung">
<firstColumn>
<group id="grpProjektdaten" label="Projektdaten">
<primaryItem>
<button id="btnProjektSpeichern" label="Projekt speichern" _
image="clipboard_paste" onAction="onAction"/>
</primaryItem>
<topItems>
...
</topItems>
<bottomItems>
<hyperlink id="lnkDoku" label="Projektdokumentation" image="upload" _
target="https://www.example.com"/>
</bottomItems>
</group>
</firstColumn>
...
</tab>
</backstage>
</customUI>
Listing 2: Zweiter Teil der Ribbon-Definition, hier für den Backstage-Bereich
Diese Erweiterungen spiegeln sich im Backstage-Bereich in einem neuen tab-Element wieder, das nach dem Anklicken den Bereich aus Bild 3 liefert.
Bild 3: Backstage-Bereich mit einigen Bildern
Verschieden Bildgrößen
Wir können in den meisten Steuerelementen im Ribbon zwei Bildgrößen verwenden.
Wenn wir die Eigenschaft size für das Element auf normal einstellen oder diese weglassen, werden die Bilder mit 16 x 16 Pixeln angezeigt. Geben wir large an, erscheinen die Bilder mit 32 x 32 Pixeln. Optimalerweise liegen die Bilddateien in der passenden Größe vor, also 16 x 16 Pixel für kleine und 32 x 32 Pixel für große Bilder.
Die Bilddateien sollten außerdem in einem Format vorliegen, das Transparenz unterstützt. Optimal sind .png-Bilder geeignet, aber es funktioniert auch mit .ico– und .bmp-Dateien.
Weitere Schritte
Mit der Angabe von Bildnamen für die image-Elemente haben wir bereits den ersten Teil geschafft – wir haben festgelegt, welches Bild für welches Steuerelement angezeigt werden soll. Es fehlen noch zwei weitere Schritte:
- Wir müssen für das Element customUI im Attribut loadImage angeben, welche VBA-Prozedur dafür sorgt, dass die im image-Attribut angegebenen Bilddateien geladen werden.
- Außerdem müssen wir die Bilddateien noch verfügbar machen. Diese hinterlegt man dazu am einfachsten in der Tabelle MSysResources, in der auch die Icons für Schaltflächen oder Bild-Steuerelemente in Formularen hinterlegt werden.
Bilder in der Tabelle MSysResources hinterlegen
Unser exklusives Angebot für Dich!
(Gilt für den Abschluss eines Jahres-Abonnements.)
Hier geht’s weiter →Die ersten 4 Wochen kostenlos testen – voller Zugriff auf alle Artikel, vollständigen Code und Beispieldatenbanken. Kein Risiko: Wenn es nicht passt, kündigst Du einfach innerhalb der ersten vier Wochen.
Oder hast Du eine konkrete Frage zu Deiner eigenen Access-Anwendung?
Vielleicht stellt Deine Anwendung Dich vor eine Herausforderung, zu der Du bisher keine Lösung findest. Schlechte Performance, kein ausreichender Zugriffsschutz, Du bist unsicher über Dein Datenmodell oder Dein Code liefert unerklärliche Fehler?
In unserem kostenlosen Access-Audit schaut sich André Minhorst persönlich gemeinsam mit Dir Deine Lösung per Zoom an – und zeigt Dir, wo Datenmodell, VBA-Code, Ergonomie und Sicherheit Optimierungspotenzial bieten.
Jetzt kostenloses Access-Audit anfordern →