title: WPF data binding of a Ribbon control
body: <p>I have a working dynamic menu which is data bound to a hierarchical collection of items which are controlled by application dynamically. For reference below is WPF declaration:</p>
  
  <pre><code>        &lt;Menu Grid.Row="1" Grid.ColumnSpan="2" ItemsSource="{Binding Actions}" Style="{StaticResource ResourceKey=dynamicMenu}"&gt;
         &lt;Menu.Resources&gt;
              &lt;HierarchicalDataTemplate DataType="{x:Type wm:AppAction}" ItemsSource="{Binding Path=Items}"&gt;
                  &lt;HierarchicalDataTemplate.ItemContainerStyle&gt;
                      &lt;Style TargetType="MenuItem"&gt;
                          &lt;Setter Property="IsCheckable" Value="{Binding IsCheckable}" /&gt;
                          &lt;Setter Property="IsChecked" Value="{Binding IsChecked}" /&gt;
                          &lt;Setter Property="Visibility" Value="{Binding Path=IsVisible, Converter={wc:BoolToCollapsedConverter}}"/&gt;
                          &lt;Setter Property="Command" Value="{Binding Command}" /&gt;
                          &lt;Setter Property="Icon" Value="{Binding Image}" /&gt;
                          &lt;Style.Triggers&gt;
                              &lt;DataTrigger Binding="{Binding Text}" Value=""&gt;
                                  &lt;Setter Property="Template"&gt;
                                      &lt;Setter.Value&gt;
                                          &lt;ControlTemplate TargetType="{x:Type MenuItem}"&gt;
                                              &lt;Separator HorizontalAlignment="Stretch" IsEnabled="False"/&gt;
                                          &lt;/ControlTemplate&gt;
                                      &lt;/Setter.Value&gt;
                                  &lt;/Setter&gt;
                              &lt;/DataTrigger&gt;
                          &lt;/Style.Triggers&gt;
                      &lt;/Style&gt;
                  &lt;/HierarchicalDataTemplate.ItemContainerStyle&gt;
                  &lt;StackPanel Orientation="Horizontal"&gt;
                      &lt;Image Source="{Binding ImageSource}" /&gt;
                      &lt;TextBlock Text="{Binding Text}" /&gt;
                  &lt;/StackPanel&gt;
              &lt;/HierarchicalDataTemplate&gt;
          &lt;/Menu.Resources&gt;
      &lt;/Menu&gt;
  </code></pre>
  
  <p>Now I would like to render this underlying menu structure using a Microsoft Ribbon control, initially structuring it using RibbonTab and RibbonGroup for level 0 and RibbonButton for level 1 (single group on each tab).</p>
  
  <p>Unfortunately for some reason it does not show anything. Here is the declaration of what I've come with so far:</p>
  
  <pre><code>        &lt;r:Ribbon Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" x:Name="ribbon" Title="WPF Prototype App" ItemsSource="{Binding Actions}"&gt;
          &lt;r:Ribbon.Resources&gt;
              &lt;DataTemplate DataType="{x:Type wm:AppAction}"&gt;
                  &lt;r:RibbonTab Header="{Binding Text}"&gt;
                      &lt;r:RibbonGroup Header="{Binding Text}" ItemsSource="{Binding Actions}" Width="333"&gt;
                          &lt;r:RibbonGroup.Resources&gt;
                              &lt;DataTemplate DataType="{x:Type wm:AppAction}"&gt;
                                  &lt;r:RibbonButton Label="{Binding Text}" LargeImageSource="{Binding ImageSource}"/&gt;
                              &lt;/DataTemplate&gt;
                          &lt;/r:RibbonGroup.Resources&gt;
                      &lt;/r:RibbonGroup&gt;
                  &lt;/r:RibbonTab&gt;
              &lt;/DataTemplate&gt;
          &lt;/r:Ribbon.Resources&gt;
      &lt;/r:Ribbon&gt;
  </code></pre>
  
  <p>I have a feeling this might be something simple to solve.
  I tried using HierarchicalDataTemplate but there were errors about style for RibbonTab being applied to RibbonGroup.</p>
  
  <p>Another related question would be: if AppAction object had a ribbon control style discriminator property (i.e. ControlStyle [Tab, Group, Button, CheckBox, ComboBox]), how easy would be to dynamically create appropriate control depending on the value of this property or is it even possible ? Or is it better for complex scenarios to just define parts of a ribbon in subsequent Views responsible for these tasks and just attach them when View is visible ?</p>
  
  <p>Edit: Below are the contents of a simplified version of AppAction class:</p>
  
  <pre><code>    [ContentProperty("Items")]
  public class AppAction: PropertyChangedBase
  {
      public AppActionCollection Items { get; set; }
  
      ICommand command;
      public ICommand Command
      {
          get { return command; }
          set { CheckSet(ref command, value); }
      }
  
      string text;
      public string Text
      {
          get { return text; }
          set { CheckSet(ref text, value); }
      }
  
      Uri imageSource;
      public Uri ImageSource
      {
          get { return imageSource; }
          set { image = null; CheckSet(ref imageSource, value); NotifyOfPropertyChange(() =&gt; Image); }
      }
  
      public AppAction()
      {
          Items = new AppActionCollection();
      }
  }
  </code></pre>
  
  <p>AppActionCollection simplified:</p>
  
  <pre><code>public class AppActionCollection: ObservableCollection&lt;AppAction&gt;
  {
  }
  </code></pre>
  
  <p>An example menu tree can be created by:</p>
  
  <pre><code>public class TestMenu
  {
      AppActionCollection menu = new AppActionCollection();
  
      public TestMenu()
      {
          var m = new AppAction { Text = "File" };
          m.Items.Add(new AppAction { Text = "Open" });
          m.Items.Add(new AppAction { Text = "Save" });
          m.Items.Add(new AppAction { Text = "" });
          m.Items.Add(new AppAction { Text = "Exit", Command = ApplicationCommands.Close });
          menu.Add(m);
  
          m = new AppAction { Text = "Edit" };
          m.Items.Add(new AppAction { Text = "Copy" });
          m.Items.Add(new AppAction { Text = "Paste" });
          m.Items.Add(new AppAction { Text = "Cut" });
          m.Items.Add(new AppAction { Text = "Smile", Command = ApplicationCommands.Close });
          menu.Add(m);
      }
  }
  </code></pre>