Home > C#, WinRT > How to solve the WebView z-order problem in WinRT

How to solve the WebView z-order problem in WinRT

04/03/2013

As we can read on MSDN:

WebView has the characteristic that other UI regions such as controls cannot be rendered on top of the WebView. This is because of how window regions are handled internally, particularly how input events are processed and how the screen draws. If you want to render HTML content and also place other UI elements on top of that HTML content, you should use WebViewBrush as the render area.

The solution that is proposed on that page works correctly, but when the WebView is “replaced” by the WebViewBrush, there is an annoying flickering effect. The solution is simple: we need to wait for some instants before hiding the WebView, so that the WebViewBrush can be drawn correctly. Using a couple of Extension methods, we can simplify all the procedure:

public static class WebViewExtensions
{
    public static async Task ShowWebViewSnapshotAsync(this WebView webView, Rectangle
                                                                            rectangle)
    {
        var brush = new WebViewBrush();
        brush.SetSource(webView);

        rectangle.Fill = brush;
        rectangle.Visibility = Visibility.Visible;

        brush.Redraw();

        await Task.Delay(200);

        webView.Visibility = Visibility.Collapsed;
    }

    public static void HideWebViewSnapshot(this WebView webView, Rectangle rectangle)
    {
        webView.Visibility = Visibility.Visible;
        rectangle.Fill = new SolidColorBrush(Colors.Transparent);
    }
}

These methods apply to a WebView control and require a Rectangle to fill with the WebViewBrush, as shown on MSDN.

Categories: C#, WinRT
%d bloggers like this: