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 x:Name="Output" Grid.Row="1">

    <Grid.RowDefinitions>

       <RowDefinition Height="Auto"/>

       <RowDefinition Height="*"/>

     </Grid.RowDefinitions>

     <ComboBox x:Name="ComboBox1" Height="50" Width="200" HorizontalAlignment="Left" Margin="10,0,0,0">

        <ComboBoxItem>

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

        </ComboBoxItem>

        <ComboBoxItem>

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

        </ComboBoxItem>

        <ComboBoxItem>

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

        </ComboBoxItem>

        <ComboBoxItem>

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

        </ComboBoxItem>

        <ComboBoxItem>

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

        </ComboBoxItem>

        <ComboBoxItem>

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

        </ComboBoxItem>

        <ComboBoxItem>

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

        </ComboBoxItem>

        </ComboBox>

      <Border BorderThickness="1" BorderBrush="#FF707070"  Grid.Row="1" Margin="10,0,0,0">

      <Grid>

         <WebView x:Name="WebView6" />

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