WebView Control in Windows Store App

Loading

WebView Control in Windows Store App

Introduction

In this article we are going to see how to use a WebView control in a Windows 8 Metro Style Application. Here, we will present an example of a WebView control with various points. These points describe different functionality. The first point shows how to navigate the WebView control to a specific URL. Enter a valid URL in the Address text box and then press Navigate and the second point shows how to load HTML into the WebView control. Click Load HTML to load the HTML in the text box into the WebView. The third point shows how to call a script in the document hosted by a WebView control and the fourth point shows how to use the WebViewBrush.

So, we will use the following steps to make this application as below.

Step 1 : First of all you will create a new Metro Style Application. Let us see the description with images of how you will create it.

Open Visual Studio 2011
File -> New -> Project
Choose Template -> Visual C# -> Windows Metro Style -> Application
Rename this Application

Step 2 : In the Solution Explorer there are two files that we will primarily work with; MainPage.xaml and MainPage.xaml.cs files. In the images folder add any image to the application but in this application we don't have to add an image.

Step 3 : The MainPage.xaml file is as in the following code.

Code : Let us see the code which is given below:

<UserControl x:Class="WebView.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d"

d:DesignHeight="920" d:DesignWidth="1420">

<Grid x:Name="LayoutRoot" Background="LightGreen">

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="OrientationStates">

<VisualState x:Name="Full"/>

<VisualState x:Name="Fill">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ContentRoot">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Thickness>40,20,40,20</Thickness>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(StackPanel.Orientation)" Storyboard.TargetName="InputPanel">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Orientation>Horizontal</Orientation>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.MaxWidth)" Storyboard.TargetName="Description">

<DiscreteObjectKeyFrame KeyTime="0" Value="700">

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Portrait">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ContentRoot">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Thickness>40,20,40,20</Thickness>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.MaxWidth)" Storyboard.TargetName="Description">

<DiscreteObjectKeyFrame KeyTime="0" Value="700">

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Snapped">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ContentRoot">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Thickness>20,20,20,20</Thickness>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(StackPanel.Orientation)" Storyboard.TargetName="InputPanel">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Orientation>Vertical</Orientation>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="LegalPanel">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Thickness>0,0,10,0</Thickness>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Grid x:Name="ContentRoot" Background="LightGreen" Margin="100,20,100,20">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="*"/>

<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Grid.Row="1" ZoomMode="Disabled" Padding="0,0,20,20">

<StackPanel>

<StackPanel x:Name="InputPanel" Orientation="Horizontal" HorizontalAlignment="Left">

<StackPanel>

<TextBlock Text="Points" Foreground="Red" Style="{StaticResource H2Style}"/>

<TextBlock Text="Select Options" Style="{StaticResource H3Style}"/>

<ListBox x:Name="SectionList" Margin="0,0,20,0" HorizontalAlignment="Left" Foreground="DeepPink">

<ListBox.ItemTemplate>

<DataTemplate>

<TextBlock Text="{Binding Name}"/>

</DataTemplate>

</ListBox.ItemTemplate>

<ListBoxItem x:Name="Section1">

<TextBlock Style="{StaticResource ListBoxTextStyle}" Text="1. Navigate to a URL" />

</ListBoxItem>

<ListBoxItem x:Name="Section2">

<TextBlock Style="{StaticResource ListBoxTextStyle}" Text="2. Load HTML" />

</ListBoxItem>

<ListBoxItem x:Name="Section3">

<TextBlock Style="{StaticResource ListBoxTextStyle}" Text="3. Interact with script" />

</ListBoxItem>

<ListBoxItem x:Name="Section4">

<TextBlock Style="{StaticResource ListBoxTextStyle}" Text="4. Using WebViewBrush" />

</ListBoxItem>

</ListBox>

</StackPanel>

<StackPanel Margin="0,31,0,0" >

<TextBlock Text="Details" Foreground="DarkBlue" Style="{StaticResource H3Style}"/>

<StackPanel x:Name="Description" MaxWidth="900">

<StackPanel x:Name="Section1Input">

<TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap">

This point shows how to navigate the WebView control to a specific URL.

Enter a valid URL in the Address text box and then press Navigate.

</TextBlock>

<TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap" Margin="0,20,0,0" Text=""/>

<StackPanel Orientation="Horizontal" Margin="0,10,0,0">

<TextBlock x:Name="AddressBlock" Text="Address:" Margin="0,0,10,0" Style="{StaticResource DescriptionTextStyle}"/>

<TextBox x:Name="Address" Width="400" Margin="0,0,10,0" />

<Button x:Name="NavigateButton" Content="Navigate" Margin="0,0,10,0" Click="NavigateButton_Click"/>

</StackPanel>

