DataContext is not showing in the ContentControl using HamburgerMenu

[Kitsunejasutin]

I was experimenting and found out that the DataContext is not showing in the MetroControlContent if the Item HamburgerMenuIconItem is not on the first list

The following XAML is the not working XAML with a Binding error of:

Error	null	DatContext.Requests	DataGrid.ItemsSource	IEnumerable	Cannot find source: RelativeSource FindAncestor, AncestorType='MahApps.Metro.Controls.HamburgerMenu', AncestorLevel='1'.

<mah:MetroContentControl x:Class="UDMPortalApp.Views.ClerkDashboard"
                         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:local="clr-namespace:UDMPortalApp.Views"
                         xmlns:mah="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
                         xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks" 
                         xmlns:Converters="clr-namespace:UDMPortalApp.Converters"
                         xmlns:viewmodels="clr-namespace:UDMPortalApp.ViewModels" d:DataContext="{d:DesignInstance Type=viewmodels:ClerkDashboardViewModel}"
                         mc:Ignorable="d" 
                         d:DesignHeight="450" d:DesignWidth="800">
    <mah:MetroContentControl.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="MenuItemTemplate" DataType="{x:Type mah:HamburgerMenuIconItem}">
                <Grid Height="48">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type mah:HamburgerMenu}}, Path=CompactPaneLength}" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <ContentControl Grid.Column="0"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Content="{Binding Icon}"
                            Focusable="False"
                            IsTabStop="False" />
                    <TextBlock Grid.Column="1"
                       VerticalAlignment="Center"
                       FontSize="16"
                       Text="{Binding Label}" />
                </Grid>
            </DataTemplate>

            <Style x:Key="MahApps.Styles.HamburgerMenu.Ripple"
           BasedOn="{StaticResource MahApps.Styles.HamburgerMenu}"
           TargetType="{x:Type mah:HamburgerMenu}">
                <Setter Property="PaneBackground" Value="#FF81923A" />
                <Setter Property="PaneForeground" Value="White" />
                <Setter Property="ShowSelectionIndicator" Value="True" />
            </Style>
        </ResourceDictionary>

    </mah:MetroContentControl.Resources>

    <Grid>
        <Grid.Resources>
            <Converters:RequestStatusConverter x:Key="RequestStatusConverter" />
        </Grid.Resources>
        <mah:HamburgerMenu x:Name="HamburgerMenuControl"
           HamburgerWidth="48"
           IsPaneOpen="True"
           ItemInvoked="HamburgerMenuControl_OnItemInvoked"
           ItemTemplate="{StaticResource MenuItemTemplate}"
           OptionsItemTemplate="{StaticResource MenuItemTemplate}"
           SelectedIndex="0"
           Style="{StaticResource MahApps.Styles.HamburgerMenu.Ripple}"
           VerticalScrollBarOnLeftSide="False"
           DataContext="{Binding RelativeSource={RelativeSource AncestorType={x:Type mah:MetroContentControl}}}">



            <!--  Header  -->
            <mah:HamburgerMenu.HamburgerMenuHeaderTemplate>
                <DataTemplate>
                    <DockPanel>
                        <Image VerticalAlignment="Top" Source="/Resources/icon.png" Width="45" Height="45" RenderOptions.BitmapScalingMode="HighQuality"/>
                        <TextBlock Text="UDM" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="14" Foreground="White" />
                    </DockPanel>
                </DataTemplate>
            </mah:HamburgerMenu.HamburgerMenuHeaderTemplate>

            <!--  Items  -->
            <mah:HamburgerMenu.ItemsSource>
                <mah:HamburgerMenuItemCollection>
                    <mah:HamburgerMenuIconItem Icon="{iconPacks:Material Kind=Magnify}" Label="Records Search">
                        <mah:HamburgerMenuIconItem.Tag>
                            <UserControl>

                            </UserControl>
                        </mah:HamburgerMenuIconItem.Tag>
                    </mah:HamburgerMenuIconItem>

                    <mah:HamburgerMenuIconItem Icon="{iconPacks:FontAwesome Kind=PersonCircleQuestionSolid}" Label="Requests">
                        <mah:HamburgerMenuIconItem.Tag>
                            <mah:MetroContentControl>
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="35" />
                                        <RowDefinition />
                                    </Grid.RowDefinitions>

                                    <TextBox HorizontalAlignment="Left"  Width="200" mah:TextBoxHelper.Watermark="Search Request ID" FontSize="16" VerticalContentAlignment="Bottom"/>

                                    <DataGrid Grid.Row="1" GridLinesVisibility="All" TabIndex="1" IsReadOnly="True" 
                                              ItemsSource="{Binding DatContext.Requests, RelativeSource={RelativeSource AncestorType={x:Type mah:HamburgerMenu}}}" 
                                              SelectionMode="Extended"  CanUserResizeColumns="False" CanUserResizeRows="False" 
                                              CanUserReorderColumns="False" AutoGenerateColumns="False" Margin="0 10 0 0" >
                                        <DataGrid.Columns>

                                                // DataGridTemplateColumns

                                        </DataGrid.Columns>
                                    </DataGrid>
                                </Grid>
                            </mah:MetroContentControl>
                        </mah:HamburgerMenuIconItem.Tag>
                    </mah:HamburgerMenuIconItem>
                </mah:HamburgerMenuItemCollection>
            </mah:HamburgerMenu.ItemsSource>

            <!--  Options  -->
            <mah:HamburgerMenu.OptionsItemsSource>
                <mah:HamburgerMenuItemCollection>
                    <mah:HamburgerMenuIconItem Icon="{iconPacks:Material Kind=Cog}" Label="Settings">
                        <mah:HamburgerMenuIconItem.Tag>
                            <UserControl>

                            </UserControl>
                        </mah:HamburgerMenuIconItem.Tag>
                    </mah:HamburgerMenuIconItem>
                </mah:HamburgerMenuItemCollection>
            </mah:HamburgerMenu.OptionsItemsSource>

            <mah:HamburgerMenu.ContentTemplate>
                <DataTemplate DataType="{x:Type mah:HamburgerMenuIconItem}">
                    <Grid Margin="20 0 10 0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0"
                       Margin="0 15 0 5"
                       Padding="0"
                       FontFamily="{DynamicResource MahApps.Fonts.Family.Header}"
                       FontSize="{DynamicResource MahApps.Font.Size.Header}"
                       Text="{Binding Label}" />
                        <ScrollViewer Grid.Row="1"
                          Focusable="False"
                          HorizontalScrollBarVisibility="Disabled"
                          VerticalScrollBarVisibility="Auto">
                            <ContentControl Content="{Binding Tag}" Focusable="False" />
                        </ScrollViewer>
                    </Grid>
                </DataTemplate>
            </mah:HamburgerMenu.ContentTemplate>

        </mah:HamburgerMenu>
    </Grid>
</mah:MetroContentControl>

Swapping the 2 HamburgerMenuIconItem and DataContext View Model now shows on the DataGrid with no errors.

Is there something I should do?

I am binding the ViewModel thru Code Behind:

ClerkDashboardViewModel model;
public ClerkDashboard()
{
   InitializeComponent();
   model = new();
   DataContext = model;
}

[timunie]

check samples in source code. It has some great samples how to use the two lists.