Ribbon

for  WPF
  • Complies with Microsoft Office fluent Ribbon UI design guidelines
  • Mimic Office 2007/2010 style UI in your applications in just few minutes
  • Jaw-dropping UI on application menu, QAT, auto-resizeing of ribbon panel, Contextual tabs
  • Advanced Super tooltips and Keytips
  • Full Right-to-left (RTL) support
  • Windows 7 Aero Glass support in title bar
  • Easy Layout scale transformation
  • Numerous MS Office styled custom controls

 

Overview

 

 

BinaryRibbon .NET is a Ribbon .NET control for the WPF framework,  and provides an out-of-the-box capability to add MS Office UI Ribbon style User Interfaces to your WPF .NET applications in very less time.

 

The control complies with all the mandatory requirements set out by Microsoft for developing Office Ribbon styled applications / components.

 

The control comes with several Office 2007 styled controls, including ComboBox, EditBox, Menu, MenuItem, Menu item overflow controls, and many more that you would find handy to use in your WPF applications.

 

 

 

Core features

 

 

 

1. Complies with Microsoft Ribbon fluent UI guidelines

 

The control supports all of the mandatory requirements laid out by Microsoft's Office 2007 fluent Ribbon UI design guidelines

 

 

 

2. Out-of-the-box Office 2007 / 2010 style "Application Window" control

 

The control contains an Office 2007 / 2010 styled modern application Window class that your Window classes can derive from, to render Office 2007 Windows.

 

This is instantly achieved simply by deriving your Window classes from our BinaryRibbon Window class.

 

 

How To Use Ribbon Control?

 

Step-by-step "How To" Guide

3. Support for Application Menu and button

 

The control provides Office 2007 / 2010 style Application menu and Application button controls.

It also provides all of the visual effects that Office 2007 ribbon applications render, viz., the gradient brush effect on the background of the Application button when the mouse enters its bounds, the glass style menu item background rendering, and many more.

4. Custom implementation for enabling Windows + <key> hot keys

 

The control features automatic / built-in support for the {Windows} + <Hot key>(s) global hook, including (but not limited to):

 

Hot keys automatically supported

 

The control has built-in support for the “Windows” hot keys (global) viz.,

 

  • Windows + <Up> [Maximize]
  • Windows + <Down> [Minimize]

 

 

Desktop docking:

 

  • Windows + <Left>
  • Windows + <Right>
  • Windows + Home (Minimize all process windows excluding current window)
  • Windows + <P>: Screen / Projection setup service invocation from the Operating system

 

 

Automatic “attaching” and “detaching” of Global hot keys

 

The implementations automatically detects the window’s active/non-active status accordingly attaches and detaches to the internal global hook with the Operating system, so that when the window is not active, the hooks are not currently in force and hence the user can use it normally with other processes or the window OS itself.

 

 

Advanced docking features with Windows Desktop

 

When performing the Window docking in the desktop, the control will perform advanced calculations to support automatic cycling and docking scenarios, viz.,

 

  • If the window is already docked to the left, a Window + <Left> will move it the right half of the screen
  • If it is already docked to the right side of the desktop, a Window + <Left> will make the window restored to its original size
  • If the window is already docked to the right side of the desktop, a Window + <Right> will move it to the left half of the desktop screen
  • If the window is already docked to the left side of the desktop, a Window + <Right> will resize the window its original size (restore size)

 

 

Multi-monitor support

 

The control has custom implementation for keyboard based multi-monitor window movements & sizing for handling the following keys:

 

  • Windows + Shift + Left
  • Windows + Shift + Right

 

The control will automatically detect available attached monitors, and move the window between them.

 

 

Automatic Cycling while keys are kept pressed

 

If the users keep the hot keys pressed, the control will automatically cycle the window movements for all of the supported Windows + * hot keys

 

 

“Desktop peek” feature supported

 

In addition to the above hot keys, this control also has support for automatically performing Aero “Desktop peek” (Windows + <Spacebar> in Win 7, or Windows + <comma> in Windows 8.0 / 8.1) when the control is used in OS versions Windows 7 and upwards.

5. Supports rendering Backstage view for application menu

 

You could switch to this menu mode by simply setting up your menu content inside the newly introduced control named BinaryRibbonBackstageApplicationMenu which is hosted as the value for the ApplicationMenu property of the BinaryRibbonBarPanel instance.

6. Quick Access Toolbar (QAT) with customization

 

The control contains an Office 2007 / 2010 styled Quick Access Toolbar (QAT) that you can add the most common/frequently used application commands into.

 

As part of the QAT, the control provides the QAT overflow window/menu bar where you can let your users add/re-configure more commands for their quick access.

7. Contextual Tabs

 

The control provides support for adding specific tab items to a collection called "Contextual Tab set", as is seen in Office 2007 applications.

8. Advanced Custom Controls

 

The Ribbon control comes packaged with loads of custom controls (that you can use even outside of our ribbon control, of course).

 

