Windows Ribbon for WinForms, Part 6 – Tabs, Groups and HelpButton

October 11, 2009

First, your should know that I changed my ribbon library such that Ribbon class is no longer a singleton.
The reason is that I wanted to make an application with two forms, each form has its own ribbon, so needed two ribbon objects.. So this had to change.

Second, in this post I’ll review some more common ribbon features, namely:

  • Tabs
  • Groups
  • Help Button

The result of this post is yet another sample application, named 04-TabGroupHelp. You can find on the project page and it looks like this:


Buttons, Buttons, Buttons
So what are tabs? Just containers for other controls. In this sample will use only buttons. I’ll elaborate on the other control types on future posts.

Every tab can contain several groups, which are just a logical division of the controls in the tab, in this post – buttons..

What is the help button? just another button. For some reason it got its own special place and predefined icon (look on the right side of the image).

Using Tabs and Groups
The commands markup is always the same, just a list of items that attach a mnemonic used by the programmer with an ID used by the ribbon framework. And some string and bitmap resources.

As always the interesting part lies in the views markup:

      <Tab CommandName="cmdTabMain">
        <!– scary part –>
              <Scale Group="cmdGroupFileActions" Size="Large" />
              <Scale Group="cmdGroupExit" Size="Large" />
            <Scale Group="cmdGroupFileActions" Size="Medium" />
        <!– useful part –>
        <Group CommandName="cmdGroupFileActions" SizeDefinition="ThreeButtons">
          <Button CommandName="cmdButtonNew" />
          <Button CommandName="cmdButtonOpen" />
          <Button CommandName="cmdButtonSave" />
        <Group CommandName="cmdGroupExit" SizeDefinition="OneButton">
          <Button CommandName="cmdButtonExit" />
      <Tab CommandName ="cmdTabDrop">
        <Group CommandName="cmdGroupDrop" SizeDefinition="ThreeButtons">
          <Button CommandName="cmdButtonDropA" />
          <Button CommandName="cmdButtonDropB" />
          <Button CommandName="cmdButtonDropC" />

What I’ve defined in this markup is two tabs. The first tab has two groups and the second tab has one group.
I’ve marked to important parts of the markup in the first tab. Unfortunately, due to the ribbon schema definition the scary part must come before the useful part.

The useful part:
just a simple definition of the groups in the tab, and the controls in the group. one interesting thing to note is the SizeDefinition attribute on the Group tag. This is a definition of the layout for the controls in the group. You can define your own layouts or use a predefined list which usually is quite enough. see the full list (with convenient images) at “Customizing a Ribbon Through Size Definitions and Scaling Policies” on MSDN.

The scary part:
In order to understand this part you should know that one of the features of the ribbon framework is the ability to re-layout your ribbon controls according to the amount of space it has. It pretty much handle this automatically but it does requires you to define hints on how you want your layout to scale when the application form gets smaller and smaller. So in the scary part we first define the ideal size of each group. The size can be one of four values: Large, Medium, Small and Popup. Popup means that the whole group was shrunk to a single icon that upon clicking popups the original group.

After defining the ideal size for the group you can define the order of scaling down, meaning which group should scale down first. In this way you can make your application most important controls more visible then less important ones.

The code-behind for acting on these buttons is the same as in the previous posts, just handle Execute function of the correct command ID.

Update (18.11.2009): Just register to the OnExecute event of the correct button.

Using Help Button
To use the help button just add the following to the views markup:

      <HelpButton CommandName="cmdHelp" />

That’s it for now,
Arik Poznanski

kick it on Shout it

Add comment
facebook linkedin twitter email

Leave a Reply


  1. John C.October 15, 2009 ב 20:17

    The Office 2010 ribbon is almost identical to the Win7 ribbon, however the transparency of the title bar extends to behind the ribbon tabs. How can we accomplish this using the Windows 7 ribbon controls?

    Also, how can we change the color of the ribbon?

  2. arikOctober 15, 2009 ב 21:07

    Regarding the transparency, I’m not sure we can, since the Windows 7 Ribbon has its top parts different from the one office uses, at least this is the case in office 2007.

    Regarding the ribbon color, I’ll cover this in a future post, stay tuned.

  3. Dima S.October 15, 2009 ב 22:00

    Hi Arik,

    You accidentally linked to the Ribbon Explorer project… Other than, great stuff, please keep up!

  4. arikOctober 15, 2009 ב 22:16

    Fixed link, thank you for notifying me.

  5. John C.October 16, 2009 ב 22:12

    Thanks for the update.

    Also, since we are using the RibbinMarkup.res file in the Application settings, how do we set the application icon for the executable?

  6. arikOctober 16, 2009 ב 22:34

    I’ll cover this subject also in a future post. The basic idea is not to use RibbonMarkup.res as part of the application, but as part of a resource dll.

  7. AxelApril 8, 2010 ב 11:14

    Hi, first of all very … very nice.
    On implementing a simple ExecuteEvent on the Exit Button the application Crahses, with e.g. this.close().
    Any Ideas?

  8. ShaiketJune 20, 2010 ב 22:54

    I really have to admit, your entire series of posts have been very helpful getting the ribbon up and running for my app. Exactly what I was looking for and very well explained. Thank you!

  9. arikJune 21, 2010 ב 13:59

    Thank you Shaiket,
    I really appreciate it.

  10. 16, 2011 ב 02:16

    Windows ribbon for winforms part 6 tabs groups and helpbutton.. I like it 🙂