{"id":55000055,"date":"2016-10-01T00:00:00","date_gmt":"2020-03-27T19:22:18","guid":{"rendered":"http:\/\/access-im-unternehmen.aix-dev.de\/aiu\/?p=55"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-30T00:00:00","slug":"Ribbons_mit_WPF","status":"publish","type":"post","link":"https:\/\/vbentwickler.de\/Ribbons_mit_WPF\/","title":{"rendered":"Ribbons mit WPF"},"content":{"rendered":"

Der geneigte Access-Entwickler weiß mit dem Begriff Ribbon natürlich etwas anzufangen. Aber gibt es so etwas auch für .NET-Anwendungen Ist das nicht ein reines Office-Feature Immerhin gibt es ja auch in der Benutzeroberfläche von Visual Studio kein Ribbon, sondern eine Menüleiste und Symbolleisten, wie Sie sie von älteren Office-Versionen bis Office 2003 kennen (man munkelt, einige Entwickler wünschten sich die Menüleisten zurück …). In diesem Artikel schauen wir uns an, wie weit es mit dem Ribbon unter .NET und speziell unter WPF bestellt ist und welche Unterstützung uns Visual Studio für die Programmierung von Ribbons bietet.<\/b><\/p>\n

Um herauszufinden, ob es unter WPF Ribbons gibt und wie diese programmiert werden, starten wir mit einem neuen Projekt unter dem Namen RibbonsInWPF <\/b>mit der Vorlage Visual C#|Windows|WPF-Anwendungen<\/b>. Dort beginnen wir mit dem Fenster MainWindow<\/b>, das ja automatisch als Startfenster angelegt wird. <\/p>\n

Die schnelle Eingabe des Suchbegriffs Ribbon in das Suchfenster der Toolbox von Visual Studio liefert schon einmal keine Ergebnisse. Also werfen wir einen Blick in den Dialog Neues Element hinzufügen<\/b>, den Sie mit dem gleichnamigen Befehl des Eintrags Projekt <\/b>der Menüleiste öffnen. Auch hier gibt es eine Suchmöglichkeit, die wir allerdings ebenfalls ohne Erfolg nutzen. Gibt es etwa gar keine Ribbons unter WPF<\/p>\n

Vielleicht müssen wir dafür eine spezielle Bibliothek hinzufügen. Also öffnen wir den Verweis-Manager <\/b>(Menüeintrag Projekt|Verweis hinzufügen…<\/b>) und suchen hier nach dem Ausdruck Ribbon<\/b>. Bingo! Hier werden wir endlich fündig und fügen den Eintrag aus Bild 1 per Mausklick zu den eingebundenen Referenzen hinzu. In den Steuerelementen und auch im Dialog Neues Element hinzufügen <\/b>finden sich allerdings weiterhin keine neuen Elemente. Um es kurz zu machen: Auch in Visual Studio müssen Sie manuell XML-Code eingeben, um ein Ribbon zu definieren. Also legen wir los und fügen im Grid<\/b>-Element ein erstes Ribbon<\/b>-Element hinzu:<\/p>\n

\"Hinzufügen<\/p>\n

Bild 1: Hinzufügen einer Referenz auf die Bibliothek System.Windows.Controls.Ribbon<\/span><\/b><\/p>\n

<Window x:Class=\"RibbonMitWPF.MainWindow\">\r\n     <Grid>\r\n         <Ribbon><\/Ribbon>\r\n     <\/Grid>\r\n<\/Window><\/pre>\n
Das Ergebnis bekommen wir allerdings immerhin direkt in Form eines entsprechenden Elements im Entwurf des WPF-Fensters zu sehen (siehe Bild 2). Ein Klick mit der rechten Maustaste auf das Ribbon liefert ebenfalls keine Möglichkeit, auf die Schnelle ein paar Steuerelemente zum Ribbon hinzuzufügen. Also genießen wir zumindest die Bereitstellung von IntelliSense bei der manuellen Eingabe der notwendigen Elemente.<\/p>\n
\"Hinzufügen<\/p>\n
Bild 2: Hinzufügen eines leeren Ribbons<\/span><\/b><\/p>\n
Tab-Element hinzufügen<\/h2>\n
Ein Ribbon-Tab legen Sie über das RibbonTab<\/b>-Element an, nicht wie unter Office mit dem tab<\/b>-Element:<\/p>\n
<Ribbon>\r\n     <RibbonTab Header=\"Ribbontab\"><\/RibbonTab>\r\n<\/Ribbon><\/pre>\n
Grundsätzlich finden Sie die Ribbon-spezifischen Elemente alle schnell, wenn Sie mit IntelliSense-Unterstützung direkt die Zeichenfolge Ribbon… <\/b>eingeben (siehe Bild 3). Hier tauchen dann auch schnell die bekannten Elemente wie RibbonButton<\/b>, RibbonGroup<\/b> und so weiter auf.<\/p>\n
\"Zugriff<\/p>\n
Bild 3: Zugriff auf die Ribbon-Elemente per IntelliSense<\/span><\/b><\/p>\n
Schaltfläche hinzufügen<\/h2>\n
Fügen wir als Nächstes eine Schaltfläche hinzu. Wenn wir nicht achtgeben und das RibbonButton<\/b>-Element außerhalb des RibbonTab<\/b>-Elements im XAML-Code hinzufügen, geschieht tatsächlich das, was Sie in Bild 4 sehen: Das RibbonButton<\/b>-Element wird oben neben dem Ribbon-Registerreiter angelegt. Ob und wozu man das braucht, erklärt sich nicht – wir wollen uns aber an den gewohnten Strukturen aus dem Office-Bereich orientieren. Also fügen wir das RibbonButton<\/b>-Element auch nicht einfach in das RibbonTab<\/b>-Element ein, sondern fügen zunächst ein RibbonGroup<\/b>-Element hinzu. Grundsätzlich kann man sich als Access-Entwickler, der sich schon einmal mit der Programmierung des Ribbons beschäftigt hat, merken, dass die bekannten Elemente alle mit dem Präfix Ribbon… <\/b>ausgestattet wurden (also RibbonTab<\/b> statt tab<\/b>, RibbonGroup <\/b>statt group <\/b>et cetera).<\/p>\n
\"Ein<\/p>\n
Bild 4: Ein Ribbon-Button außerhalb eines Tab-Elements<\/span><\/b><\/p>\n
Ein RibbonTab<\/b>-Element mit zwei RibbonGroup<\/b>– und je drei RibbonButton<\/b>-Elementen definieren wir schließlich wie in Listing 1.<\/p>\n
<Ribbon Title=\"Beispielribbon\">\r\n   <RibbonTab Header=\"Ribbontab\">\r\n     <RibbonGroup Header=\"Ribbongruppe 1\">\r\n       <RibbonButton Label=\"Beispielbutton 1\"><\/RibbonButton>\r\n       <RibbonButton Label=\"Beispielbutton 2\"><\/RibbonButton>\r\n       <RibbonButton Label=\"Beispielbutton 3\"><\/RibbonButton>\r\n     <\/RibbonGroup>\r\n     <RibbonGroup Header=\"Ribbongruppe 2\">\r\n       <RibbonButton Label=\"Beispielbutton 4\"><\/RibbonButton>\r\n       <RibbonButton Label=\"Beispielbutton 5\"><\/RibbonButton>\r\n       <RibbonButton Label=\"Beispielbutton 6\"><\/RibbonButton>\r\n     <\/RibbonGroup>\r\n   <\/RibbonTab>\r\n<\/Ribbon><\/pre>\n
Listing 1: Code für ein Ribbon mit zwei Gruppen und einigen Schaltlfächen<\/span><\/b><\/p>\n
Das Ergebnis nach einem Klick auf die Taste F5<\/b> zum Start des Debuggers zeigt Bild 5. Es gibt ein paar Besonderheiten, die wir an dieser Stelle klären wollen: Zunächst können Sie bereits für das Ribbon<\/b>-Element mit dem Attribut Title <\/b>eine Überschrift festlegen, die dann in der Abbildung beispielsweise Beispielribbon <\/b>lautet. Dies ist unter Office so nicht möglich. Die zweite Besonderheit ist, dass es für die Beschriftungen so viele verschiedene Attribute gibt. Beim Ribbon<\/b>-Element selbst heißt sie Title<\/b>, beim RibbonTab <\/b>und bei der RibbonGroup <\/b>lautet das Attribut Header <\/b>und bei der Schaltfläche (RibbonButton<\/b>) heißt sie schließlich Label<\/b>. Der Hintergrund sind die verschiedenen Basis-Elemente, von denen die Ribbon-Elemente erben. Wenn man das erstmal herausgefunden hat, gewöhnt man sich allerdings recht schnell daran.<\/p>\n
\"Ein<\/p>\n
Bild 5: Ein Ribbon in einer laufenden Anwendung<\/span><\/b><\/p>\n
Bilder im WPF-Ribbon<\/h2>\n
Bevor wir uns um die Funktionalität kümmern, also um die Ereignisse der einzelnen Ribbon-Elemente, wollen wir noch für eine etwas schickere Optik sorgen. Dazu gehören im Ribbon natürlich ein paar Icons. Im Gegensatz zu Access (und den übrigen Office-Anwendungen), wo einiges an Code benötigt wird, um Bilder im Ribbon anzuzeigen, gelingt dies unter WPF relativ einfach. Dazu fügen Sie zunächst die gewünschten Icons zum Projekt hinzu, indem Sie diese einfach in das Projekt im Projektmappen-Explorer ziehen. Bevor Sie damit beginnen, sollten Sie sich überlegen, ob Sie für Bilddateien nicht einen eigenen Ordner innerhalb des Projekts anlegen sollen. Dies erledigen Sie über den Kontextmenü-Eintrag Hinzufügen|Neuer Ordner <\/b>des Projekt-Elements. Den neuen Ordner können Sie beispielsweise Images <\/b>nennen. Danach ziehen wir einige Bilddateien aus dem Windows Explorer in dieses Verzeichnis. Sammlungen solcher Icons können Sie im Internet kostenlos finden, für hochwertige Kollektionen wie etwa von iconexperience.com <\/b>müssen Sie jedoch ein paar Euro hinlegen.<\/p>\n
Der neue Ordner Images <\/b>mit einigen Bildern sieht dann so wie in Bild 6 aus. Wenn Sie die Einträge mit der Maus überfahren, blendet Visual Studio eine Vorschau der jeweiligen Bilder ein. Nun wollen wir die Bilder auch im Ribbon anzeigen, zunächst als Symbol für die Schaltflächen.<\/p>\n
\"Bilder<\/p>\n
Bild 6: Bilder für die Anzeige im Ribbon im Projekt-Explorer<\/span><\/b><\/p>\n
Dazu fügen wir den Schaltflächen eines der beiden Attribute SmallImageSource <\/b>oder LargeImageSource <\/b>hinzu und legen den Namen der Bilddatei inklusive Verzeichnis als Wert fest. Dies sieht beispielsweise wie folgt aus:<\/p>\n
<RibbonButton Label=\"Beispielbutton 1\" \r\n     LargeImageSource=\"Images\\apple.png\" \/>\r\n...\r\n<RibbonButton Label=\"Beispielbutton 4\" \r\n    SmallImageSource=\"Images\\ice_cream2.png\" \/><\/pre>\n
In der Anwendung erscheinen die Bilder in den veschiedenen Größen dann wie in Bild 7. Wir haben hier ausschließlich Bilder der Größe 32×32 verwendet. Üblicherweise verwendet man für das Attribut LargeImageSource <\/b>Bilddateien dieser Größe, für das Attribut SmallImageSource <\/b>nutzt man Bilder der Größe 16×16. Die Bilder werden aber bei Bedarf herunterskaliert. Wenn Sie über eine Icon-Sammlung mit Icons in diesen beiden Größen verfügen, sollten Sie jeweils die korrekte Größe für die entsprechenden Attribute verwenden.<\/p>\n
\"Ribbon-Schaltflächen<\/p>\n
Bild 7: Ribbon-Schaltflächen mit einigen Bildern<\/span><\/b><\/p>\n
Dazu müssen Sie dann zum Dateinamen der Elemente im Ordner Images <\/b>noch ein Suffix wie etwa _small <\/b>hinzufügen.<\/p>\n
Ribbon-Titelzeile entfernen<\/h2>\n
Die Zeile, die durch das Ribbon-Element selbst repräsentiert wird, können Sie mit einem Trick entfernen. Dazu ändern Sie den Typ des Fenster-Objekts von Window <\/b>auf RibbonWindow<\/b>. Dazu sind drei Schritte nötig.<\/p>\n
Der erste Schritt ist das Hinzufügen der Klasse mit einer entsprechenden using<\/b>-Anweisung in der Code behind-Klasse des Fensters:<\/p>\n
using System.Windows.Controls.Ribbon;<\/pre>\n
Danach ändern Sie den Typ der Basisklasse von MainWindow <\/b>von Window <\/b>auf RibbonWindow<\/b>, sodass der Inhalt der Code behind-Klasse nun wie folgt aussieht:<\/p>\n
namespace RibbonMitWPF {\r\n     public partial class MainWindow : RibbonWindow {\r\n         public MainWindow() {\r\n             InitializeComponent();\r\n         }\r\n     }\r\n}<\/pre>\n
Schließlich ziehen Sie diese Änderung auch im XAML-Code dieser Klasse nach. Dazu ändern Sie das oberste Element ebenfalls von Window in RibbonWindow<\/b>:<\/p>\n
<RibbonWindow ... Title=\"MainWindow\" Height=\"350\" Width=\"625\">\r\n     <Grid>\r\n     ...<\/pre>\n
Wenn Sie die vorherige Ansicht und die aktuelle Version vergleichen, stellen Sie fest, dass die Zeile mit dem Text Beispielribbon <\/b>weggefallen ist (siehe Bild 8). Übrigens: Wenn Sie das Title<\/b>-Attribut des RibbonWindow<\/b>-Elements in diesem Fall leer lassen, zeigt der Titel den Inhalt der Eigenschaft Header <\/b>des Ribbon<\/b>-Elements an.<\/p>\n
\"Ribbon<\/p>\n
Bild 8: Ribbon mit und ohne Titelleiste<\/span><\/b><\/p>\n
Das Icon der Titelleiste des Fensters können Sie in diesem Fall durch Setzen des Attributs WindowIconVisibility <\/b>auf den Wert Collapsed <\/b>verschwinden lassen:<\/p>\n
<Ribbon Title=\"Beispielribbon\" \r\n     WindowIconVisibility=\"Collapsed\"><\/pre>\n
Schnellzugriffsleiste nutzen<\/h2>\n
Warum aber sollte man diesen Bereich überhaupt erhalten Nun: Wenn Sie Access-Ribbons gewohnt sind, wissen Sie, dass dort oben in der Regel die Schnellzugriffsleiste untergebracht ist, die einige Standardbefehle wie Wiederholen <\/b>oder Rückgängig <\/b>enthält. Sie könnten also durchaus auch selbst einige solcher Befehle dort unterbringen, die immer sichtbar sind – unabhängig davon, welches RibbonTab<\/b>-Element gerade aktiviert ist. Um Elemente zur Schnellstartleiste hinzuzufügen, legen Sie unterhalb des Ribbon<\/b>-Elements ein Element namens Ribbon.QuickAccessToolbar <\/b>an, dem Sie wiederum das Element RibbonQuickAccessToolbar <\/b>unterordnen. Darin finden schließlich die gewünschten Steuerelemente Platz (siehe Bild 9):<\/p>\n
\"Ribbon<\/p>\n
Möchten Sie weiterlesen? Dann lösen Sie Ihr Ticket!<\/span>
\nHier geht es zur Bestellung des Jahresabonnements des Magazins Visual Basic Entwickler<\/strong>:<\/span>
\nZur Bestellung ...<\/a><\/span>
\nDanach greifen Sie sofort auf alle rund 200 Artikel<\/strong> unseres Angebots zu - auch auf diesen hier!<\/span>
\nOder haben Sie bereits Zugangsdaten? Dann loggen Sie sich gleich hier ein:<\/span><\/p>\n<\/div>\n\n\t\n\t
\n\n\t\t\n\t\t