Introducing Microsoft Ribbon for WPF


The official blog of the Windows Presentation Foundation Team

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.

 

  • @Daniel: Firstly, thanks for your feedback. Find my responses are below ...

    1. You have indeed found an issue with the resolution of the System Icon. This in fact is an inherent problem with the way WPF Image element treats icon files. This manifests with the use of a RibbonWindow because in this case it is a WPF Image element that is rendering the System Icon. I have made a post (blogs.msdn.com/.../picking-the-right-resolution-for-ribbonwindow-s-icon.aspx) suggesting a way to workaround this issue.

    2 & 3. Once again thanks your feedback on the visual appearance of the QAT. We have recorded your feedback and will look to mitigate this at the earliest possible. In the meanwhile here's a post (blogs.msdn.com/.../visual-improvements-for-ribbonquickaccesstoolbar.aspx) about a way to workaround these issues, since it is a serious impediment to your app authoring experience.

    4. The image for a RibbonApplicationMenu is simply a menu icon. It is really up to the app author to pick an icon that speaks best of the commands within the menu. The two usages within Win7 (Paint & WordPad) use a document icon possibly because majority of the contained actions operate on a document (Open, Close, Save, Save As). However we being the platform team do not want to be in the business of shipping visual assets such as Images within a control library. We leave it up to an app author to use an appropriate image.

    5. About the Ribbon sample and the blurriness of its images I have taken the opportunity to clarify our intent here (blogs.msdn.com/.../images-in-ribbon-sample.aspx).

    Hope this helps.

    @Joe: Thanks for your interest in WPF Ribbon. Find my responses to your two questions below.

    1) We are certainly committed to the Ribbon Controls Library. This library will not be part of .Net 4.0 SP1 but is in consideration for a future release of the .Net framework. As always these plans are subject to change, but this is our current direction.

    2) As for Silverlight version of this library, we do not have any plans that we can share publicly at this time. Thanks for your request though. It helps us plan ahead.

  • @VarshaMahadevan: The RibbonWindow is not using visual themes at all. The application window’s title bar looks like from Windows 98… or like from console window.

  • I integrated this into our product, and I have a couple comments.  I'm new to WPF (only been developing in it for a month, but I've been reading books on it non-stop!), so some of these items are probably due to my ignorance.

    1)  QAT serialization doesn't appear to be possible from a MVVM ViewModel, so it's ruining my attempt to have no code in the code-behind.  It doesn't bind to an ItemsSource, so I cannot bind it to the VM.  It uses the Items collection instead.  I tried to use an attached property to get around this limitation but couldn't figure out how.

    2) I'm using WPF commanding, and I am launching a form when the use clicks a RibbonMenuItem (which is nested inside a RibbonMenuButton).  The form takes 3 seconds to load.  During these 3 seconds, the RibbonMenuItem collection stays visible.  I'd like to see the RibbonMenuItem collection disappear instantly after the uses clicks one of the RibbonMenuItems.

    3) Right now, I'm under a tight timeline and I won't have time to attach tooltips to all the items in the ribbon.  When the user right clicks on an item and sends it to the QAT, and then hovers over that icon in the QAT, there is no indication of what the icon does.  This is because it only shows the tooltip (and as I said, I have none currently).  I'd like it if the QAT showed the Label/Header of the item if there is no tooltip.

    As I find more quirks, I'll post them.

  • @Matt: Find my answers below

    1) An important thing to note about built-in AddToQAT and RemoveFromQAT functionality is that these are view centric operations. When a user right clicks a control within the Ribbon and adds it to the QAT we clone the element and add the cloned instance to the QAT. Note that this approach was adopted as a common denominator to support MVVM, non-MVVM or semi MVVM apps. Now consider the alternative approach of adding the ViewModel object for a control to the QAT instead. In this case we wouldn’t be able to capture the visualization of the ViewModel object. i.e. We wouldn’t know how it needs to be visualized, as a RibbonButton or RibbonCheckBox or RibbonComboBox. While a pure MVVM app likely supplies DataTemplates for these visualizations of the ViewModel objects, it is not an assumption that we could rely on for the built-in behavior. Hence the current approach. Based on this behavior, one way to do QAT serialization in an MVVM setup is illustrated in the RibbonWindowSample's MVVM part (www.microsoft.com/.../details.aspx). To try this switch the StartupUri property in App.xaml to RibbonWindowMVVM.xaml and launch the app. All of the code for it is in UserControlMVVM.xaml.cs. This approach illustrates how QAT contents are serialized to disc in terms of positional information and then conversely deserialized. Also notice that this code is very ViewModel-ish and quite agonistic of View specifics. Lastly you do not need to be locked into this built-in AddToQAT and RemoveFromQAT behavior. These operations are exposed as Commands. You can add CommandBindings for these commands and override the built-in behavior by adding your ViewModel objects directly to the QAT. I’ll make a post illustrating this approach shortly.

    2) If the action that you invoke upon clicking the MenuItem takes long then I’d recommend that you perform that operation asynchronously. Use Dispatcher.BeginInvoke API to post a work item request to the Dispatcher, and launch the dialog upon processing that workitem. This way the Menu UI is dismissed immediately.

    3) This should be easy to achieve in your app by simply Binding the ToolTipTitle property to Label property of the Control. And you can do this using an implicit Style so it applies to all controls of that type.

    @Window XP User: Yes, you are right. We only support the Aero appearance and the Classic appearance. So for all OSes older than Vista, you will see the Classic appearance. You should be able to re skin only the RibbonWidow element and achieve this behavior.

  • Good to see that it works on XBAP. I am using XBAP.

    Is there an way to remove the toolbar panel? I tried, and even with no QuickToolbar and no title, it still appear the first panel with nothing, from to to down. I think it should have an collapse property.

    This is specially useful when using on XBAP; as you can see on your screenshot.

  • @Tony: Here's a post (blogs.msdn.com/.../ribbon-browser-application-without-the-title-row.aspx) that demonstrates how to hide the title panel for a Ribbon Browser Application. Hope this helps.

  • Can you please give me some guideline how can I use this Ribbon in my existing WPF projects. We are looking for the Rinbbon for the existing application and we just reviewed the Ribbon control from Office Fluent UI Licensing which we can add as a control. But for this Ribbon for WPF, it seem we have to create the project from Ribbon project template. How can I use this with my existing WPF project? Please suggested the way to implement.

    Thanks

  • I wonder what event is fired when I switch one tab to another? Can't find it!

  • Hi,

    How to add >(greater than) character at the end of Xaml content?.

    When I am trying to add >(greater than) character at the end of the content, the symbol is displaying as first character.

    Example :

    MyButtonObj.Content =  "Next" + " >"

    Output:

    > Next

    Please assist me to fix this issue...

  • 1. Is it possible to just have a quick access toolbar without the ribbon?  We want a full ribbon for my main window, and then just quick access toolbars on the dialogs.

    2. RibbonWindow.SizeToContent does not work correctly when set to SizeToContent.WidthAndHeight. I already opened an issue on connect, but it can't hurt to get it more well known. See here for more details:

    connect.microsoft.com/.../ribbonwindow-sizetocontent-does-not-work-correctly

  • @Chatchai: Using the WPF Ribbon project template is not mandatory. It was only provided as a quick way to get started using this Ribbon library. You could just as easily integrate a Ribbon control with an existing application by replacing the Menus and ToolBars with a Ribbon control instead. The one other thing that you may want to do is to change the type of the root Window to a RibbonWindow instead so you get the integration with the non-client area just like the office and Windows 7 Ribbons have it.

    @Sektor: The event that is fired when you switch tabs is the SelectionChanged event. This is the same event you receive when you change selection within a WPF ListBox or DataGrid control. It is defined on the base class System.Windows.Controls.Primitives.Selector.

    @Anand: You should be able to standard XML way of specifying these special characters within XAML. Eg. the following markup snippet works fine.

    <Button>This content ends with a greater than character ></Button>

    @Ashley:

    1. Yes you should be able to use a RibbonQuickAccessToolBar as a standalone control outside the Ribbon. If you want this QAT to show in the non-client region of your dialog, just like it does when hosted as part of the main Ribbon control, then you'd need to host it within a RibbonWindow. RibbonWindow is a subclass of the System.Windows.Window class in WPF allows the app author to author the title bar region in addition to rest of the client region.

    2. Thank you for reporting the issue about RibbonWindow.SizeToContent. We are aware of this issue and will look into mitigating it in a future release of this library.

Page 2 of 2 (26 items) 12