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

    <!--App Orientation States-->

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

 

       <!-- Content -->

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

                 

                  <!-- Section 1 -->

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

                 

                  <!-- Section 2 -->

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

                 

                  <!-- Section 3 -->

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

 

                  <!-- Section 4 -->

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

           

            <!-- Output section -->

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

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

             

              <!-- Section 1-->

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

             

              <!-- Section 2 -->

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

 

            <!-- Section 3 -->

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