</StackPanel>

<StackPanel x:Name="Section2Input" Visibility="Collapsed">

<TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap">

The demonstration below shows how to load HTML into the WebView control.

Click Load HTML to load the HTML in the text box into the WebView.

</TextBlock>

<TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap" Margin="0,20,0,0" Text=""/>

<StackPanel Orientation="Horizontal" Margin="0,10,0,0">

<Button x:Name="LoadButton2" Content="Load HTML" Margin="0,0,10,0" Click="LoadButton2_Click"/>

</StackPanel>

</StackPanel>

<StackPanel x:Name="Section3Input" Visibility="Collapsed">

<TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap">

This point shows how to call script in the document hosted by a

WebView control. Click Load HTML to load the HTML in the text box, then click

Fire script to call the JavaScript function.

</TextBlock>

<TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap" Margin="0,20,0,0" Text=""/>

<StackPanel Orientation="Horizontal" Margin="0,10,0,0">

<Button x:Name="LoadButton3" Content="Load HTML" Margin="0,0,10,0" Click="LoadButton3_Click"/>

<Button x:Name="ScriptButton3" Content="Fire script" Margin="0,0,10,0" Click="ScriptButton_Click"/>

</StackPanel>

</StackPanel>

<StackPanel x:Name="Section4Input">

<TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap">

This point shows you how to use the WebViewBrush. The WebView

control is hosted in its own HWND, so your app content can not appear on top

of it. To solve this problem, cover the WebView control with a Rectangle and

use the WebViewBrush for the Rectangle.Fill property. This will copy the

WebView contents into the rectangle, which will not cover other app content.

To view the problem, choose an item from the ComboBox below. Click Show

the solution to see how the ComboBox behaves when using the WebViewBrush.

</TextBlock>

<TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap" Margin="0,20,0,0" Text=""/>

<StackPanel Orientation="Horizontal" Margin="0,10,0,0">

<Button x:Name="SolutionButton" Content="Show the solution" Margin="0,0,10,0" Click="SolutionClick"/>

</StackPanel>

</StackPanel>

</StackPanel>

</StackPanel>

</StackPanel>

<TextBlock Text="Output" Margin="0,25,0,20" Style="{StaticResource H2Style}"/>

<StackPanel x:Name="Output" HorizontalAlignment="Left">

<StackPanel x:Name="Section1Output">

<StackPanel Orientation="Vertical">

<Border BorderBrush="#FF707070" BorderThickness="1">

<WebView x:Name="WebView1" Width="900" Height="300" HorizontalAlignment="Left"/>

</Border>

<TextBlock x:Name="Status" Text="Ready" Style="{StaticResource DescriptionTextStyle}" Margin="0,10,0,0"/>

</StackPanel>

</StackPanel>

<Grid x:Name="Section2Output">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="Auto"/>

<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<TextBlock Text="HTML:" Grid.Row="0" Grid.Column="0"/>

<TextBlock Text="WebView:" Grid.Row="0" Grid.Column="1" Margin="10,0,0,0"/>

<TextBox x:Name="HTML2" Grid.Row="1" Width="500" Height="300" TextWrapping="Wrap" AcceptsReturn="True"/>

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

<WebView x:Name="WebView2" Width="500" Height="300"/>

</Border>

</Grid>

<Grid x:Name="Section3Output">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="Auto"/>

<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<TextBlock Text="HTML:" Grid.Row="0" Grid.Column="0"/>

<TextBlock Text="WebView:" Grid.Row="0" Grid.Column="1" Margin="10,0,0,0"/>

<TextBox x:Name="HTML3" Grid.Row="1" Width="500" Height="300" TextWrapping="Wrap" AcceptsReturn="True"/>

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

<WebView x:Name="WebView3" Width="500" Height="300"/>

</Border>

</Grid>

<Grid x:Name="Section4Output">

<StackPanel Orientation="Vertical">

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

</ComboBox>

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

<Grid>

<WebView x:Name="WebView4" Width="1050" Height="300" HorizontalAlignment="Left"/>

<Rectangle x:Name="Rect1" Width="1033" Height="300"/>

</Grid>

</Border>

</StackPanel>

</Grid>

</StackPanel>

</StackPanel>

</ScrollViewer>

</Grid>

</Grid>

</UserControl>

Step 4 : After running this code we get the following output. Here we have to explain the four different points with various functionality.

The demonstration below shows how to load HTML into the WebView control. Click Load HTML to load the HTML in the text box into the WebView.

This point shows how to call the script in the document hosted by a WebView control. Click Load HTML to load the HTML in the text box, then click. Fire script to call the JavaScript function.

This point shows you how to use the WebViewBrush.

output4.1.gif