Microsoft-ui-xaml: NavigationView: hamburger button sometimes overlaps header in Minimal mode

[jp-weber]

Describe the bug
If the back button is disabled and the minimum VisualState for the width is active, the reactivating of the back button leads to the wrong VisualState. So the header is faded over.

Steps to reproduce the bug
Steps to reproduce the behavior:

1. disable the NavigationView back button
2. Change the width of the app, so that the 'Minimal' VisualState is active
3. active the back button again
4. => wrong style view

Expected behavior
In this case, the VisualState should be 'MinimalWithBackButton' and not 'Minimal'.

Version Info

NuGet package version: 2.1.190131001-prerelease

| Windows 10 version | Saw the problem? |
| :--------------------------------- | :-------------------- |
| Insider Build (xxxxx) | |
| October 2018 Update (17763) | Yes
| April 2018 Update (17134) | |
| Fall Creators Update (16299) | |
| Creators Update (15063) | |
| Anniversary Update (14393) | |

| Device form factor | Saw the problem? |
| :-------------------- | :------------------- |
| Desktop | Yes |
| Mobile | Yes |
| Xbox | |
| Surface Hub | |
| IoT | |

[YuliKl]

I can see the same issue in the Xaml Controls Gallery app. If the app is launched in a narrow width, the header and hamburger button will overlap.

Making the window wider (briefly putting NavigationView into Compact mode) and narrow again fixes the visual overlap.

[myokeeh]

Same issue.

[jevansaks]

@myokeeh what version of the nuget package are you using?

[jp-weber]

@myokeeh since version 2.1.x it works for me like it should. If it was just the wrong version for you, i'd close the issue.

[myokeeh]

@jevansaks 2.1.190405004.2.

Steps to reproduce:

1. Run app.
2. Resize app window width to smallest possible.
3. Close app.
4. Run app.

Result: NavigationView Header text overlaps with hamburger button.

Resizing app window width wider and back fixes the issue.

[jp-weber]

@myokeeh
Can you upload a sample project with the problem? I cannot reproduce this issue.

[myokeeh]

DELETE1.zip

Attached is created using Windows Template Studio (MVVM Light) with the following changes.

App.xaml.cs:

protected override async void OnLaunched(LaunchActivatedEventArgs args)
{
    if (!args.PrelaunchActivated)
    {
        await ActivationService.ActivateAsync(args);
    }
    //simulate app start up and other setup, navigate to main page.
    await Task.Delay(10000);
    ViewModelLocator.Current.NavigationService.Navigate(typeof(MainViewModel).FullName);
}

DefaultLaunchActivationHandler.cs:

protected override async Task HandleInternalAsync(LaunchActivatedEventArgs args)
{
    // When the navigation stack isn't restored, navigate to the first page and configure
    // the new page by passing required information in the navigation parameter
    //NavigationService.Navigate(_navElement, args.Arguments);
    await Task.CompletedTask;
}

[jp-weber]

@jevansaks , @myokeeh
I can confirm that the bug is still there. But at my app I use no custom control inside the header and I have not this bug. I have tested this also with the newest preview version 2.2.190430003-prerelease.

Visible is the bug for example also with the newest update for the XAML Controls Gallery app:

[jevansaks]

Thanks for the ping @jp-weber. @ojhad submitted another fix for this but there hasn't been a nuget update with the fix yet.

[myokeeh]

Woohoo, a fix. https://github.com/microsoft/microsoft-ui-xaml/pull/652

[jevansaks]

Oh yay @myokeeh thanks for pointing out this should be closed!