The following screenshot of a sample demo WPF application using our Ribbon control shows off some of our many custom controls, including the SmartTextBox control that supports customisable water-marking of text (when the user has not yet input text into the control),  alert clue flag visual within the control (to indicate some invalid input, etc.), and many more features.

9. Full support for Right-to-Left FlowDirection

 

The control comes with full Right-To-Left FlowDirection support.

 

Here is a screen shot of the control running its blue theme (with its customized MS Office like ScrollBar control as well), and the UI Layout running Right-To-Left FlowDirection.

10. Ribbon supports rendering an image for the tab item header

 

The control supports rendering a small image for the ribbon bar's tab item header.

The image can be up to a size of 16x16.

11. Automatic Ribbon resizing

 

The control supports automatic intelligent resizing of UI elements inside the Ribbonbar, as and when the application window is resized to a smaller size or expanded to a larger size.

 

When resizing the window to a smaller size, the control automatically resizes the controls in such a way that at any point in time a visual clue of what each element is about, is always rendered.

 

Typically, this means that larger buttons with image and text, are resized to a smaller size containing a smaller version of the image, skipping the text in the resizing process.

With regards to group controls, i.e. controls that hosts other controls in them as a group, the controls resizing algorithm resizes the group controls into smaller chunks and pushes the contained controls into an overflow area, which users can work with by clicking on the overflow button arrow.

12. Image Gallery

 

The control provides out-of-the-box gallery controls in order to display galleries of images of varying sizes.

The galleries support up and down scrolling and a full view display as a popup window just like as seen in Office 2007 applications.

13. Office 2007 styled controls included

 

As parts of the Ribbon control, you get out-of-the-box Office 2007 styled common controls which includes Combobox, Textbox, Separator, Supertooltip, Gallery, Dropdown button, Rounded button, Menu, Menuitem, Items overflow host control and Office 2007 styled application Window control.

14. KeyTips support

 

The control fully supports keyboard as well as mouse based access.

As part of the Microsoft's Ribbon UI requirement, the control provides Keytips whereby pressing the Alt/F10 key will display the developer specified key text as the keytip on each of the user accessible UI element in the screen.

 

The control supports two modes of KeyTips display: All keys:

 

  • All keys

You can optionally set a property to let the control display all defined keytips at once when the user presses the Alt or F10 key, so that your users can see all keyboard keytips in one go.

  • Progressive keys (default setting)

With progressive display option, the control displays the keytips on a progressive manner - i.e. the initial press of Alt or F10 key will display the top level keytips, say for the Application menu, QAT, Tab Items and any Contextual Tab sets.

Then once the user presses the relevant key from these top level keytips, the control switches off these top level keys and displays the relevant keytips for elements that are relevant to the previously pressed Keytip key, say for example, the keytips for the elements inside a tab item, if the user had chosen to press the key for the tab item, that was displayed in as the top level keytips.

 

15. KeyTips brushes are configurable: Multi-color keytips

 

By setting simple Attached properties, you will be able to customize the Background and Foreground brushes of the KeyTips on a per element basis.

 

Typically you would only want to keep the same color brush across all keytips, but there may be scenarios where you might want to highlight the keytips belonging to different UI elements differently, say for example, one color for keytips belonging to Tab items, and another color for keytips for elements within that tab item.

16. Other KeyTip features include

 

  • Supports customization the X and Y offsets for positioning the KeyTips
  • KeyTips infrastructure/engine allows setting up the keyTips on any FrameworkElement in your application, apart from being able to setup the KeyTips on our custom Ribbon controls
  • KeyTips rendering engine is now able to automatically remove from display other keytips that are not relevant anymore for hinting, based on the user's typing of key characters

17. Some interesting Ribbon built-in "custom Controls" features include

 

 

RibbonGallery:

 

  • Gallery control supports Header and Footer content properties, and also accepting a DataTemplate for header and footer content.
  • A simple property ScrollAnimationDuration enables customizing the gallery items scrolling animation.
  • The Gallery now supports virtualization: By setting a simple property IsVirtualizing, the control will switch its internal ItemsPanel to use our custom WPF control UI Virtualizing WrapPanel as its ItemsPanel. This feature comes in very handy when one wants to host a very large number of items in the gallery.

 

RibbonComboBox:

 

  • The built-in combobox supports accepting a ContentTemplateSelector, so as to let you define your custom template selection logic for the selected content.
  • The combobox control supports Header and Footer content properties (and the respective DataTemplate properties for both) so you can setup nice header/footer content for the drop-down items window.

18. Pre-defined color schemes and Skins

 

The control comes with 4 different pre-defined color schemes/Skins viz. namely Office 2007 Black, Silver, Blue and the look-alike of the Windows 7 Scenic ribbon UI skin. Just by setting one property on the control, you can switch the skin of the control and hence the entire application window on the fly easily.

19. Easy layout Scale transformation

 

The control supports automatic Ribbon content Resizing (thereby performing the required collapse/expand of groups) when the control is scaled up or down.

 

