Windows 8 – WebClient and the AppBar or flyouts

By Dries Marckmann
January 9, 2013

Here’s what I found out the hard way. If you show web content in a WebView control and you want to use the AppBar in the same page (overlapping the WebView) than the AppBar isn’t shown. This allegedly also happens to flyouts.

Very annoying. Apparently it has to do with the internal drawing logic of the WebView control. Luckily there is a way around it. As Alex Yakhnin’s blog ( suggests you can replace the current content of the WebView with the same content used as a brush on a rectangle and this works as a charm.

So here’s what I did:

void AppBar_Opened_1(object sender, object e)


WebViewBrush wvb = new

wvb.SourceName = “contentView”;



WebViewBrushRectangle.Fill = wvb;

WebViewCtrl.Visibility = Windows.UI.Xaml.Visibility.Collapsed;


void AppBar_Closed_1(object sender, object e)


WebViewCtrl.Visibility = Windows.UI.Xaml.Visibility.Visible;

WebViewBrushRectangle.Fill = new


And the result is:

Comments: 0

Leave a Reply

Your email address will not be published. Required fields are marked *