Lester's WPF\SL Blog

Simple, Easy & Beautiful

WPF Ribbon Basics

WPF Ribbon Basics

Rate This
  • Comments 15

 

The WPF Ribbon control is easy to use once you get the basics of it.

The structure is simple

<ribbon:Ribbon x:Name="Ribbon" >

    <ribbon:Ribbon.ApplicationMenu>

        <ribbon:RibbonApplicationMenu SmallImageSource="Images\SmallIcon.png" >

            <ribbon:RibbonApplicationMenuItem Header="Open _File" ImageSource="Images\LargeIcon.png"/>

        </ribbon:RibbonApplicationMenu>

    </ribbon:Ribbon.ApplicationMenu>

    <ribbon:RibbonTab Header="Home">

        <ribbon:RibbonGroup Header="Group1">

 

So you have Ribbon, Menu, RibbonTab, and then the Ribbon Group. When you create a new Ribbon application, you get this wireframe ready – so its easy to start.

You got the group – lets populate it. If you look at the Xaml, the Ribbon controls have a SmallImageResource and a LargeImageResource property. This enables the ribbon to use the appropriate image when resizing. Each control can also have rich tooltips by setting the following properties.

   ToolTipDescription="SplitButton having all Tooltip properties Set. Ribbon is awesome!!!"

   ToolTipImageSource="Images\Symantec.ico"

   ToolTipFooterTitle="More Details"

                      

   ToolTipFooterDescription="Press F1 for No Help."

   ToolTipFooterImageSource="Images\Alert 04.ico"

 

Using the above for the SplitButton, we get the following

image

As mentioned earlier, the ribbon picks up the appropriate image sources when resizing. Take a look at the below image and notice how the controls and their associated images shrink when the window is resized. Pretty cool !!

image

You also have the MinimizeRibbon context menu. This is baked in.

image


Next in line is the QuickAccess Toolbar. This is the toolbar that appears in the Window Title bar right at the top. The context menu for the controls shows the option “Add to Quick Access Toolbar”. To have this enabled you need to have a command enabled on the control.

<ribbon:RibbonSplitButton

        SmallImageSource="Images\SmallIcon.png"

        Command="FirstPage"

        Label="Page Home" >

    <ribbon:RibbonMenuItem Header="Next Page"

            ImageSource="{x:Null}"

            QuickAccessToolBarImageSource="Images\Plus.ico"

            Command="NextPage"/>

 

Things to note is the enabled commands. Also, we have a QuickAccessToolBarImageSource on the menuItem. As the name suggests, you could set an additional image for the Quick Access Toolbar. In the image below the image in the Menu for PreviousPage is Green but its Red in the toolbar.

image

You could also move the Toolbar to be below the Ribbon as shown below

image

And then you have the removal options too

image

Finally, you could tweak the ribbon colors

 

<ribbon:Ribbon x:Name="Ribbon"  Background="BlanchedAlmond"  >

    <ribbon:Ribbon.ApplicationMenu>

        <ribbon:RibbonApplicationMenu SmallImageSource="Images\Open.png" Background="Maroon" >

 

image

 

That’s it for now. So lets see some Ribbon apps.

Sample code is attached

Leave a comment about your thoughts\feedback. Also, would love to see any apps that you create using the Ribbon Control.

 

Share this post

 

Attachment: WpfRibbonApplication2.zip
  • control is gud. Template is not very useful. Designer not sync when drop control into xaml

  • Finally! The color combo on the last ribbon is nice

  • agree with sajid.

  • informative post. Keep them coming

  • Hi, Nice article Lester.

    I really like to read your blog, and always follow you.

    Recently I write on the same topic, if you want you can read it from :

    www.abhisheksur.com/.../introducing-ribbon-ui-control-for-wpf.html

    I would love to see ur comments too, if you have time.

    Thanks

    :)

  • Simple and very easy to understand. Thnx 4 sharing

  • This is Windows Client Developer roundup #36. The Windows Client Developer Roundup aggregates information

  • This is Windows Client Developer roundup #36. The Windows Client Developer Roundup aggregates information

  • looks cool...

  • What happened to the round button?

  • What happened to the round button?

  • RickE, the control follows the ribbon design of the Office Ribbon. Given that the Office ribbon has no circular button, the WPF control does the same.

  • Lester, to clarify my question. Why is the application/Office button square instead of round?  This was fixed by applying a style in the CTP, but appears to be gone in this version.

  • bcoz, the Office Ribbon Start Menu button is rectangular, its no longer circular.

  • this is really helpful example for using microsoft ribbon

Page 1 of 1 (15 items)