While the new shiny web development features of the latest version of .NET are attractive, it’s also important to keep track of improvements in other areas - like WPF. After all, not all development is web based - not even all of the greenfield projects. Some of it is based on rich clients, such as those you’d write in WPF or Windows Forms.
One of these areas of improvement is in the area of WPF controls - did you know that .NET now includes a capable Ribbon control? Once the province of third party control vendors, there’s now a native .NET ribbon that comes out of the box. I’ve used this on a couple of personal projects and found there to be a regrettably low level of documentation.
Aside - at work, I’ve made regular use of the excellent Developer Express WPF Ribbon Control so my experience with the native ribbon control is somewhat limited - but here’s how to get up and running. (If you’ve used the control before and you’re familiar with the basics, you might want to skip to the tips listed at the end of this blog to see if there’s anything you haven’t seen before.)
To begin, add a reference to the assembly
With this reference, you don’t need to add any special namespaces to your XAML; the new ribbon controls are automatically in scope. For the main window of your application, switching to a
<RibbonWindow> results in a cleaner integration:
Remember that you’ll need to change the ancestor in the C# declaration as well:
To create the ribbon itself, add a
<Ribbon> element. I typically nest this within a regular
<Grid> to control the layout in a fairly typically WPF manner:
The most recognisable feature of the ribbon is the set of tabs, groups and buttons that provide easy access to application functionality. The
<Ribbon> control makes this very easy to set up, with a set of available elements such as
<RibbonButton> that are relatively easy to configure.
For example, here’s a simple ribbon, following by the markup required to create it:
Tip: Always supply a small icon
The default size of the button is controlled by which images you supply - if you supply a large image, you get a large button; if you supply a small image (and no large image), you get a small button.
One of the fundamental behaviours of the ribbon is the way it adapts to the window size, meaning that even your large buttons should have small icon, to allow for when the window is reduced in width.
The small icon is also used if/when the button is pinned to the quick access toolbar.
Tip: Aligning labels
If you use the
Label property on the
RibbonTextBox, it will automatically show a caption next to the textbox. Very useful and convenient, but if you have more than one you’ll notice the text fields do not align unless your labels are coincidentally the same length.
You can get the labels and fields to align cleanly - as shown here:
To achieve this, the simplest method I’ve found is to use a nested grid:
Tip: Related Buttons
To display a group of closely related buttons - such as in the Clipboard group here:
Wrap the buttons themselves in a
<RibbonControlGroup> like this:
Tip: Radio Buttons
If you have a set of mutually exclusive options, such as in the Format group shown above, you can set these up using
<RibbonRadioButton> and nesting within a
The .Net framework now contains a capable Ribbon control for WPF, allowing clients to be built in this style right out of the box without any third party dependencies.
(All icons shown in screenshots are from SyncFusion MetroStudio.)