Why my webview covered popup in metro app? - popup

Question

I want to make a setting panel in my metro app.
I added a main page with webview like this:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Class="App.MainPage"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<WebView x:Name="MainWebView"/>
</Grid>
and use this code to display my popip window
_settingsPopup = new Popup();
_settingsPopup.Closed += OnPopupClosed;
Window.Current.Activated += OnWindowActivated;
_settingsPopup.IsLightDismissEnabled = true;
_settingsPopup.Width = _settingsWidth;
_settingsPopup.Height = _windowBounds.Height;
SettingsPanel mypane = new SettingsPanel();
mypane.Width = _settingsWidth;
mypane.Height = _windowBounds.Height;
_settingsPopup.Child = mypane;
_settingsPopup.SetValue(Canvas.LeftProperty, _windowBounds.Width - _settingsWidth);
_settingsPopup.SetValue(Canvas.TopProperty, 0);
_settingsPopup.IsOpen = true;
but, finally the popup can't be displayed and when i set the webview to be hidden ,I found the popup behind the webview.
I can't found any function or properties to set the zindex or sth like zindex to help me taking the popup to the front.
How can I make it correct?

Answer 1

The behavior is by design as the WebView will always assume the topmost position. The recommended solution is to either hide the WebView as you popup, or to use the WebViewBrush as a placeholder when your popup is displayed.
There are lots of tutorials on the web, I personally recommend this article:
How to display charms on a top of the WebView