HamburgerMenu doesn't handle DataContext inheritance for Menu items

[damusthe]

I'm trying tu use HamburgerMenu with custom UserControls as items.
Unfortunately, the Datacontext link is not propagated to the items usercontrol.

<Border Grid.Column="0"
                Margin="10 10 0 10"
                BorderBrush="{DynamicResource GrayBrush7}"
                BorderThickness="1">
		<Controls:HamburgerMenu x:Name="HamburgerMenuControl"
                                    HamburgerWidth="40"
                                    IsPaneOpen="True"
									ItemInvoked="HamburgerMenuControl_OnItemInvoked"
									ItemTemplate="{StaticResource MenuItemTemplate}"
                                    OptionsItemTemplate="{StaticResource MenuItemTemplate}"
                                    SelectedIndex="2"
                                    Style="{StaticResource HamburgerMenuCreatorsStyle}"
                                    VerticalScrollBarOnLeftSide="False">
			<!--  Items  -->
			<Controls:HamburgerMenu.ItemsSource>
				<Controls:HamburgerMenuItemCollection>
					<Controls:HamburgerMenuIconItem Icon="{iconPacks:Modern Kind=Clean}" Label="Clean">
						<Controls:HamburgerMenuIconItem.Tag>
								<views:Clean/>
							</Controls:HamburgerMenuIconItem.Tag>
					</Controls:HamburgerMenuIconItem>

I added in code behind the following event

private void HamburgerMenuControl_OnItemInvoked(object sender, HamburgerMenuItemInvokedEventArgs e)
		{
			HamburgerMenuControl.Content = e.InvokedItem;
			// Set the DataContext to the UserControl created dynamically when clicking on the menu
			((e.InvokedItem as HamburgerMenuIconItem).Tag as UserControl).DataContext = this.DataContext;
		}

This solve the problem, but not for the first time. Indeed when the application starts, the event is not invoked.
Adding this kind of XAML code doesn't work also.

DataContext="{Binding RelativeSource={RelativeSource AncestorType=UserControl}}"

Any idea ?
Thank you

[punker76]

@damusthe Can you create a short sample which shows your issue? Thx!

[punker76]

@damusthe ping

[Laurnz]

I have the exact same Problem. I need some views in the HamburgerMenu to bind to the same ViewModel als to control the code is in, but setting the DataContext is doing nothing in the XAML code.

Currently the code looks something like this:

<controls:HamburgerMenu x:Name="createProject_hamburgerMenuMain"
        ItemTemplate="{DynamicResource Global_Template_HamburgerMenuItem}"
        OptionsItemTemplate="{DynamicResource Global_Template_HamburgerMenuItem}"
        Style="{DynamicResource Global_Style_HamburgerMenuCreators}"
        SelectedIndex="0">

    <!--  Items  -->
    <controls:HamburgerMenu.ItemsSource>
        <controls:HamburgerMenuItemCollection>
            <controls:HamburgerMenuGlyphItem Glyph="&#xE946;" Label="Project info">
                <controls:HamburgerMenuGlyphItem.Tag>
                    <views:View_CreateProject_General DataContext="{Binding}"/>
                </controls:HamburgerMenuGlyphItem.Tag>
            </controls:HamburgerMenuGlyphItem>

            <controls:HamburgerMenuGlyphItem Glyph="&#xE71D;" Label="Jobs">
                <controls:HamburgerMenuGlyphItem.Tag>
                    <views:View_CreateProject_Jobs DataContext="{Binding}" />
                </controls:HamburgerMenuGlyphItem.Tag>
            </controls:HamburgerMenuGlyphItem>
        </controls:HamburgerMenuItemCollection>
    </controls:HamburgerMenu.ItemsSource>

    <!--  Content  -->
    <controls:HamburgerMenu.ContentTemplate>
        <DataTemplate DataType="{x:Type controls:HamburgerMenuItem}">
            <ContentControl x:Name="TheContent"
                Grid.Row="1"
                Focusable="False"
                Foreground="{DynamicResource BlackBrush}"
                Content="{Binding Tag}" />

        </DataTemplate>
    </controls:HamburgerMenu.ContentTemplate>
</controls:HamburgerMenu >

If I just put my view in the code without the HamburgerMenu everything is binding fine:

<views:View_CreateProject_General DataContext="{Binding}" />

[Laurnz]

I found the "problem" in this StackOverflow thread: https://stackoverflow.com/questions/15494226/cannot-find-source-for-binding-with-reference-relativesource-findancestor

According to the awnser is the HamburgerMenuGlyphItem is not be part of the visual or logical tree, there is no binding ancestor for the DataContext. i.e. the binding has no source to bind to. So to work around this you have to add a binding proxy.

Is this something that is fixable or just the way the control works?

[SkinnySackboy]

I have just come across precisely the same issue, same symptoms as OP. The bizarre thing is that if I use Snoop and hit the control suddenly the DataContext gets set correctly. I’ve tried the binding proxy trick, it works but like the OP said not the first time, unless I use Snoop to “prod” it into action.

[punker76]

There are 3 options to solve this "known" problem:

System.Windows.Data Error: 2 : Cannot find governing FrameworkElement or FrameworkContentElement for target element. BindingExpression:Path=SomeProperty; DataItem=null; target element is ‘SomeElement’ (HashCode=123456789); target property is ‘AProperty’ (type ‘TypeOfTheProperty’)

This could be solved...

• by using a BindingProxy
• by using x:Reference

<Controls:HamburgerMenuIconItem x:Name="AboutOption"
                                Command="{Binding Source={x:Reference theHamburgerMenuElement}, Path=DataContext.ShowHamburgerAboutCommand}"
                                Label="About">
    <Controls:HamburgerMenuIconItem.Icon>
        <iconPacks:PackIconMaterial Width="22"
                                    Height="22"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    Kind="Help" />
    </Controls:HamburgerMenuIconItem.Icon>
</Controls:HamburgerMenuIconItem>

• or simply adding the x:Name to the element SO

<Controls:HamburgerMenuIconItem x:Name="AboutOption"
                                Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Controls:HamburgerMenu}, Path=DataContext.ShowHamburgerAboutCommand}"
                                Label="About">
    <Controls:HamburgerMenuIconItem.Icon>
        <iconPacks:PackIconMaterial Width="22"
                                    Height="22"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    Kind="Help" />
    </Controls:HamburgerMenuIconItem.Icon>
</Controls:HamburgerMenuIconItem>