Load a Web Page in Windows Store App

Introduction

In this article I will explain how to load any website into our Windows 8 apps. This can be done using the WebView control in a Windows store application. The webview control is a container control that hosts web content. To see how it works use the following steps.

Step 1

Open Visual Studio 2012 RC and click on File -> New -> Project; see:



Step 2

A window will appear; in this, select Windows Store from Visual C# from the left pane and then blank page from the center pane then give the name of your application and then click ok.

Step 3

Write the following code in the MainPage.xaml file:

<Page

    x:Class="App2.MainPage"

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

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

    xmlns:local="using:App2"

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

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

    mc:Ignorable="d">

    <Grid>

        <Grid.Background>

            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                <GradientStop Color="Black"/>

                <GradientStop Color="#FFF1E3B0" Offset="1"/>

            </LinearGradientBrush>

        </Grid.Background>

        <TextBlock Name="text" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="50,50,0,0" Height="50" Width="641" Text="Enter any Site Started with http:// that you want to see in the webview" FontSize="20" Foreground="#FFEEEDF5">           

        </TextBlock>

        <TextBox Name="entersite" Height="50" Width="473" Margin="760,50,133,0" HorizontalAlignment="Center" VerticalAlignment="Top"/>

        <Button Height="50" Width="115" Margin="50,150,0,550" Content="GO" FontSize="25" Click="Button_Click_1"></Button>

        <WebView Name="web" Height="502" Width="996"  Margin="191,140,179,126" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Collapsed"></WebView>

    </Grid>

</Page>

 

Step 4

In the Button click event write the code in the MainPage.xaml.cs file as:
 

namespace App2

{   

    public sealed partial class MainPage : Page

    {

        public MainPage()

        {

            this.InitializeComponent();

        }

        private void Button_Click_1(object sender, RoutedEventArgs e)

        {

            Uri targeturi = new Uri(entersite.Text);

            web.Navigate(targeturi);

            web.Visibility = Visibility.Visible;

           // entersite.Text = " ";

        }

    }

}

 

Step 5

Now to run the application press F5. The screen will look like:

 

When we give the URI of any website in the textbox including the http:// part and then click on the Go button the Paticular site is loaded into the webview as:

 

Now we can see the website in the webview, we can also give another URL for another site and this will open another site as:

Summary

In this article I explained the WebView control of the Windows 8 apps.