Ribbon commands and MVVM

Feb 8, 2010 at 10:51 AM

Do you have any plans to provide a sample of how to bind commands using MVVM? One o the things that the other Ribbon controls out there lack is the support for MVVM forcing us to come up with alternative mappings, etc. It would be great if you can build support for it into the control natively.

Coordinator
Feb 8, 2010 at 11:27 AM

Sure. We are working under samples now. Among the samples will be MVVM sample (and maybe template for Visual Studio).
Thank you for your feedback.

Coordinator
Feb 17, 2010 at 11:52 AM

Please, check the latest release. It includes samples (including MVVM sample).
If you have any suggestions or complains, feel free to write here.

Have fun.
Daniel

Feb 20, 2010 at 4:57 AM
Edited Feb 20, 2010 at 5:28 AM

Thanks. I took a look at the code and I did not see MVVM used anywhere. I did try however a sample I had where I included the Ribbon control. I bound an ICommand to the different controls in the Ribbon. It seemed to work fine so the Ribbon does support MVVM. That's great!

One thing I found though is that the QuickAccessMenuItem throws an exception in the method public static UIElement GetQuickAccessItem(UIElement element) after executing the command.

Coordinator
Feb 20, 2010 at 5:22 AM

It would be very helpful, thank you.

Feb 20, 2010 at 5:36 AM

Here's the sample I use:

<r:Ribbon.QuickAccessItems>
    <r:QuickAccessMenuItem Text="{l:LocalizedResource UndoCommandLabel}" Size="Small" Icon="Resources\undo.png" Command="{Binding UndoCommand}"/>
    <r:QuickAccessMenuItem Text="{l:LocalizedResource RedoCommandLabel}" Size="Small" Icon="Resources\redo.png" />
</r:Ribbon.QuickAccessItems>

And here's another example:

<r:Ribbon.ToolBarItems>
    <r:Button Text="{l:LocalizedResource HelpCommandLabel}" Size="Small" Icon="Resources\help.png" Command="{Binding HelpCommand}"/>
</r:Ribbon.ToolBarItems>

The breakup of my code is ViewModel that hosts the commands, View that defines the layout as a UserControl and the MainWindow where the Ribbon is defined and where all the mapping, as shown above, is done. So, the commands are sitting in the ViewModel class and the Ribbon does relay them correctly. Good job.

Coordinator
Feb 20, 2010 at 6:02 AM

> One thing I found though is that the QuickAccessMenuItem throws an exception
We have lack of documentation.

Quick Access Toolbar is toolbar with shortcuted controls. You can add any Fluent-based control (it has to implement IQuickAccessToolbarItem interface) using context menu. You can also pin controls to Quick Access Toolbar menu. You can add pinned Quick Access Items named QuickAccessMenuItem to collection Ribbon.QuickAccessItems. To associate target element you may bind it to QuickAccessMenuItem.Target property or just set the content:

<!--Quick Access Toolbar Items-->
<Fluent:Ribbon.QuickAccessItems>
     <!--Use Content or Target Property to set QAT item-->            
     <Fluent:QuickAccessMenuItem IsChecked="true">                
       <Fluent:Button Text="Pink" Icon="Images\Pink.png" />  
   </Fluent:QuickAccessMenuItem>
   <!--You Can Just Bind with Any Control-->
   <Fluent:QuickAccessMenuItem Target="{Binding ElementName=buttonGreen}"/>
</Fluent:Ribbon.QuickAccessItems>

So in your case you have to write something like this:

<r:Ribbon.QuickAccessItems>
    <r:QuickAccessMenuItem IsChecked="True">
         <r:Button Text="{l:LocalizedResource UndoCommandLabel}" Icon="Resources\undo.png" Command="{Binding UndoCommand}"/>
    </r:QuickAccessMenuItem>
    <r:QuickAccessMenuItem IsChecked="True">
          <r:Button Text="{l:LocalizedResource RedoCommandLabel}" Icon="Resources\redo.png" />
     </r:QuickAccessMenuItem>
</r:Ribbon.QuickAccessItems>
Is it helpful?
Feb 20, 2010 at 11:44 AM

Thanks. I made the change and this is what I observed.

  • The menu now allowes me to check/uncheck the option and does not throw an exception. However, the order of the buttons in the Quick Access toolbar is not respecting the order of the menu items. For example, the Undo button should always be before the Redo button. But if I uncheck it and recheck it again the Undo button appears after the Redo. I believe the order should be respected.
  • The Command no longer gets routed to the ViewModel. So, for some reason, when I press on the Undo button I don't receive the message in my ViewModel.
Coordinator
Feb 20, 2010 at 12:36 PM

1) "Undo button should always be before the Redo button", this is exactly as I thought formerly. In reality, QAT is not respecting the order of the menu items, it just add an item to the end of row. You may see that behavior in Scenic ribbons, Office 2007 and Office 2010. The big lack now, we haven't QAT manager yet, so there is no ability to save QAT controls. This is extremely important and I think it will be available in 1.1 version. Now we are investigating how to store added QAT items.

2) Target control seems to be out of logical tree, so bingings don't work. I added issue #16452 (http://fluent.codeplex.com/WorkItem/View.aspx?WorkItemId=16452)

Thank you, lvildosola. This is important feedback for us to make Fluent Ribbon Control Suite more stable and comfortable to work.