Microsoft-ui-xaml: Webview2 obscures other controls

[cirrusone]

Describe the bug
When webview2 is used it is always on top and obscures all other controls. Changing zindex does not affect anything. This especially affects controls with animations which are then hidden behind the webview2 control.

Steps to reproduce the bug

Sample code to demonstrate this is below, this example is WinUI3 desktop but equally affects WPF (and I presume also Winform). This sample shows navigationview is hidden when using webview2.

NavigationView starts in compact mode and when opened at runtime is obscured.

MainWindow.xaml:

<Window
  x:Class="WinUIApp2.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:WinUIApp2"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:controls="using:Microsoft.UI.Xaml.Controls"
  mc:Ignorable="d">

    <controls:NavigationView x:Name="nvSample" Header="This is Header Text" PaneDisplayMode="LeftCompact" SelectionChanged="NavigationView_SelectionChanged">
        <controls:NavigationView.MenuItems>
            <controls:NavigationViewItem  Content="1 - Longer Description when not compact" Tag="TextPage1" />
            <controls:NavigationViewItem  Content="2 - Longer Description when not compact" Tag="WebViewPage2" />
        </controls:NavigationView.MenuItems>
        <Frame x:Name="contentFrame"/>
    </controls:NavigationView>
</Window>

MainWindow.xaml.cs:

using Microsoft.UI.Xaml;
using System;

// The Blank Window item template is documented at https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409

namespace WinUIApp2
{
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
        }

        private void NavigationView_SelectionChanged(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewSelectionChangedEventArgs args)
        {
            var selectedItem = (Microsoft.UI.Xaml.Controls.NavigationViewItem)args.SelectedItem;
            string selectedItemTag = ((string)selectedItem.Tag);
            sender.Header = selectedItemTag;
            string pageName = "WinUIApp2." + selectedItemTag;
            Type pageType = Type.GetType(pageName);
            contentFrame.Navigate(pageType);
        }
    }
}

TextPage1:

<Page
  x:Class="WinUIApp2.TextPage1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:WinUIApp2"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d"
  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <TextBlock Text="Hello from TextPage1"/>
    </Grid>
</Page>

WebViewPage2:

<Page
  x:Class="WinUIApp2.WebViewPage2"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:WinUIApp2"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:controls="using:Microsoft.UI.Xaml.Controls"
  mc:Ignorable="d"
  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

  <Grid>
        <controls:WebView2 x:Name="MyWebView2" Source="https://www.microsoft.com" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
    </Grid>
</Page>

Expected behavior
The NavigationView 'Open Navigation' opens behind a webview2 control, I believe it should open in front. The example above shows it correctly opens in front when page TextPage1 is clicked but not when WebViewPage2 is clicked.

If opening in front is not possible an alternative is to shift content to allow animation to display correctly.

Screenshots

The bug: the navigationview is obscured by webview2

Expected behavior: here the navigationview is correctly in view

Version Info

NuGet package version:
[Microsoft.WinUI 3.0.0-preview1.200515.3]
[Microsoft.VCRTForwarders.140 1.0.6]

| Windows 10 version | Saw the problem? |
| :--------------------------------- | :-------------------- |
| November 2019 Update (18363) | Yes |

| Device form factor | Saw the problem? |
| :-------------------- | :------------------- |
| Desktop WinUI | Yes |
| Desktop WPF | Yes |

Additional context

[codendone]

This is a limitation in the current preview. This limitation was mentioned on the release page for the Alpha, but was removed from the release page for Preview 1. We're currently starting the implementation to render at the correct z-order (internal link).

[codendone]

This issue has been fixed, and will be part of the next WinUI3 preview.