I'm pleased to announce the July release of the Microsoft Ribbon
for WPF! This is the RTW release of the Ribbon control!
UPDATE OCTOBER 2010: The latest
version of the Ribbon is here.
The new ribbon control is compatible with WPF 3.5sp1 and WPF 4.
This is a 100% WPF implementation, not a wrapper around native
code. That means you get all the great WPF styling capabilities for
the new control. All screenshots below were taken from a .NET 4
Client Profile project.
Let's take a look at just a few of the interesting features.
Ribbon Application Project Template
The Ribbon installer includes a new "WPF Ribbon Application"
project template for Visual Studio.
If you create a new ribbon project and immediately run the
resulting application, you'll see a simple starter ribbon UI:
The xaml for the default ribbon looks like this:
<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>
The window hosting the ribbon derives from the RibbonWindow
class. This class, using native Windows interop code, helps handle
non-client area drawing operations for things like the Quick Access
Toolbar and contextual tab headers. Use of this base window class
is entirely optional, unless you want to take advantage of the
non-client area operations.
The Ribbon control has all the features you'd expect to find:
Quick Access Toolbar, Application Menu, the Auxiliary Pane,
enhanced tooltips, keytips for accelerator keys, automatic resizing
and layout, tabs, contextual tab group headers, a nice Windows 7
look, and more
Contextual Tab Groups
For example, to add a new RibbonTab, and place it in a
Contextual Tab Group (like the table editing tools in MS Word, for
example) you would add this XAML to the ribbon:
<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>
Note the changes to the main window to support the contextual
group header.
Quick Access Toolbar
As you'd expect, the Ribbon supports the Quick Access Toolbar
(the toolbar up in the window title bar)
<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>
The screenshot shows two of the quick access buttons along with
a double chevron indicating more buttons are available.
The WPF Ribbon team has done a great job in getting this control
built and delivered. It supports the advanced scenarios needed to
be a serious ribbon control, and sports a current Windows 7-style
UI. I'm glad to see this finally released and available for
use in our own applications.
PS: And yes, RibbonButton supports ICommand :)
Related Links
