Home   Products   Downloads   Purchase   Support   Blog   Forums
 

BinaryRibbon© .NET for WPF - A MS Office UI fluent Ribbon .NET control for the WPF platform.

 
   
 


BinaryRibbon .NET
is a Ribbon .NET control written using WPF framework in .NET 3.5, 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 fully complies with all the mandatory requirements set out by Microsoft for developing Office Ribbon styled applications / components.

Using the fantastic composition model of WPF, you will be able to add all of the Ribbon enabled User experience that you see in MS Office 2007 products, into your WPF applications very easily, by using our WPF Ribbon control.

The package 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.

Please read through this page to find more detailed tour of the top few (of the many) features that this control provides.

Version 4.2.200 (as part of UIControlSuite .NET Release 9.0) released : View release notes

Try before buying the product! Buy the product! Watch screenscasts of using this product in WPF .NET application!



 
  Product available for purchase as part of our product UIControlSuite .NET package
For more details on pricing, please visit our product pricing page.
What do you get:

  • Highly customisable control - exposes various properties to fully customise various display aspects
  • Comprehensive MSDN style documentation
  • No run-time royalties! All you need to buy - is just one license per developer!
  • Technical support and cost-free version upgrades for the initial twelve (12) months

  •  
      System requirements:

    Minimum requirements:-  Microsoft .NET framework 3.5.
    For visual development, the product requires you have Visual Studio 2008 installed.
    Supported platforms:-   Windows XP Professional, Windows 2003 / 2008, Windows Vista
    Development environments supported:- Visual Studio 2008 and Microsoft Expression Blend 2.

     
     
    Feature highlights:

      Supports all of the mandatory requirements laid out by Microsoft's Office 2007 fluent Ribbon UI design guidelines:

    Microsoft have specified a list of design guidelines that have to be complied with when developing Office Ribbon UI styled components and applications. These requirements comprises a set of UI elements that are mandataorily required to be delivered, and there are some others which are optional.

    Binarymission has taken all care to ensure we deliver fully on all of the mandatory requirements in our product BinaryRibbon .NET. This instantly means that when you are developing your WPF applications using our Ribbon control, you can be rest assured that your application will comply with all the mandatory requirements that you are required to support in your Ribbon UI style enabled applications.

    We will be publishing shortly, a full list of all the Office 2007 Ribbon UI guidelines that our product BinaryRibbon .NET complies with, which would include all of the Mandatory and some of the optional features as well.


     
      Out-of-the-box Office 2007 style "Application Window" control:

    The control contains an Office 2007 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.

    Just by doing that, your window instantly gets all the look-and-feel of the Office 2007 application style windows, with the more modern looking titlebar and window control buttons - i.e. the Minimize, Maximize and Close buttons on the title bar.
    You get all that with no need to write a single line of code.
     
     
    Screenshot of the Office 2007 style application window that the control provides to your applications:




     
      Application Menu and button:

    The control provides Office 2007 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.

    The following screenshots will provide the essential tour of the various UI artefacts and the supported visual states and transitions that the control provides, all built-in, without you ever having to write a single line of code.
     
     
    Screenshot of the Office 2007 style "Application Menu" that the control provides to your applications:




     
     
    Screenshot of the Office 2007 style "Application button" and the visual states that the control provides to your applications:

    Application button default state:



    Application button on MouseOver state:


    Application button state after having invoked the Application Menu:



     
      Quick Access Toolbar (QAT) with customization:

    The control contains an Office 2007 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.
     
     
    Screenshot of Quick Access Toolbar (QAT) control that is available as part of BinaryRibbon control:




    Screenshot of Quick Access Toolbar (QAT) displaying its overflow Menu bar:




     
      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.
    Using BinaryRibbon, it is very easy to prepare any number of Contextual Tab sets, and also being able to specify different colours for each of the Contextual Tab sets.

     
      Screenshot of the Contextual Tab set as provided by the control:



     
      In the screenshot you can see that specific tab items has been added to the Contextual Tab set with the name "Pending/WIP Items", which also encloses the relevant tab items with two bounded lines on the top.

     
      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 customised MS Office like ScrollBar control as well), and the UI's Layout running Right-To-Left FlowDirection.



     
      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 upto a size of 16x16.

     
      Screenshot of the control rendering a small image for each tab item header:



     
      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.

     
      Screenshot of the control before the user resizes the window:




    Screenshot of the control after resizing:




     
      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.

     
      Screenshot of the control when the user invokes the controls from the resized group controls:



     
      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.

     
      Screenshot of the Image gallery




    Screenshot of the gallery when the user is about to click open the popup, to see the full list of images:




    Screenshot of the gallery when the user has clicked open the popup:





    Screenshot of the gallery when the user clicks open the large gallary's popup:




     
      Office 2007 styled controls for ComboBox, Textbox, Button, Seperator are 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.

     
      Screenshot of the BinaryRibbonBar window hosting our BinaryColorPicker (WPF) control (Office 2007 style color picker control):



     
     
    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:
      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.


    • OR

    • 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.
     
      1. Progressive display of keytips:

    Screenshot of the control's window showing the first set of KeyTips when the user hits Alt/F10 key:




    Screenshot showing the second level of KeyTips when the user hits the "H" key (thereby invoking "Home" Tab item):




    Next set of KeyTips when the user hits the key for the desired group, say "GC", to let him execute any command in the Clipboard group:




    Screenshot showing another set of KeyTips applicable for each of the Menu Items in the Application menu:




    Screenshot showing the set of KeyTips when the user hits "V" (Print) key, which takes him into a further level of commands / KeyTips to choose from:




    2. Display All keytips at once:

     
     
    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.

     
      Screenshot of the KeyTips with different brushes for different types of controls:



     
     
    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
     
     
    Some interesting Ribbon built-in "custom Controls" features include:

    BinaryRibbonGallery:
    • 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.
    BinaryRibbonComboBox:
    • 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.

     
      Screenshot of gallery and combobox controls with header and footer:

            

     
      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.

     
      Screenshot of the application window using the pre-defined schemes from the control :




    Screenshot of the BinaryRibbon .NET, rendering our custom created built-in Windows 7 Scenic© skin:




     
      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 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%:



     
      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 desried 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.

    You will 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, to see the skinned scrollbars matching hte Ribbon theme or your own custom ribbon themes. It is that easy!

    A screen shot of the various skinned scrollbars used in the our Ribbon sample applications, is here:



     
      10 new pre-defined Skins straight 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 fom the skins enumeration and set it to a property.

     
      Screenshots of some of the pre-defined themes available out-of-the-box:













     
      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.

     
      Vista/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 (RC):

     
      Screenshot of the application window titlebar area rendered in glass:




     
      Super Tooltips :

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

     
      Screenshot of the application window displaying the Super Tooltip :



     
      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: Screenshot of the application window displaying Ribbonbar in minimized mode




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




     
      Customisation 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.

     
      Screenshot of the application window with QAT located above the Ribbon bar :




    Screenshot of the application window with QAT located below the Ribbon bar :




    Screenshot of the QAT overflow menu showing the command for minimizing/maximizing the QAT:




     
      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 neccessarily be the controls that come with BinaryRibbon control package.

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

     
     

     
      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.

     
     

     
      Ability to (optionally) 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.

     
     

     
      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.

     
      Screenshot of the mouse-hover animation on tab header currently hovered on :



     
     
    Ready to Download or Buy BinaryRibbon .NET license?



     
    About us  |   Customers  |   Help Center  |   Contact us  |   Licensing policy  |   Privacy  |   Copyright
    Copyright © 2003-2010 Binarymission Technologies Limited. All rights reserved.