Introducing Microsoft Ribbon for WPF

Introducing Microsoft Ribbon for WPF

Rate This
  • Comments 26

They say that a picture speaks a thousand words. So here are some to whet your appetite. Read next post to get started using the WPF Ribbon. Pete Brown's blog post about the WPF Ribbon makes an interesting read as well.

 

WPF Ribbon Application VS 2010 Project Template


 

WPF Ribbon Application Blend 4 Project Template


 

Simple WPF Ribbon Application UI built using the Project Template


 

 

WPF Ribbon Window Item Template


 

WPF Ribbon elements in the VS Toolbox


 

Edit Ribbon element properties in VS Property Editor

 

 

Office Word like UI using WPF Ribbon


 

Office Word like UI in a WPF Browser Application


 

RibbonApplicationMenu in a WPF Ribbon


 

RibbonQuickAccessToolbar in a WPF Ribbon


 

RibbonContextualTabGroups in a WPF Ribbon


 

RibbonMenuButtons containing RibbonMenuItems


 

RibbonMenuItem containing RibbonGallery and RibbonMenuItems


 

RibbonSplitButton containing RibbonGallery and RibbonMenuItems


 

RibbonComboBox containing a RibbonGallery and previewing changes


 

RibbonGallery with filtering


 

RibbonGallery with hover zoom


 

RibbonGallery with resizing


 

RibbonTabs with scrolling


 

RibbonGroups with scrolling


 

Minimized Ribbon

 

Collapsed Ribbon 

 

Rich RibbonToolTips

 

 

KeyTips

 

 

WPF Ribbon under High Contrast settings

 

 

WPF Ribbon under Right-to-Left settings

 

 

Colorized WPF Ribbon

 

 

WPF Ribbon UI Automation Tree

  

