Artikel
10/20/2021

3 Zeilen Code: Ribbon

Mit Microsoft Office 2007 wurde ein neues Konzept für die Steuerung von Anwendungen eingeführt. Das Ribbon ist ein „Gummi-Band“, in das sich die Funktionen einer Anwendung dynamisch einordnen lassen. Damit dient das Ribbon als eine Alternative zur herkömmlichen Menüleiste.

Die Ribbon-Funktionsleiste ist fest in Windows 7 integriert und wird in verschiedenen Windows 7-Programmen verwendet, z.B. Paint und WordPad. Das hier vorgestellte Ribbon ist eine reine WPF-Implementierung (Windows Presentation Foundation, Bestandteil des .NET Framework ab Version 3.0). Diese Implementierung kann auch auf anderen Systemen verwendet werden, sofern diese das .NET Framework ab Version 3.5 verwenden.

Um dieses Ribbon in eigene Anwendungen zu integrieren ist der folgende Download notwendig: Microsoft Ribbon for WPF

Meine erste Ribbon-Anwendung

Nach der Installation des WPF-Ribbon von dieser Seite (Link einfügen), steht dem Entwickler eine neue Projektvorlage in Visual Studio 2010 für Visual C# und Visual Basic zur Verfügung.

Legt man ein neues Projekt mit dieser Vorlage an, hat man sofort eine lauffähige Ribbon-Anwendung. Wenn man die Anwendung startet, hat man bereits ein funktionsfähiges Ribbon, ohne eine Zeile Code geschrieben zu haben.

Neue Steuerelemente

Durch die Installation des WPF-Ribbon-Steuerelementes erhält man zusätzlich noch einige weitere Steuerelemente.

Diese Steuerelemente decken alle Funktionen ab, die man vom Microsoft Office Ribbon her kennt. Die Verwendung dieser ist mit allen WPF-Funktionen möglich, dazu gehört das Gestalten der Vorlagen für die einzelnen Elemente (Template-Styling) und die Gestaltung der Oberfläche mit XAML (Extensible Markup Language).

Aufbau des Ribbon

Das Ribbon teilt sich in mehrere Bereiche auf, bzw. bringt für verschiedene Bereiche des Fensters Funktionen mit.

Zum einem gibt es die Titelzeile im Fenster der Anwendung - das ist der „Schnellzugriffsbereich“ (engl. „Quickaccess“).

In der Titelleiste von Word befindet sich links außen das Logo von Word, dann folgen drei Symbole, die man selber individuell anpassen kann.

Es folgt das Anwendungsmenü. Es klappt auf, wenn man auf den linken Button drückt.

Abschließend gibt es noch das eigentliche Ribbon.

In der WPF-Anwendung kann man diese drei Bereiche vollständig über den XAML-Code gestalten.

<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:Ribbon.QuickAccessToolBar>
    <ribbon:RibbonQuickAccessToolBar>
      <ribbon:RibbonButton
                SmallImageSource="Images\SmallIcon.png"
                x:Name="_save"/>
            <ribbon:RibbonButton
                SmallImageSource="Images\SmallIcon.png"
                x:Name="_back" />
        </ribbon:RibbonQuickAccessToolBar>
    </ribbon:Ribbon.QuickAccessToolBar>
    <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>

Der Quickaccess-Bereich:

<ribbon:Ribbon.QuickAccessToolBar>
                <ribbon:RibbonQuickAccessToolBar>
                    <ribbon:RibbonButton
                        SmallImageSource="Images\SmallIcon.png" 
                        x:Name="_save"/>
                    <ribbon:RibbonButton
                        SmallImageSource="Images\SmallIcon.png"
                        x:Name="_back" />
                </ribbon:RibbonQuickAccessToolBar>
            </ribbon:Ribbon.QuickAccessToolBar>

Der Anwendungsmenü-Bereich:

<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>

Der Ribbon-Bereich:

<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>

Mit wenigen Zeilen Code kann man sein eigenes dynamisches Ribbon auch ohne XAML, sondern mit Visual Basic und Visual C# erstellen

Für jedes Laufwerk automatisch ein Icon erzeugen

Um für alle Laufwerke des lokalen Computers ein Symbol darzustellen, sind folgende drei Zeilen Code notwendig, die man am besten in den Konstruktor seiner eigenen neuen Anwendung einfügt.

foreach (var drive in System.IO.DriveInfo.GetDrives())
{
   RibbonButton button = new RibbonButton() 
   { 
      Label = drive.Name, 
      LargeImageSource = new BitmapImage(
         new Uri("/Images/LargeIcon.png", UriKind.Relative)) 
   };
   
   Group1.Items.Add(button);
}

Das Ergebnis sieht wie folgt aus:

Möchte man etwas mehr Komfort haben und auch eine Aktion hinter den RibbonButton legen, dann benötigt man lediglich eine Zeile mehr:

button.Click += (s, e) => { MessageBox.Show((s as RibbonButton).Label + " clicked"); };

Zusammenfassung

Durch die Installation der Ribbon-Projektvorlage für Visual Studio bekommt man auf einfache Art und Weise die Möglichkeit, seine eigene Anwendung mit einer innovativen und zeitgemäßen Anwendungssteuerung zu versehen.