With this capability, you can perform a transformation on the ribbon control to scale it up, for example, to get a larger UI, without having to worry about the control/groups rendering quality.

 

As you scale up / down the Ribbon, the control adjusts its layout accordingly, and at the same time, renders the UI with the same crispness/clarity as seen in its standard scale.

 

A screen shot of the BinaryRibbon running in Vista (without Aero glass), and the layout's scale transform set at the standard 100%:

A screen shot of BinaryRibbon in Vista (with Aero Glass), its layout scale transform set to 150%: (You can see that the glass is correctly and fully extended to the 150% scaled area too):

A screen shot of BinaryRibbon in Vista (without Aero), its layout scale transform set to 150%:

A screen shot of BinaryRibbon in XP, its layout scale transform set to 100%

A screen shot of BinaryRibbon in XP, its layout scale transform set to 150%

20. Skinnable scroll viewer/ scrollbar available out-of-the-box

 

The control comes with a custom written suite of ScrollViewer and Scrollbar controls. This control instantly replaces the standard .NET WPF ScrollViewer and ScrollBar (Primitive) controls.

 

You can simply skin the scroll viewer control by setting up the desired colors to various elements of the scrollbar in order to skin the scrollbar to match the Ribbon skin you may be running in your application.

 

The control's API exposes the required Scrollviewer specific ComponentResourceKeys (CRKs) of all the relevant resource objects that are used by the scrollview and scrollbars.

21. Several pre-defined Skins available out-of-the-box

 

The control comes with 10 different pre-defined color schemes/Skins that you can choose readily by simply selecting the skin name from the skins enumeration and set it to a property.

 

 

Screen shots of some of the pre-defined themes available out-of-the-box

22. Easy to create custom skins for the Ribbon

 

The control's API exposes the ComponentResourceKeys (CRKs) of all the relevant resource objects that are used by the control, to render the Ribbon.

 

All that is required to create custom skins is to simply create a custom resource dictionary, use the exposed API to set the various brushes/resources, and merge the dictionary into your Application object's Resources.

 

That is all to it! Creating a custom Skin dictionary for the Ribbon control, will not take more than 5 minutes.

 

 

 

 

23. Windows 7 Aero Glass support

 

The control supports rendering its non-client area in Aero Glass.

 

By setting a DependencyProperty named RenderGlassIfOSSupports, the control will render its non-client area with glass, rather than its default Office 2007 non-client area emulation. Of course, the feature will work only in Operating Systems that supports Aero Glass - i.e. Vista and Windows 7, and only when the DWM composition is enabled.

 

The control not only renders the glass for its Titlebar and Border areas, but also the background of its Quick Access Toolbar (QAT). Here is a screenshot of BinaryRibbon control running in its glass enabled mode in Windows 7.

24. Super Tooltips

 

The control provides Office 2007 styled supertooltips to let your application display help tips to your users then-and-there.

25. Ribbon bar in minimized mode

 

As is seen in Office 2007, BinaryRibbon .NET supports minimizing the Ribbonbar so it just shows the tab headers.

 

When in minimized mode, the control collapses the Ribbonbar and displays only the tab header - See Image A.

 

The users can maximize the Ribbonbar by simply clicking on the tab header. When clicking on the tab header the control displays the Ribbonbar so the user can work with it, and at the same time supports a minimal background transparency for a rich and modern user experience - See Image B.

 

The collapsed/minimized Ribbonbar can be expanded or maximized anytime by double-clicking on the tab header, or invoking the command from the QAT.

 

 

Image A: Screen shot of the application window displaying Ribbonbar in minimized mode

Image B: Screenshot of the application window displaying the minimized Ribbonbar momentarily

26. Customization of Quick Access Toolbar (QAT) positioning

 

With just one line of code, you can instruct the BinaryRibbon control to position or locate the Quick Access Toolbar either above or below the Ribbonbar, as need be.

Screen shot of the application window with QAT located above the Ribbon bar

Screen shot of the application window with QAT located below the Ribbon bar

Screen shot of the QAT overflow menu showing the command for minimizing/maximizing the QAT

27. Hosting standard WPF controls in Ribbon control

 

The control can host any standard WPF control (i.e. any FrameworkElement) inside its groups, tab item objects, etc.

 

The hosted child elements need not necessarily be the controls that come with BinaryRibbon control package.

See below, a screen shot of BinaryRibbon control hosting standard WPF .NET controls as well as the special controls that come as part of BinaryRibbon .NET control.

 

28. Bitmap effects on the window non-client area control buttons

 

The control provides built-in Bitmap effects on the Minimize, Maximize and Close non-client area buttons on the title bar.

29. Ability to switch-off displaying the window control buttons

 

The control supports switching off the visibility of the window control buttons - i.e. the Maximize, minimize and Close buttons.

30. Mouse-hover animation on Tab headers

 

The control provides mouse-hover animation effects on the Tab headers by drawing hover outline on the tab border, alongside keeping the currently selected tab header drawn as selected.