Read next post to get started using the WPF Ribbon.

 

  • Great job guys!

  • Looks nice! It's cool and kinda funny that it requires a separate project template. :)

  • WOW!! I had totally given up on this. Looking very good indeed. Great work. Now we just need the Chart Controls finished...

  • Nice implementation.

    Too bad almost every client I have hates ribbons.  

    With the exception of a few power-users who appreciate not having the extra click to bring down a context menu, most of the rest think ribbons are too much windows "crust", taking precious screen area away from the app "pizza" and make the app feel overly complicated with all those buttons and symbols and options staring you in the face all the time.  

    Yes you can turn them off but then try to explain why you spent $x implementing a feature they didn't want anyway.  

    They usually prefer the minimalist approach with all the knobs, dials and levers hidden away behind menu, rather than the industrial approach where every pipe and wire is exposed like an unfinished garage.

    I'm not ripping on the WPF implementation at all, it looks cool and like it works as advertised and I'm glad that its there for me to use if I ever need it.

    I just doubt that day will ever come.

  • Cross-post from John Bristowe's original post on this control (Microsoft Ribbon for WPF RTW! blogs.msdn.com/.../microsoft-ribbon-for-wpf-rtw.aspx):

    Looks pretty feature incomplete in my opinion. Styling isn't in line with what you see in MS Office. Not sure if you can integrate it right into the window itself?? Even beyond that, the lack of a different shade on the grouped icon sets (Group 1, Clipboard, Font etc. in the samples above) make it look unfinished.

    I've been using the XamRibbon from Infragistics (www.infragistics.com/.../xamRibbon.aspx) It has some of its own quirks... but it's a LOT closer to what users want OOTB from the office look and feel than this control. If you want to spend the client's money having a developer spend time trying to re-model this to look the way the ribbon does in Office, it's cheaper to simply buy the control suite of from a vendor other than Microsoft, in my opinion.

    This control is underwhelming.

  • I've installed the Ribbon for WPF Source and Samples, but that nice installer doesn't actually tell me where its put them! Where are they?

  • Whyyyy so so laaaaaate! I've been waiting for this for one year, but on the other side, you are awesome guys! I want a ribbon in each one of my apps (that need a ribbon) :)

  • Beautiful!

  • @Everyone: Thanks for your interest in the WPF Ribbon. We look forward to your feedback.

    @MCS: You are right that there a number of consumptive apps out there that are content centric and are minimalist in terms of commands or ways in which you can interact with the content. Eg. Media apps, Photo Viewer, etc. I agree that Ribbon isn't really the right experience for them. On the other hand there are a genre of apps, Eg. Microsoft Office apps, Autocad, Photo editors, that are heavily centered around commands. And not just that, many of these commands are global in scope. ContextMenus are not the right way of providing global operations because then they become overloaded and cumbersome to the end user. Traditional menus and toolbars serve the purpose but aren't discoverable enough. I do believe that Ribbon is the right metaphor for apps with such requirements. These are my two cents.

    @Andrew: The Ribbon binaries as well as the sources are installed under %ProgramFiles(x86)%\Microsoft Ribbon for WPF. Thanks for reporting this. We have noted your feedback.

  • @JH: Thanks for your feedback. The current release of the Ribbon library emulates the Windows 7 appearance, similar to what you see in Paint and Word Pad applications. This has been priority because WPF is part of the .Net platform that ships with Windows OS, and it is our premiere goal to enable developers to emulate built-in Windows applications. As for the sample we shipped, I understand that the poor quality of the images in it may be misleading. But be assured that it is the low grade images and not the underlying rendering that is at fault. To further allay your worries, I would like to point you to WebMatrix, a web development tool from Microsoft (www.microsoft.com/.../download) that has been built using this same Ribbon library. All that said your feedback about the missing Office 2010 appearance is well taken. It is certainly one of the top candidates amongst the forthcoming work for the WPF Ribbon. Thanks again for reporting this. Ah and about the Groups and highlighting, I am not sure I understand you right. Office 2010 does not highlight Group headers such as 'Clipboard', 'Font' either, if that is what you meant. What am I missing? Could you please clarify? A screenshot with a pointer, would be great.

  • Unfortunately the control is not usable in Windows XP...

  • Great job, folks.

    I have not delved into WPF application much due to lack of built-in support for Ribbon control.

    Now, it's time to be serious/have fun with WPF~

  • @Windows XP User: Could you please elaborate? What isn't working on Windows XP? Do you have .Net 3.5 SP1 on your XP box? Please note that that is a prerequisite for this library.

  • Having played with this today, I am thus far distinctly underwhelmed:

    1. The system menu application icon doesn't pick the appropriate sized image from a .ico resource. Thus, for example, rather than using the correct 16x16 image, it will down-scale a larger one, resulting in a fuzzy application icon. This can be seen in the screenshots above. You can instead specify, say, a 16x16 pixel PNG image for the window icon -- but then this is used (upscaled and thus terribly pixelated) for the icon in the task bar on Windows 7. And so you can't win -- you can choose between a fuzzy application icon in the title bar, or a pixelated image in the task bar.

    2. The QAT images are drawn too low in the window title bar, relative to the window title and the system menu application icon.

    3. If the QAT is empty, you get an amazingly ugly pair of vertical bars in the window title bar, between the system menu application icon and the window title. Why are these shown at all when the QAT is empty?

    4. Having to specify an application-specific image for the File/Application menu deviates from the native Windows 7 ribbon look and feel. What is one supposed to put there? The application icon? If so, then you have two instances of the application icon right next to each other (the other one being the system menu icon). A document icon? But then that is not relevant to non-document items in the File/Application menu. Something like the standard image used by the native Windows 7 ribbon? In which case, why not make that the default?

    5. The sample application is a complete mess. See, for example, the ‘RibbonApplicationMenu in a WPF Ribbon’ screenshot above, where there are upscaled icons, an empty (and ugly) QAT bar, and a fuzzy application icon in the window title bar. This is intended to be a showcase and example that developers can follow for their own applications? Really?

    Perhaps there are ways of solving some of these problems? If not, how are we supposed to ship production-quality polished applications with this?

    Any guidance would be appreciated, particularly with respect to 1-3, which are currently looking like show-stoppers for our use of this control.

    My thanks in advance for any assistance you can provide.

  • We are starting on WPF and Silverlight versions of our SpreadsheetGear control and trying to decide whether to use our existing Windows Forms MDI Workbook Designer for now or build a WPF (and perhaps Silverlight as well) Workbook Designer using the Ribbon. I will appreciate any answers you can provide to these questions:

    1) Our main concern regarding this WPF Ribbon is the level of commitment from Microsoft to continue supporting it. Can you address this issue? Does Microsoft intend to roll this ribbon into the .NET Framework Client Profile in the future? If so, can you comment on when that might / will happen - any chance it would be as soon as .NET 4.0 SP1?

    2) Are there any plans for Microsoft to build a compatible (or as compatible as possible) Silverlight Ribbon?

Page 1 of 2 (26 items) 12