본문 바로가기

Development/.Net

Using the Ribbon (.NET)

반응형

   

Articles > .NET

  

Using the Ribbon

  

When to use the ribbon

First of all, you should know when I suggest to use the ribbon. Why? Well, not because is the new thing on office, it should be used on every app.

Take Office Outlook for example. Although it have an improved GUI, it doesn't feature a Ribbon like Word, Excel, PowerPoint and Access. From where I see it, it might be because of two possible things. They just didn't had the time to finish it, or it just doesn't need it.

Microsoft Word, has over one thousand commands that can be applied to the document at certain point. The ribbon is a way to arrange those commands in a more intuitive way and intuitive is the word we should be seeking in graphical interfaces all the time. Outlook just doesn't have that much to do around, and a Ribbon would actually take space from the content view.

In a few words, Ribbon is just not the solution to all application commands. Don't try to put everything on it.

I recommend to check the following list to know if your application should be a nice candidate to feature a Ribbon:

  • Your application have several of commands. At least 50.
  • The commands you will place on the ribbon affect objects on the main viewport.
  • You are planning to place just commands and properties in the Ribbon. Don't try to make all the action on your application takes place on the Ribbon. The ribbon is thick enough to host several commands but too thin to host controls that handle the business of the application.

Meet the architecture

This is the Ribbon as a whole:

Which can be stripped down to the folowing structures:

Type

Appereance

RibbonTab

RibbonPanel

RibbonItemGroup

RibbonButton

   

The layout engine

The layout engine was one of the more complicated things to achieve. Elements on the Ribbon modify their size to fit the available space. This is a complete innovation, compared to what use to happen in the old days with toolbars like the well-known ToolStrip.

The ToolStrip, when drawing items followed just one rule: If there's not enough space for the element skip it, and show an overflow button. This overflow button (the one at the end of the ToolStrip with a tiny arrow) should indicate that there's more than the buttons being currently shown. I used to complain about that, because there was some features that you just forget because of this hiding.

Fair enough, things are different with the Ribbon. Look at the following example: There are some buttons in this Ribbon, but place special attention to those button on the "Tools" panel:

There's enough space for every one. Butons are at the maximum size they can achieve, with big shiny 32 x 32 icons.

Space is getting little. Buttons on the larger panel had to shrink to display a smaller icon (16 x 16), and they all fitted in a single column.

Space is very limited, buttons are not longer showing their text. This way they can be shown yet.

The space is the minimum it can be. The first panel collapsed and now is just a button that pops up the content when clicked. _Read below to learn more about the buttons on the "Mode" panel_

What happens with the first two buttons in this example?

They didn't changed their size because they had the MinSizeMode property setted to Large. Because of this, the engine won't let the buttons decrease their size. In the last screen shot the panel where they reside collapsed because there was not enough space to show the buttons.

That lead us to the size modes.

  • First Picture Shows all of the buttons in Large size mode. This is the maximum size a button can be.
  • In Second Picture, buttons are in Medium size mode. For buttons this size mode gets to show small icons with text on its right side.
  • On the Third Picture, buttons are in Compact size mode. For buttons, this size mode shows only the small icons.

In the Professional Ribbon Project, all elements placed inside the ribbon panels must have the capability to adopt different sizes. This is programmed by hand and has different behavior for different elements: buttons, textboxes, lists, and so on.

You can learn more of this behavior by yourself: Open the Demo project, and resize the window horizontally. You can test this also with the Office applications that have a Ribbon (Word, Excel, PP).

More to come in this article tomorrow...

-- Your firend, J

Edit

  

  

역시 감동이다.

나두 이런거 만들어서 올리고 시프당.

   

소스 : http://www.codeproject.com/KB/toolbars/WinFormsRibbon.aspx

   

<http://www.menendezpoo.com/a.php?h=a490900a59a732>에서 삽입

반응형