Die Ribbon für WPF in eigene Anwendungen einbauen

  • Article

Die Ribbon ist eine sehr beliebte neue Möglichkeit für die Steuerung von Anwendungen. Jeder Entwickler kann diese nun in seine bestehenden Anwendungen integrieren. Und das ganze ohne viel Aufwand. Microsoft stellt die Ressourcen dafür kostenfrei zur Verfügung.

Schritt 1 : Herunterladen & Installieren

Alle Ressourcen für das Ribbon können über das Microsoft Download Center heruntergeladen werden. Dort sucht man einfach nach „Ribbon for WPF“. Der Download beinhaltet einen Installer, der automatisch Projektvorlagen in Visual Studio 2010 für Visual Basic .NET und Visual C# einbindet.

Schritt 2: Visual Studio öffnen und einbauen

Um eine neue Anwendung basierend auf der WPF Ribbon bauen zu erstellen, wählt man bei der Anlage eines neuen Projektes einfach die Vorlage „WPF Ribbon Application“ aus.

clip_image002

Anschließend hat man folgende Ansicht in Visual Studio.

clip_image004

Visual Studio 2010 baut automatisch eine lauffähige Ribbon-Anwendung.

Schritt 3: Erweitern

Mit diesen paar Zeilen in XAML (Extensible Application Markup Language) lässt sich die Ribbon an eigene Bedürfnisse anpassen.

<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 Header="Hinzufügen">

<ribbon:RibbonButton LargeImageSource="Images\PlusBlue.png" Label="Benutzer" />

<ribbon:RibbonButton SmallImageSource="Images\PlusGrey.png" Label="Gruppe" />

<ribbon:RibbonButton SmallImageSource="Images\PlusGreen.png" Label="Ordner" />

<ribbon:RibbonButton SmallImageSource="Images\PlusOrange.png" Label="Akte" />

</ribbon:RibbonGroup>

<ribbon:RibbonGroup Header="Auswahl">

<ribbon:RibbonButton LargeImageSource="Images\Sort.png" Label="Sortieren" />

<ribbon:RibbonButton LargeImageSource="Images\RefreshBlue.png" Label="Aktualisieren" />

</ribbon:RibbonGroup>

</ribbon:RibbonTab>

….

</ribbon:Ribbon>

Visual Studio 2010 bietet allerdings auch die Möglichkeit, das ganze über die Toolbox via Drag & Drop duchzuführen.

clip_image006

 

Der Beweis als Video:

Get Microsoft Silverlight

 

Mehr Beispiele für schnelles, produktives Entwickeln mit Windows 7 gibt es hier
https://msdn.microsoft.com/de-de/windows/ff944344.aspx

Microsoft Download Center
https://www.microsoft.com/downloads/de-de/

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

Visual Studio 2010 Express Edition
https://www.microsoft.com/germany/express/