Using Ribbon as tab control

Question

I would like to create application with ribbon interface that looks and behaves like this:

• application have one main form with ribbon
• ribbon has multiple tabs
• when user switches tab on ribbon, panel below ribbon changes and displays content related to ribbon panel. That way, ribbon tab acts as if it is tab over whole window.

For example, ribbon have two tabs: people and tasks. When current ribbon panel is "people", below ribbon is displayed grid with people data. Ribbon contains command for manipulating people data. When user switches to "tasks" tab on ribbon, application should display form with tasks below ribbon.

Question is can ribbon be used in this scenario?

I read "OFFICE FLUENT™ USER INTERFACE DESIGN GUIDELINES" that describe what you can and cannot do with ribbon, but I could not find anything about this.

Answer 1

What you are suggesting is contrary to Microsoft's guidelines. You may be in breach of their guidelines.

The ribbon is supposed to be used with document-centric applications where there's one document and you have commands in the ribbon for manipulating it. The tabs on the ribbon are intended only for navigating the ribbon... not for navigating your application.

(Having said that... I know of some applications that use the ribbon in the way you describe... and it seems to work very well!)

I ran into similar head-aches when implementing our app to use a ribbon. For the next version, we're going back to a context sensitive toolbar :)

Answer 2

If your commands per tab are few (less than 20), then maybe you should use a conventional tab control with buttons for the commands along the top or elsewhere in the tab sheet. This would also give you the option of having buttons that apply to the whole app (e.g., Exit, Preferences) outside the tab control, which will help make their scope clear to the user (something you can’t do with the Ribbon).

If your users’ work includes comparing information between “tabs,” then don’t use tabs at all, but instead use separate primary windows (e.g., one for People and one for Tasks). Each can then have their own distinct conventional menubar and toolbar, and the users can put the windows side by side on their screens to do their work, instead of switching back and forth with a tab control.

Answer 3

TLDR: I think it fits to your application concept, but there has to be a clear distinction between the people and tasks functions to make it work!

Though Scott has a point that it might be somewhat in contrast to what Microsoft intended to use the Ribbon for, it think the Ribbon also fits to this kind of use. Since if you wanted to have a conventional tab like Michael suggests you would need buttons to switch between the windows or tasks. By using the Ribbon you directly link the controlling functions/buttons with the task' tab, making it easier to learn what buttons are linked to what task. Buttons that are used for the whole app can be integrated into the Office button (the large Office logo in the top left corner), which is actually exactly what Microsoft does.

We are currently implementing a Ribbon-like toolbar as well, so probably I'm not entirely objective. However I tend to think the Ribbon works quite simple and enables users to easily discover buttons. One side-note: this could also be achieved by using large logo's and dropdown gallery's, it's just easy that most Ribbon packages available have these things implemented, so no need to code it yourself (unless you can very easily)!

Answer 4

Just fyi, I have played with devexpress's xtrabar suite a little bit and have implemented this tab control behavior using the tag property. I create a panel control for each ribbon page then do something like the following:

InitPanels

RibPage1.tag = Panel1
RibPage2.tag = Panel2

' Set Display Properties
'Panel1 displays initially

With Panel1
   .Dock = Fill
   .Show()
End With

With Panel2
   .Dock = Fill
   .Hide()
End With

Ribbon.SelectedPage = RibPage1

Ribbon On Selected Page Changing

P as Panel = ctype(sender.tag, Panel)
p.hide()

Ribbon On Selected Page Changed

P as Panel = ctype(sender.tag, Panel)
p.Show()

I am a newbie at programming so there is probably some better way of doing this, but this seems to work for me. Probably also depends of the Ribbon vendor.

Hope this helps.

Josh

Answer 5

Use the OnTabChange event to bring the appropriate panel to the front view:

procedure TForm1.Ribbon1TabChange(Sender: TObject; const NewIndex,
  OldIndex: Integer; var AllowChange: Boolean);
begin
  case NewIndex of
    0: Panel0.BringToFront;

    1: Panel1.BringToFront;

    2: Panel2.BringToFront;

    3: Panel3.BringToFront;

  end;
end;

Answer 6

I found Southridge Hands-on-Lab on Codeplex. In lab 3 there is ribbon control example that is used similarly as I intended to do.

Southridge labs are done by Microsoft, so, I presume, I can do same as this example.

Answer 7

The new version of wpf ribbon odes not have the same restrictions as the previous versions.