title: Designing a Hamburger menu in WPF with Mahapps.Metro
body: <p>Currently, I'm using a <code>Grid</code> of <code>Buttons</code> for housing keys for navigation. It's hideous, but gets the job done.</p>
  
  <p>Here's the XAML chunk:</p>
  
  <pre><code>&lt;Button x:Name="ShowMainMenu" Grid.Column="0" Margin="5" Content="Main Menu"/&gt;
  &lt;Button x:Name="ShowReportsMenu" Grid.Column="2" Margin="5" Content="Reports"/&gt;
  &lt;Button x:Name="Reset" Grid.Column="4" Margin="5" Content="Reset"/&gt;
  &lt;Button x:Name="TryClose" Grid.Column="6" Margin="5" Content="Close"/&gt;
  </code></pre>
  
  <p>Incidentally, I'm using Caliburn.micro, and so naming the buttons is enough to bind them to proper commands.</p>
  
  <p>Now, I want them to put them in a Hamburger Menu.</p>
  
  <p>What I have tried till now is this:</p>
  
  <pre><code>&lt;Controls:HamburgerMenu &gt;
      &lt;Controls:HamburgerMenu.ItemTemplate&gt;
              &lt;DataTemplate DataType="{x:Type Controls:HamburgerMenuGlyphItem}"&gt;
                  &lt;Grid Height="48"&gt;
                      &lt;Grid.ColumnDefinitions&gt;
                          &lt;ColumnDefinition Width="48" /&gt;
                          &lt;ColumnDefinition Width="Auto"/&gt;
                      &lt;/Grid.ColumnDefinitions&gt;
                      &lt;TextBlock Margin="12" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Glyph}" /&gt;
                      &lt;TextBlock Grid.Column="1" VerticalAlignment="Center" FontSize="16" Text="{Binding Label}" /&gt;                            
                  &lt;/Grid&gt;
              &lt;/DataTemplate&gt;                
      &lt;/Controls:HamburgerMenu.ItemTemplate&gt;
      &lt;Controls:HamburgerMenu.ItemsSource&gt;
          &lt;Controls:HamburgerMenuItemCollection&gt;
              &lt;Controls:HamburgerMenuGlyphItem Glyph="1" Label="Main Menu" cal:Message.Attach="[Event Click] = [Action ShowMainMenu]"/&gt;
              &lt;/Controls:HamburgerMenuItemCollection&gt;
      &lt;/Controls:HamburgerMenu.ItemsSource&gt;
  &lt;/Controls:HamburgerMenu&gt;
  </code></pre>
  
  <p>But it doesn't work, because <code>Controls:HamburgerMenuGlyphItem</code> isn't a <code>FrameworkElement</code>.</p>
  
  <p>By the way, the transitioning view is implemented like this:
  </p>
  
  <p>So, how can I translate my bunch of <code>Buttons</code> into a <code>HamburgerMenu</code>? I can't find proper documentation for Caliburn.micro's <code>HamburgerMenu</code> as well.</p>