WebView is always the topmost component

Question

I'm developing a reporting dashboard application using W8 Metro UI style application. The application has a dark theme, so most of the screen is black. I'm using the WebView control to display SSRS .rdl reports from our report server (which all have black backgrounds). The problem I'm seeing is that when I navigate to a new report, the WebView control flashes white for a split second and then loads the new report. To get around this, I tried putting an Easing opacity animation on the WebView control to make it fade out, load the report, and then fade back in. However, no matter what I try, I can't get the flickering to go away.

I then tried putting a black rectangle on top of the WebView and fading that one in and out... still no luck. The WebView is always on top at runtime, meaning I can't put any control on top of it. Does anyone know of a way around this?

I breifly looked into the WebView.Transitions, but couldn't find many resources on this. Could this be my answer?

EDIT:

Event to load the new report:

void ItemListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    // Create a WebViewBrush of the content currently loaded in the WebView
    WebViewBrush b = new WebViewBrush();
    b.SourceName = "WebView1";
    b.Redraw();
    Rectangle1.Fill = b;

    // Hide the WebView
    WebView1.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

    // Navigate to the new report
    var selectedItem = ItemListView.SelectedItem;
    WebView1.Navigate(((Report)selectedItem).ReportUri);
}

void WebView1_LoadCompleted(object sender, Windows.UI.Xaml.Navigation.NavigationEventArgs e)
{
    // Show the new report
    WebView1.Visibility = Windows.UI.Xaml.Visibility.Visible;
    Rectangle1.Fill = new SolidColorBrush(Colors.Transparent);
 }

The flickering is awful and my app failed cert because of it. I think its a bug in WinRT. — Jeff Yates

Robert Levy Robert Levy · Accepted Answer · 2012-02-24T13:17:29

This is just the way WebView works because internally its loading the trident COM control into a separate hwnd. The workaround is to set Visibility to Hidden on the webview and instead show a webviewbrush which isn't interactive but does integrate with the rest of your UI so it can be animated, etc

WebView is always the topmost component

1 Answers