HamburgerMenu: Content sometimes moves behind navigation bar

[floele-ww]

Sometimes, the content of the HamburgerMenu moves behind the navigation bar when starting up the application. In the demo app, it would look like this (assuming that it actually happens):

(here the whitespace on the left is missing)

Unfortunately it only happens rarely and thus is hard to reproduce, but it happens often enough to be a real annoyance.

I've already spent a lot of time on this to figure out why it's happening. The issue occurs because the column width is set to 1* in ColumnDefinition1 (SplitView.xaml) instead of the expected numeric value. This unexpected value is set by the ClosedCompactLeftStoryboard animation, at some point the value of ColumnDefinition1.Width will be set to Auto (so a default GridLength) which then gets converted to 1* by the GridLengthAnimation later in this line of code:

return new GridLength(animationClock.CurrentProgress.Value * (toVal - fromVal) + fromVal, GridUnitType.Star);

It should be noted that it doesn't make any difference whether it's Auto or 1* though, both values cause the appearance to be incorrect.

The root issue seems to be that the binding of the To property occasionally breaks:

The bindings to ElementName=ProxyElement indeed seem a bit fishy to me, especially since there also is a resource

<FrameworkElement x:Key="ProxyElement" DataContext="{TemplateBinding TemplateSettings}" />

which isn't being used. Do you have a suggestion for reorganising the bindings so that such a problem can no longer occur?

Environment:

• MahApps.Metro version: develop branch, April 28th
• OS: Win10 18363
• .NET Framework 4.6.0 target

[timunie]

Hi @floele-sp

can you test this with the current release v2.0.0? There were some fixes on this control, maybe it was solved "by accident"

Happy testing Tim

[floele-ww]

Hi @timunie,

the issue still occurs in 2.0.0. Now 100% of the time though (so far). This makes testing much easier, but I'm still not quite sure what I should do with those bindings.

[punker76]

@floele-sp Can you create a sample with exactly this scenario? This makes it easier to debug this, because I can not see this in the main demo. Thx

[floele-ww]

@punker76 I created a small test project with some copy & paste XAML from our application. Apparently the issue reproduces, there is a data binding error as well. I made the panel color transluscent so that you can see the parts that are covered unintentionally.

TestHamburgerBug.zip

[punker76]

@floele-sp I think your problem is the DockPanel. IMO a HamburgerMenu should use the complete space of a window (inside a Grid). In your case, if you really need the DockPanel with another Grid (Content) then you should change the DockPanel settings.

    <DockPanel LastChildFill="True">
        <Grid DockPanel.Dock="Right">
            <TextBlock>Content</TextBlock>
        </Grid>

        <mah:HamburgerMenu x:Name="sidebarPanel" ...

[floele-ww]

@punker76 When I try your suggested changes it looks like this:

How did you make the control fill the gap between the left bar and content?

I need the hamburger control to be constrained in any case.

[punker76]

@floele-sp This happens because of OpenPaneLength="48". I will try to fix this.

[floele-ww]

@punker76 What about the binding errors though? Should they not be fixed?

[punker76]

@floele-sp Do you mean this?

System.Windows.Data Error: 40 : BindingExpression path error: 'IsDocked' property not found on 'object' ''HamburgerMenu' (Name='sidebarPanel')'. BindingExpression:Path=IsDocked; DataItem='HamburgerMenu' (Name='sidebarPanel'); target element is 'Grid' (Name=''); target property is 'NoTarget' (type 'Object')

Why? IsDocked is no property on HamburgerMenu.

[floele-ww]

@punker76 No, I mean the error seen in the Snoop screenshot in my first post. It also exists in the sample app.

[punker76]

@floele-sp This will be fixed in another PR.

[floele-ww]

@punker76 OK, great! I just tested your fix, seems to work fine. Thanks.

[floele-ww]

@punker76 Did you already fix the binding issues? We still have problems with the HamburgerMenu unfortunately.