Windows Ribbon for WinForms, Part 0 – Table of Contents

First I want to announce that the Windows Ribbon for WinForms library is no longer beta.

Since now the library covers every feature available by the windows ribbon I think it would be useful to provide a table of contents for the posts I've written during the development process. Each post serves as documentation on how to use one or two ribbon features.

Windows Ribbon for WinForms, Part 1 – Introduction: Background on the windows ribbon.
Windows Ribbon for WinForms, Part 2 - Basic Ribbon Wrapper: Basic .NET wrappers for windows ribbon.
Windows Ribbon for WinForms, Part 3 - First WinForms Ribbon Application: How to create an empty WinForms application with ribbon support.
Windows Ribbon for WinForms, Part 4 - Application Menu with Buttons: How to use the ribbon application menu.
Windows Ribbon for WinForms, Part 5 - Application Menu with SplitButton and DropButton: How to use the ribbon application menu with ribbon split button and ribbon drop button controls.
Windows Ribbon for WinForms, Part 6 – Tabs, Groups and HelpButton: How to use ribbon tabs, groups and the ribbon help button control.
Windows Ribbon for WinForms, Part 7 – Spinner: How to use the ribbon spinner control.
Windows Ribbon for WinForms, Part 8 – ComboBox: How to use the ribbon combo box control.
Windows Ribbon for WinForms, Part 9 – Changing Ribbon Colors: How to change the ribbon colors.
Windows Ribbon for WinForms, Part 10 – Working With Images: How to work with images in the ribbon.
Windows Ribbon for WinForms, Part 11 – DropDownGallery, SplitButtonGallery and InRibbonGallery: How to use the ribbon drop down gallery, split button gallery and in ribbon gallery controls.
Windows Ribbon for WinForms, Part 12 – CheckBox and ToggleButton: How to use the ribbon check box and toggle button controls.
Windows Ribbon for WinForms, Part 13 – DropDownColorPicker: How to use the ribbon drop down color picker control.
Windows Ribbon for WinForms, Part 14 – FontControl: How to use the ribbon font control.
Windows Ribbon for WinForms, Part 15 – Use Ribbon as External DLL: How to load ribbon resources from external DLLs.
Windows Ribbon for WinForms, Part 16 – ApplicationModes: How to work with ribbon application modes.
Windows Ribbon for WinForms, Part 17 – ContextualTabs: How to work with ribbon contextual tabs.
Windows Ribbon for WinForms, Part 18 – ContextPopup: How to work with ribbon context popup.
Windows Ribbon for WinForms, Part 19 – RecentItems: How to work with ribbon recent items control.
Windows Ribbon for WinForms, Part 20 – QuickAccessToolbar: How to work with the ribbon quick access toolbar.
Windows Ribbon for WinForms, Part 21 – SizeDefinition: How to define custom size definitions for ribbon group elements.

That's it for now,
Arik Poznanski.

Sela just got upgraded..

Hi all,

I wanted to update you that I've recently began to work as a senior consultant at Sela Group.

I'll be consulting on a wide range of development technologies, from the plain C WIN32 API, thru the Windows 7 COM based API, to the latest .NET improvement.

I'm really excited to work with Sela's professionals and I know I'm going to enjoy every minute of it.

That's it for now,
Arik Poznanski

Windows Ribbon for WinForms, Part 21 – SizeDefinition

After reviewing the MSDN documentation for the Windows Ribbon Framework I’ve discovered there is only one subject I haven't covered in my ribbon posts. This post comes to rectify this issue.

This post is about how to define custom size definitions for ribbon group elements. The post is entirely about ribbon markup, so no changes to the Windows Ribbon for WinForms library.

Nevertheless, I’ve uploaded a new sample “18-SizeDefinition” to the project site. In this sample I create the paragraph group which you can find in WordPad application. What’s special about this group is the custom layout it represents.

What is SizeDefinition?
SizeDefinition is the ribbon markup element which allows us, developers, to control the layout of controls in a group. Every such definition is called layout template.

Every group can scale to the following sizes: Large, Medium, Small and Popup. This allows the ribbon framework to show the UI even when we don’t have a lot of screen space.

Note: Scaling, which has an important impact on how your group will look was already reviewed in Windows Ribbon for WinForm, Part 6 – Tabs, Groups and HelpButton.

Every layout template includes:

• List of controls participating in the group
• A definition of a layout for a given group size.

Predefined Layout Templates
Microsoft has provided predefined common layout template so we can use them on our groups without having to specify the exact layout. Up until now, all the previous samples used them.

Reminder:

The “ThreeButtons” is a name of a predefined layout template that handles the layout for 3 button controls.

