WPF Ribbon Steuerelement veröffentlicht

Seit einigen Tagen steht das seit längerem angekündigte Windows Presentation Framework Ribbon Steuerelement nun in der finalen Version zur Verfügung.

Das neue Ribbon-Steuerelement ist kompatibel mit WPF 3.5 Service Pack 1 und WPF 4. Dabei handelt es sich um eine 100% WPF-Implementierung und nicht um einen Wrapper um den nativen Systemcode. Das bedeutet konkret, dass man alle WPF Styling-Fähigkeiten für die neuen Steuerelemente erhält.

Die folgenden Screenshots sind mit dem .NET 4 Client Profile Projektvorlagen erstellt worden.

Hier ein Blick auf einige der interessanten Funktionen.

Ribbon Application Projekt Vorlage

Der Ribbon-Installer beinhaltet eine “WPF Ribbon Application” Projektvorlage für Visual Studio.

Wenn man ein neues Ribbon-Projekt erstellt und anschließend sofort startet erhalt man die folgende Anwendung:

Der XAML-Code für das Standard-Ribbon sieht wie folgt aus:

 <ribbon:Ribbon x:Name="Ribbon">

     <ribbon:Ribbon.ApplicationMenu>

         <ribbon:RibbonApplicationMenu SmallImageSource="Images\SmallIcon.png">

             <ribbon:RibbonApplicationMenuItem Header="Hello _Ribbon"

                                               x:Name="MenuItem1"

                                               ImageSource="Images\LargeIcon.png"/>

         </ribbon:RibbonApplicationMenu>

     </ribbon:Ribbon.ApplicationMenu>

     <ribbon:RibbonTab x:Name="HomeTab"

                       Header="Home">

         <ribbon:RibbonGroup x:Name="Group1" 

                             Header="Group1">

             <ribbon:RibbonButton x:Name="Button1"

                                  LargeImageSource="Images\LargeIcon.png"

                                  Label="Button1" />

             <ribbon:RibbonButton x:Name="Button2"

                                  SmallImageSource="Images\SmallIcon.png"

                                  Label="Button2" />

             <ribbon:RibbonButton x:Name="Button3"

                                  SmallImageSource="Images\SmallIcon.png"

                                  Label="Button3" />

             <ribbon:RibbonButton x:Name="Button4"

                                  SmallImageSource="Images\SmallIcon.png"

                                  Label="Button4" />

         </ribbon:RibbonGroup>

     </ribbon:RibbonTab>

 </ribbon:Ribbon>

Das Fenster, das das Ribbon beinhaltet ist von der Klasse RibbonWindow abgeleitet. Diese Klasse verwendet nativen Interopcode, der den Zugriff auf die Nicht-Client-Grafikbereich zu erleichtert. Die Verwendung dieser Basisklasse ist absolut optional, solange man auf diese spezielleren Funktionen keinen Zugriff benötigt.

Das Ribbon-Steuerelement hat alle Funktionen die man erwartet: Quick Access Toolbar, Application Menu, Hilfsfunktionen, erweiterte Tooltips, Tastenkürzelvorschau, automatisches Anpassen der Größe und Anordnung, kontextuelle Gruppen, das schicken Windows 7 Look-and-Feel, und vieles mehr.

Kontextuelle Gruppen

Um ein neues RibbonTab (Reiter) in eine kontextuelle Gruppe, wie z.B. die Bildbearbeitungswerkzeuge in Word, zu erstellen, muss man lediglich die gewünschten Elemente im XAML-Code in den Bereich ContextualTabGroup-Bereich einfügen:

 <ribbon:RibbonTab x:Name="AwesomeTab"

                   ContextualTabGroupHeader="Awesome Tools"

                   Header="Really Awesome">

     <ribbon:RibbonGroup x:Name="Group2"

                         Header="Group2">

         <ribbon:RibbonButton x:Name="Button21"

                              LargeImageSource="Images\LargeIcon.png"

                              Label="Button21" />

     </ribbon:RibbonGroup>

 </ribbon:RibbonTab>

 <ribbon:Ribbon.ContextualTabGroups>

     <ribbon:RibbonContextualTabGroup Header="Awesome Tools"

                                      Visibility="Visible"

                                      Background="Green" />

 </ribbon:Ribbon.ContextualTabGroups>

Man achte hier auf die grüne Kopfzeile über dem Ribbon.

Quick Access Toolbar

Wie nicht anders zu erwarten, unterstützt das Ribbon auch die Quick Access Toolbar (in der Windows-Titelleiste).

 <ribbon:Ribbon.QuickAccessToolBar>

     <ribbon:RibbonQuickAccessToolBar>

         <ribbon:RibbonButton x:Name="ButtonQ1"

                              SmallImageSource="Images\SmallIcon.png"

                              Label="ButtonQ1" />

         <ribbon:RibbonButton x:Name="ButtonQ2"

                              SmallImageSource="Images\SmallIcon.png"

                              Label="ButtonQ2" />

         <ribbon:RibbonButton x:Name="ButtonQ3"

                              SmallImageSource="Images\SmallIcon.png"

                              Label="ButtonQ3" />

     </ribbon:RibbonQuickAccessToolBar>

 </ribbon:Ribbon.QuickAccessToolBar>

Dieser Screenshot zeigt zwei der Quick Access Buttons links oben im Fenster, mit dem Pfeil der andeutet, das dort noch mehr Buttons auf einen warten.

Das WPF Ribbon Team hat einen großartigen Job geleistet, dieses Steuerelement zu erstellen und komfortable für Entwickler zu gestalten. Es unterstützt eine Vielzahl von Szenarios und auch den aktuellen Windows 7 UI-Style.

PS: Und ja, der RibbonButton unterstützt auch ICommand.

Links

Download-Link: https://www.microsoft.com/downloads/details.aspx?FamilyID=2BFC3187-74AA-4154-A670-76EF8BC2A0B4&displaylang=en

Dokumentation-Link: https://msdn.microsoft.com/en-us/library/ff799534.aspx