title: How do I bind a Ribbon control to my ViewModel?
body: <p>I've been struggling since yesterday to build a (what I thought) simple Ribbon on WPF, using MVVM.
  I found quite a few links on the internet (and on Stack Overflow), but none could really solve my problem.</p>
  
  <p>In a nutshell my question is: <strong>Am I doing it wrong, or is it just plain impossible to bind a Ribbon to a ViewModel like I'm doing?</strong></p>
  
  <h2>In Details:</h2>
  
  <p>This is my model for the menu: Each <em>MenuGroup</em> should be rendered as a <em>RibbonGroup</em>, and <em>MenuGroup</em> contains a collection of <em>MenuItem</em> which should be rendered as a <em>RibbonButton</em> (inside their respective <em>RibbonGroup</em> of course).</p>
  
  <pre><code>using Caliburn.Micro;
  
  namespace MyCompany.Poc.Wpf.Models
  {
      public class MenuGroup
      {
          public MenuGroup()
          {
              Items = new BindableCollection&lt;MenuItem&gt;();
          }
  
          public string Name { get; set; }
  
          public IObservableCollection&lt;MenuItem&gt; Items { get; set; }
      }
  }
  
  
  using System.Windows.Input;
  
  namespace MyCompany.Poc.Wpf.Models
  {
      public class MenuItem
      {
          public MenuGroup Group { get; set; }
  
          public string Name { get; set; }
  
          public string Link { get; set; }
  
          public ICommand OpenMenuUrl { get; set; }
      }
  }
  </code></pre>
  
  <p>My ViewModel just contains a collection of those MenuGroup, for the binding on the XAML:</p>
  
  <pre><code>public IObservableCollection&lt;MenuGroup&gt; LegacyMenuItems
  {
      get { return _legacyMenuItems; }
  }
  </code></pre>
  
  <p>The collection is populated (for the time being) as soon as the VM is instanciated, with fake data):</p>
  
  <pre><code>var group1 = new MenuGroup();
  group1.Name = "Group 1";
  var group2 = new MenuGroup();
  group2.Name = "Group 2";
  
  group1.Items.Add(new MenuItem {Group = group1, Link = "http://www.google.co.uk", Name = "Link 1", OpenMenuUrl = OpenMenuUrl});
  group1.Items.Add(new MenuItem {Group = group1, Link = "http://www.google.co.uk", Name = "Link 2", OpenMenuUrl = OpenMenuUrl});
  group2.Items.Add(new MenuItem {Group = group2, Link = "http://www.google.co.uk", Name = "Link 3", OpenMenuUrl = OpenMenuUrl});
  group2.Items.Add(new MenuItem {Group = group2, Link = "http://www.google.co.uk", Name = "Link 4", OpenMenuUrl = OpenMenuUrl});
  
  LegacyMenuItems.Add(group1);
  LegacyMenuItems.Add(group2);
  </code></pre>
  
  <p>Now the XAML:</p>
  
  <pre><code>&lt;my:Ribbon  DockPanel.Dock="Top"&gt;
      &lt;my:RibbonTab Header="Legacy A.I." ItemsSource="{Binding LegacyMenuItems}"&gt;
          &lt;my:RibbonTab.ItemTemplate&gt;
              &lt;DataTemplate&gt;
                  &lt;my:RibbonGroup Header="{Binding Name}" ItemsSource="{Binding Items}"&gt;
                      &lt;my:RibbonGroup.ItemTemplate&gt;
                          &lt;DataTemplate&gt;
                              &lt;my:RibbonButton Label="{Binding Name}" Command="{Binding OpenMenuUrl}" CommandParameter="{Binding Link}"&gt;&lt;/my:RibbonButton&gt;
                          &lt;/DataTemplate&gt;
                      &lt;/my:RibbonGroup.ItemTemplate&gt;
                  &lt;/my:RibbonGroup&gt;
              &lt;/DataTemplate&gt;
          &lt;/my:RibbonTab.ItemTemplate&gt;
      &lt;/my:RibbonTab&gt;
  
      &lt;my:RibbonTab Header="Static"&gt;
          &lt;my:RibbonGroup Name="Administration" Header="Admin"&gt;
              &lt;my:RibbonButton Label="Stuffs" Command="{Binding Path=OpenMenuUrl}" CommandParameter="http://www.mycompany.com/somelink"&gt;&lt;/my:RibbonButton&gt;
              &lt;my:RibbonButton Label="Google" Command="{Binding Path=OpenMenuUrl}" CommandParameter="http://www.google.co.uk"&gt;&lt;/my:RibbonButton&gt;
          &lt;/my:RibbonGroup&gt;
      &lt;/my:RibbonTab&gt;
  
  &lt;/my:Ribbon&gt;
  </code></pre>
  
  <p>And what it renders:
  <img src="https://i.stack.imgur.com/lvJKh.png" alt="Doesn&#39;t look right, does it...">
  <img src="https://i.stack.imgur.com/rcl5Z.png" alt="Statically loaded, works like a charm..."></p>
  
  <p>As you can see, the "Static" tab works well and the "title" for the ribbon group ("Admin") is displayed at the right place.</p>
  
  <p>Now, the "Legacy A.I." tab, <strong>has no buttons</strong> (there should be 2 buttons in each group), and the RibbonGroup titles are displayed funny (<strong>below where they should be</strong>).</p>
  
  <p>If you have any clue on what I'm doing wrong here, please tell me :)
  I'm very new on the WPF world, so I obviously don't understand templating properly...</p>
  
  <p>A few facts to help you make a call:
  - The Model is loaded correctly, since we can see "Group 1" and "Group 2" which are part of the fake data loaded in the ViewModel
  - I tried Telerik's RadRibbon and it behaves exactly the same! So unless they are BOTH wrong at the same place, the problem must comes from me</p>
  
  <p>Good night and good luck :)</p>