Make an appbar display on top of a WebView in C#/XAML Metro apps?

Question

I'm trying to use an AppBar in my Metro app. The problem is, I also have a few WebViews that are being displayed over the AppBar. Here's my code:

<Page
x:Class="AppName.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AppName"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="#00D4FF" Canvas.ZIndex="1">
    <WebView Source="http://bing.com/"
        VerticalAlignment="Center" Margin="306,518,360,25" 
             Canvas.ZIndex="1" Height="225" />
</Grid>
<Page.BottomAppBar>
    <AppBar x:Name="ABar" IsSticky="True" Padding="10,0,10,0" Canvas.ZIndex="200">
        <Grid>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                <Button Style="{StaticResource EditAppBarButtonStyle}" x:Name="EditButton" Visibility="Collapsed" />
                <Button Style="{StaticResource AddAppBarButtonStyle}" />
                <Button Style="{StaticResource DeleteAppBarButtonStyle}" x:Name="DelButton" Visibility="Collapsed" />
            </StackPanel>
        </Grid>
    </AppBar>
</Page.BottomAppBar>

If you run that and bring up the appbar, you'll notice that the WebView is displayed over the appbar, even though the AppBar's Canvas.ZIndex is higher than the ZIndex of the WebView and the Grid. How do I prevent this from happening?

Answer 1

You need to make use of a WebViewBrush control which will display the WebView content while the app bar is active. On the app bar show event, you hide the WebView control and display the WebViewBrush, and you do the opposite on the app bar hide event. The tricky part with implementing this is getting the animation timings correctly.

The article linked below contains an example of how to this, and while its related to the Charms bar, it's the same principle.

http://blogs.msdn.com/b/priozersk/archive/2012/08/13/how-to-display-charms-on-a-top-of-the-webview.aspx