Working On WebView Component in Windows Application

Introduction

WebView is a component which is used for rendering a web page in a Mobile Phone or Desktops.

Background

The following are the important steps to be followed.

Step 1

Open Visual Studio 2013 (till Visual Studio 2015).

Step 2

In Visual Studio, click New Project option.

Step 3

In the New Project wizard, select Windows universal blank application and give the project name as Webview.

Step 4

Choose the Minimum Windows 10 SDK Version as Windows 10 Build 10240 and click Ok.

Step 5

Once the project is loaded completely, then open the MainPage.Xaml from Solution Explorer.

Step 6

From the toolbar, select Webview, Textbox and button as shown below.

Using the Code

Now give name for button, Textbox and Webview as shown in the given code.

MainPage.xaml

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <WebView x:Name="Webview" HorizontalAlignment="Left" Height="584" 
         Margin="10,126,0,0" VerticalAlignment="Top" Width="1260"/>
        <TextBox x:Name="textBox" HorizontalAlignment="Left" Margin="388,32,0,0" 
         TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Height="45" 
         Width="428" InputScope="Url"/>
        <Button x:Name="button" Content="Search" HorizontalAlignment="Left" 
         Margin="845,38,0,0" VerticalAlignment="Top" Click="button_Click"/>
    </Grid>

MainPage.Xaml.cs

Write the following code in the search button event.

String URL = textBox.Text;
Webview.Navigate(new Uri(URL, UriKind.Absolute));

Step 7

Once the coding is completed, then click debug option and don't forget to verify Debug architecture as X86.

The output is as shown below:

It navigates to codeproject.com: