WebViewBrush in Windows Store Apps

Today we will walk through a problem that may arise during the use of the the WebView control in Windows Store Apps. Probably, when we use a WebView control with others controls around it. then, a conflict can exist with the WebView and the other controls for rendering the other controls over the WebView control.

Suppose we use a ComboBox and a WebView control in a page. The ComboBox opens over the WebView control but when the ComboBox opens, a conflict occurs and the ComboBox cannot render its content over the WebView. This type of problem prevents you from designing your Windows Store apps page.

This article shows you how to overcome the above problem by using the WebViewBrush. The WebView control is hosted in its own HWND, so any control in your app that occupies the same space as the WebView control does not appear.

Here is the description of this problem and its solution using WebViewBursh.

Step 1

First we design a XAML page with a ComboBox and a WebView control.

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<x:String>First Item</x:String>

</ComboBoxItem>

<x:String>Second Item</x:String>

</ComboBoxItem>

<x:String>Third Item</x:String>

</ComboBoxItem>

<x:String>Fourth Item</x:String>

</ComboBoxItem>

<x:String>Fifth Item</x:String>

</ComboBoxItem>

<x:String>Sixth Item</x:String>

</ComboBoxItem>

<x:String>Seventh Item</x:String>

</ComboBoxItem>

</ComboBox>

<Grid>

</Grid>

</Border>

</Grid>

Step 2

When you are trying to open a ComboBox, it does not appear properly and cannot render its content as it opens over the WebView control.

To avoid this problem use following steps.

Step 1

Here I am changing a little bit of code in the XAML page.

To solve this problem, cover the WebView control with a Rectangle and make the visiblitly Collapsed.

<Grid>
<WebView x:Name="WebView6" />
<Rectangle x:Name="Rect1" Visibility=collapsed/>
</Grid>

Step 2

We need to create the DropDownOpened and DropDownClosed event of the ComboBox so that we are notified when it is opened or closed.

ComboBox1.DropDownOpened += ComboBox1_DropDownOpened;

ComboBox1.DropDownClosed += ComboBox1_DropDownClosed;

ComboBox1.SelectedIndex = 0;

Step 3

In the DropDownOpened event of ComboBox write the following code.

We create a WebViewBrush and set the WebView as its source and call the Redraw() method which will take a visual appearence of the WebView. We then use that brush to fill our Rectangle using the Rectangle.Fill property and make it visible. On the other hand collapse (using the Collapsed property) the visibility of the WebView control.

void ComboBox1_DropDownOpened(object sender, object e)

{

Rect1.Visibility == Windows.UI.Xaml.Visibility.Visible

if (Rect1.Visibility == Windows.UI.Xaml.Visibility.Visible)

{

WebViewBrush b = new WebViewBrush();

b.SourceName = "WebView6";

b.Redraw();

Rect1.Fill = b;

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

}

}

In the above code we swap the WebView control for a Rectangle that created the illusion of the WebView. This technique solves space problems that occur since the WebView is hosted in its own HWND and the content of other controls cannot be rendered over of it.

Step 4

Here is the code of the DropDownClosed Event of the ComboBox where I reverse all that:

void ComboBox1_DropDownClosed(object sender, object e)

{

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

Rect1.Fill = new SolidColorBrush(Windows.UI.Colors.Transparent);

}

Step 5

Output

1 Comment

Join the conversation! Your thoughts help the community grow.

Sam Hobbs14y agoedited
Are you sure that a Windows Store App has a HWND? It is my understanding that Windows Store Apps do not have handles. So instead of saying that the WebView control is hosted in its own HWND, it is more accurate to say that it is a separate window. And yes, there has always been a problem putting a window on top of another window in Windows when there is not a parent/child relationship. Windows is designed like that; child windows occupy the client space of their parent but putting a window (control) over another window when the control is not a child has alwasy been difficult. In the Winows API, I think the solution is to make the control a child of the parent of the window that the control is being put over. I do not know if that is possible in Windows Store Apps.