Introducing the WPF Simplified Ribbon Control (Video)

Microsoft recently started streamlining and simplifying their Ribbon in Office 365. The Ribbon has long been an integral part of Microsoft Office, but over the years, it’s grown from a simple toolbar-like control to something much more complex, supporting a lot of functionality in a complicated design. Modern design patterns, though, expose a desire to move UIs back to simplicity, and this necessitates a re-examination of the Ribbon control.

For this release, we’re introducing a Simplified Ribbon control for WPF along the lines of Microsoft’s design. The control fits between the traditional Toolbar and Ribbon controls.

Introducing the WPF Simplified Ribbon Control - Video Tutorial

Why move to the Simplified Ribbon?

The Simplified Ribbon distinguishes itself from the typical Ribbon and Toolbar controls in that it supports both a full three-line grouped view and a minimized single-line view. Collapsing or expanding the control allows you to toggle between these states, and the control will automatically compact your options into the single-line view. This allows you to keep the main features of the ribbon available while providing an increase to the amount of vertical space for the rest of your application.

Microsoft provides their own WPF ribbon control, but it's large, complicated, and not always straightforward to customize. The Simplified Ribbon is an alternative to that control, with a much simpler API and straightforward customization options.

What’s new in WPF Simplified Ribbon

Our implementation of the Simplified Ribbon is an extension of the Toolbar control for WPF, and is targeted at updating the header styles, animation, and the new collapsed single line view. A few new elements include a customizable selection marquee with built-in transition animations:

The Simplified Ribbon also has a flatter appearance that's more in line with current design trends.

Since the Simplified Ribbon is an extension of the Toolbar control, it comes with a similar API. The control consists of:

• SimplifiedTabGroup, which holds the marquee and toggling the collapse state

• SimplifiedTabItem elements, the Header items that are topmost and selected with the marquee

• SimplifiedRibbonGroup elements, which are the children of each tab

Inside these groups you can use any of the existing Toolbar such as Buttons, Dropdowns, SplitButtons, etc.

Control implementation is similar to the Toolbar. Inside the control, add SimplifiedTabItems with Simplified Ribbon Groups within:

<c1:C1SimplifiedRibbon MarqueeBrush="DarkOrange" FontSize="14">
    <c1:C1SimplifiedTabItem Header="Home">
        <c1:C1SimplifiedRibbonGroup Header="Edit">
…

Each group contains a series of controls within it. For each item, you can specify a small and large image source that displays depending on the state of the control (either collapsed or expanded). You can also optionally set the LabelTitle, which displays in both modes by default.

<c1:C1SimplifiedRibbonGroup.GroupSizeDefinitions>
        <c1:C1ToolbarGroupSizeDefinition>
            <c1:C1ToolbarControlSize>Large</c1:C1ToolbarControlSize>
        </c1:C1ToolbarGroupSizeDefinition>
    </c1:C1SimplifiedRibbonGroup.GroupSizeDefinitions>
    <c1:C1ToolbarButton LabelTitle="Paste" LargeImageSource="paste32.png" SmallImageSource="paste16.png"/>
    <c1:C1ToolbarButton LabelTitle="Copy" LargeImageSource="copy32.png" SmallImageSource="copy16.png"/>
    <c1:C1ToolbarButton LabelTitle="Cut" LargeImageSource="cut32.png" SmallImageSource="cut16.png"/>
</c1:C1SimplifiedRibbonGroup>

The control also supports C1Themes out of the box, and readily changes appearance to match these themes. Since the API is similar to the Toolbar, it’s also relatively easy to transition existing apps using the Toolbar to use the Simplified Ribbon instead. A few samples have also been already been converted to use the control:

Future Updates to the WPF Simplified Ribbon

We’re already planning some additions to the WPF Simplified Ribbon for the next release. We’ve recently introduced the C1Icon object to FlexGrid as a mechanism for easily creating icons using images, fonts, or vector data to produce icons, and we plan to introduce this object into the Simplified Ribbon to make it even more configurable. We’re also planning to move the Simplified Ribbon into the RichTextBox control with corresponding updates to modernize the appearance.

If you’re curious about trying the new Simplified Ribbon control, be sure to check out the updated AdventureViewer and the SchedulerTableViews samples.