Weird overlay issue when hamburgermenu pane is open

[Mudr0x]

Describe the bug

Hello,
I have this weird overlay issue on a page with labels and controls:

Here's my HomeView.xml:

<Controls:MetroWindow x:Class="OpenTracker.UI.HomeView"
                        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                        xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
                        BorderThickness="0" 
                        GlowBrush="Black"
                        ResizeMode="CanResizeWithGrip"
                        WindowTransitionsEnabled="False"
                        WindowStartupLocation="CenterScreen"
                        Title="Open Tracker" MinHeight="600" MinWidth="980"  Height="600" Width="980" Visibility="Visible">

    <Controls:MetroWindow.RightWindowCommands>
        <Controls:WindowCommands>
            <Button Content="help" />
            <Button Content="about" />
        </Controls:WindowCommands>
    </Controls:MetroWindow.RightWindowCommands>

    <Grid xmlns:controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

        <Grid.Resources>
            <!--  Templates  -->
            <DataTemplate x:Key="MenuItemTemplate" DataType="{x:Type controls:HamburgerMenuGlyphItem}">
                <Grid Height="48">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="48" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0"
                               FontSize="16"
                               HorizontalAlignment="Center"
                               VerticalAlignment="Center"
                               FontFamily="Segoe MDL2 Assets"
                               Text="{Binding Glyph}" />
                    <TextBlock Grid.Column="1"
                               VerticalAlignment="Center"
                               FontSize="16"
                               Text="{Binding Label}" />
                </Grid>
            </DataTemplate>

            <DataTemplate x:Key="OptionsMenuItemTemplate" DataType="{x:Type controls:HamburgerMenuGlyphItem}">
                <Grid Height="48">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="48" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0"
                               FontSize="16"
                               HorizontalAlignment="Center"
                               VerticalAlignment="Center"
                               FontFamily="Segoe MDL2 Assets"
                               Text="{Binding Glyph}" />
                    <TextBlock Grid.Column="1"
                               VerticalAlignment="Center"
                               FontSize="16"
                               Text="{Binding Label}" />
                </Grid>
            </DataTemplate>
        </Grid.Resources>

        <!--  Menu Control  -->
        <controls:HamburgerMenu x:Name="HamburgerMenuControl"
                                Foreground="White"
                                PaneBackground="#FF444444"
                                IsPaneOpen="False"
                                ItemTemplate="{StaticResource MenuItemTemplate}"
                                OptionsItemTemplate="{StaticResource OptionsMenuItemTemplate}"
                                ItemClick="HamburgerMenuControl_OnItemClick"
                                OptionsItemClick="HamburgerMenuControl_OnItemClick"
                                SelectedIndex="0"
                                DisplayMode="CompactOverlay">
           
            <!--  Items  -->
            <controls:HamburgerMenu.ItemsSource>
                <controls:HamburgerMenuItemCollection>
                    <controls:HamburgerMenuGlyphItem Glyph="" Label="OpenTracker"/>
                    <controls:HamburgerMenuGlyphItem Glyph="" Label="Private"/>
                    <controls:HamburgerMenuGlyphItem Glyph="" Label="Settings"/>
                </controls:HamburgerMenuItemCollection>
            </controls:HamburgerMenu.ItemsSource>

            <!--  Options  -->
            <controls:HamburgerMenu.OptionsItemsSource>
                <controls:HamburgerMenuItemCollection>
                    <controls:HamburgerMenuGlyphItem Glyph="" Label="About"/>
                </controls:HamburgerMenuItemCollection>
            </controls:HamburgerMenu.OptionsItemsSource>

            <!--  Content  -->
            <controls:HamburgerMenu.ContentTemplate>
                <DataTemplate DataType="{x:Type controls:HamburgerMenuItem}">
                    <Grid x:Name="TheContentGrid">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="48" />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <Border Grid.Row="0"
                                 Background="#FF444444">
                            <TextBlock x:Name="Header"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center"
                                   FontSize="24"
                                   Foreground="White"
                                   Text="{Binding Label}" />
                        </Border>
                        <ContentControl x:Name="TheContent"
                                   Grid.Row="1"
                                   Focusable="False"
                                   Foreground="{DynamicResource BlackBrush}"
                                   Content="{Binding Tag}" />
                    </Grid>
                </DataTemplate>
            </controls:HamburgerMenu.ContentTemplate>

        </controls:HamburgerMenu>

        <Frame x:Name="MainFrame" />
    </Grid>
</Controls:MetroWindow>

Can anyone help me to solve this please? Thank you very much in advance!

Steps to reproduce

Expected behavior

Actual behavior

Environment

MahApps.Metro version: v2.0.0
Windows build number: Win10 1909 [Version 10.0.18363.836]
Visual Studio: 2019 16.6.0
Target Framework: .Net Core 3.1 (v4.5.2, v4.7.2)

Screenshots

[punker76]

@Mudr0x It looks like, that the MainFrame shows a page which then covers your hamburger menu, because the MainFrame is over the menu.

[Mudr0x]

Thanks punker for your help, unfortunately I'm not enough experienced with mahapps and can't find why my MainFrame is over the menu however I exactly used same code of official hamburger menu examples, here's my complete code can you help me to fix it please? Very much appreciated!

OpenTracker.UI.zip

[punker76]

@Mudr0x I think that you mixed the samples, there are 2 one with Frame navigation and one without

• https://mahapps.com/docs/controls/HamburgerMenu#navigation-example

• https://mahapps.com/docs/controls/HamburgerMenu#example

• https://github.com/punker76/code-samples/tree/main/MahAppsMetroHamburgerMenuNavigation

• https://github.com/punker76/code-samples/tree/main/MahAppsMetroHamburgerMenu