Search code examples
wpfxamlmahapps.metrohamburger-menu

Menu Items not showing in Mahapps.Metro Hamburger menu


I am trying to add menu items to the hamburger menu provided by Mahapps. The hamburger menu supports ImageItems, IconItems and GlyphItems - the type of item I want to use is IconItems. I have referred to this so post (How to use icon in mahapps hamburger menu XAML) for help but the problem persists. I have also followed this Blog post for help (http://jkarger.de/2017/02/06/mahapps-hamburgermenu/).

Here is my code:

    <controls:HamburgerMenu ItemTemplate="{StaticResource MenuItemTemplate}"
                            OptionsItemTemplate="{StaticResource MenuItemTemplate}"
                            Foreground="White" DisplayMode="CompactInline"
                            ContentTemplate="{StaticResource HamburgerMenuContentTemplate}">
        <controls:HamburgerMenuItemCollection>

            <controls:HamburgerMenuIconItem Icon="{iconPacks:PackIconFontAwesome Kind=AddressBook}" Label="Address" x:Name="Item1" >
                <controls:HamburgerMenuIconItem.Tag>
                    <patient:PatientView/>
                </controls:HamburgerMenuIconItem.Tag>
            </controls:HamburgerMenuIconItem>


        </controls:HamburgerMenuItemCollection>
    </controls:HamburgerMenu>

The Data templates:

    <DataTemplate DataType="{x:Type controls:HamburgerMenuIconItem}" x:Key="MenuItemTemplate" >
        <Grid Height="64">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="64" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>

            <Grid Grid.Column="0">
                <Viewbox ToolTip="{Binding Label}" Width="32" Height="32" >
                    <Viewbox.Child>
                        <ContentControl Content="{Binding Icon}"/>
                    </Viewbox.Child>
                </Viewbox>
            </Grid>

            <TextBlock Grid.Column="1"
                       VerticalAlignment="Center"
                       FontSize="16"
                       Foreground="White"
                       Text="{Binding Label}" />
        </Grid>
    </DataTemplate>



    <DataTemplate DataType="{x:Type controls:HamburgerMenuItem}" x:Key="HamburgerMenuContentTemplate">
        <Grid x:Name="TheContentGrid">
            <Grid.RowDefinitions>
                <RowDefinition Height="48" />
                <RowDefinition />
            </Grid.RowDefinitions>

            <Border Grid.Row="0"
                    Background="#FF444444">
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                    <Image Source="../Resources/Module.ico" Width="25" Height="25" Margin="10,0"/>
                    <TextBlock x:Name="Header"
                               HorizontalAlignment="Center"
                               VerticalAlignment="Center"
                               FontSize="24"
                               Foreground="White"
                               Text="e-Requesting" />
                </StackPanel>
            </Border>

            <ContentControl x:Name="TheContent"
                            Grid.Row="1"
                            Focusable="False"
                            Foreground="{DynamicResource BlackBrush}"
                            Content="{Binding Tag}" />
        </Grid>
    </DataTemplate>

When I run my app I can see the hamburger menu on the left side, it opens and closes when I press the hamburger item but I do not see any items in the menu. I have also tried adding a standard menu item with no icon or image just to see if I can atleast see the label of the menu item - but nothing shows.

Any suggestions would be great.


Solution

  • (based on the comment, this apparently solved the issue)
    I don't see you setting either 'HamburgerMenuItem'-s as content or 'ItemsSource' anywhere, you're just defining templates.