Here is a boring list of available predefined templates:

• OneButton
• TwoButtons
• ThreeButtons
• ThreeButtons-OneBigAndTwoSmall
• ThreeButtonsAndOneCheckBox
• FourButtons
• FiveButtons
• FiveOrSixButtons
• SixButtons
• SixButtons-TwoColumns
• SevenButtons
• EightButtons
• EightButtons-LastThreeSmall
• NineButtons
• TenButtons
• ElevenButtons
• OneFontControl
• OneInRibbonGallery
• InRibbonGalleryAndBigButton
• InRibbonGalleryAndButtons-GalleryScalesFirst
• ButtonGroups
• ButtonGroupsAndInputs
• BigButtonsAndSmallButtonsOrInputs

Their exact layout can be found at Customizing a Ribbon Through Size Definitions and Scaling Policies on MSDN.

Defining Custom Layout Templates
Custom layout templates can be defined in two ways: Inline and standalone.

Standalone definition
Standalone means you define the layout once, under a Ribbon.SizeDefinitions element and then use its name in your group definition, exactly like the predefined layout templates. For example:

Defining the named, standalone, custom layout:

Although this looks intimidating, this is actually pretty simple. First, the ControlNameMap element is a definition of placeholders controls used in the layout. In our example we define 9 controls.

Then comes the layout definition. This is done in a GroupSizeDefinition element, where we set as an attribute what is the group scale size we are defining. Remember that different groups sizes will have different layouts. In our example we define a layout only for large size.

Then we use the Row elements to specify that our layout comes in two lines (three lines is the maximum).

In every row we use ControlGroup elements to specify grouping of controls. Controls which are in the same group have no spacing between them.

Using the custom layout is very simple:

Inline definition
Inline means you write the layout definition inside your actual group definition. Here is the same example, only an inline version:

That’s it for now,
Arik Poznanski.

Windows Ribbon for WinForms, Part 20 – QuickAccessToolbar

Windows Ribbon for WinForms library now supports working with the ribbon quick access toolbar.
The result of this post is a yet another sample, “17-QuickAccessToolbar”, found on the project site.

What is Quick Access Toolbar (QAT)?
Quick access toolbar resides on the left of the window title. The user can save there common ribbon commands he wants to easily access. A user can add a ribbon button (or toggle button or checkbox) to the QAT by right clicking it and select “Add to Quick Access Toolbar”.

The application developer can specify a set of “default buttons” (In the above image: new, open and save). This is done using ribbon markup. Also the application developer can add commands dynamically using code.

One more feature of the ribbon is the ability to save and load the list of commands. Using this feature to save and load the settings between application sessions provides the user with a consistent UI experience.

More details can be found at Quick Access Toolbar on MSDN.

Using QuickAccessToolbar – Ribbon Markup
Following is an example of a views section that uses QuickAccessToolbar:

As you can see, the QuickAccessToolbar element defines two command names. The first, identified by the attribute “CommandName”, is the command for the actual quick access toolbar. The second, identified by the attribute “CustomizeCommandName” is the command for the button “More Commands…” which you can see in the image above on the menu. The “More Commands…” button is optional, but if specified, can be used to open an application defined dialog for selecting more commands into the QAT.

Another thing you can see in the markup is the use of QuickAccessToolbar.ApplicationDefaults element which let the developer specify which items will be in the QAT popup menu. Every item can be marked with IsChecked attribute, in which case the item will appear on the QAT.

Using QuickAccessToolbar – Code Behind
Initialization:

Note that the customize QAT button is optional so if you didn’t declare it you should use the other constructor of RibbonQuickAccessToolbar class.

Handling the customize QAT button (“More Commands…”):

The application developer should probably load a dialog that allows the user to select commands and then set them by manipulating the commands list.

Manipulating commands list:

This code is very similar to the code for manipulating the command list of a gallery.

Saving and loading ribbon settings:

You can save the settings in any .NET stream object, usually it should be saved into a file or the registry.

The settings which are saved are: QAT commands list, ribbon QuickAccessToolbarDock property and ribbon Minimized property.

That’s it for now,
Arik Poznanski.

The story of the Ribbon

Here is a video from MIX08 that tells the story of making the ribbon.

http://videos.visitmix.com/MIX08/UX09

It includes a review of the previous versions of office along with the advanced research that was done to create the office 2007 Ribbon UI, including creation of different prototypes for possible office UIs.

I know it’s a little old but the video is really fun and interesting so that would be a shame if someone missed it. The video is 90 minutes long but after the first 5 minutes you can't stop.

That’s it for now,
Arik Poznanski.