在C＃/ XAML Metro应用程序的WebView顶部显示应用程序栏？

Question

我正在尝试在Metro应用程序中使用AppBar。 问题是，我还有一些WebView正在AppBar上显示。 这是我的代码：

<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>

如果运行该程序并调出应用程序栏，则将注意到WebView显示在应用程序栏上，即使AppBar的Canvas.ZIndex高于WebView和Grid的ZIndex。 如何防止这种情况发生？

Answer 1

您需要使用WebViewBrush控件，该控件将在应用程序栏处于活动状态时显示WebView内容。 在应用栏显示事件上，您隐藏WebView控件并显示WebViewBrush，然后在应用栏隐藏事件上执行相反的操作。 实现这一点的棘手部分是正确获取动画定时。

下面链接的文章包含有关如何执行此操作的示例，尽管它与“魅力”栏相关，但原理相同。

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