Simplest Web Browser For Windows Store

Introduction

In this article, I will show you how to create the simplest Metro style web browser. I will also show how to use the WebView Control.

This web browser contains the following functions:

1. URL text box
2. GO button
3. Previous and Next Button
4. Home Button
5. Refresh Button

Now I will show you step-by-step how to create your own web browser for Windows Store app.

Procedure:

1. Open Visual Studio.
2. Go to the menu bar and select "File" -> "New" -> "Project..." or simply press "Ctrl+Shift+N".
   
   
   
   
3. You will see a new window; select "Blank App" in the Visual C# templates and select "Blank app (XAML)".
   
4. Now provide the name of the application and location name.
5. Now go to the Solution Explorer and open MainPage.xaml Page and now start to make a webbrowser.
6. For creating a web browser you need to use one main Control called Web View Control.
7. Drag and drop one Web View control on the XAML page and increase or write following code for that:
   

   <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
           <WebView x:Name="WVWebBrowser" HorizontalAlignment="Left" Height="687" Margin="10,71,0,0" VerticalAlignment="Top" Width="1346"/>
   
       </Grid>

8. Now Open to the MainPage.xaml.cs and inside the MainPage() constructor write the following code:
   

   public MainPage()
           {
               this.InitializeComponent();
               WVWebBrowser.Navigate(new Uri("http://www.google.com"));
           }

   Here WVWebBrowser is an object of the WebView Control Class, and Navigate is the Method that Written Type is Void and use arguments as an object of the Uri Class. So by using the "new" keyword we are making the object of the Uri Class and call the parameterized constructor that takes a string in the URL Format. So I have written "http://www.google.com".
   
9. After this if we build the project and run it then on the load time the WebView Object will be navigated to the Google page that is "http://www.google.com" because at load time I am calling the Navigate Method of the WebView class. So the output will be like:
   
   
   
   
10. Now I am stopping the running project and adding one TextBox and Button named "Go".  In the TextBox the user will provide the Uri and when he clicks on the Go button he will be navigate to the new page depending on the Text Box Uri.
    So drag and drop one TextBox and one Button or use the following XAML code for these controls:
    

    <!--TEXT BOX For The Uri-->
    <TextBox Name="tbURL" Text="http://www.google.com"  HorizontalAlignment="Left" Margin="77,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="588"/>
    
    <!--GO Button-->
            <Button Name="btnGo"  Content="GO" HorizontalAlignment="Left" Margin="670,10,0,0" VerticalAlignment="Top"/>

11. After writing the code above double-click on the GO button and fire it's click event, and for the click event of the Go button write the following code:
    

    //GO Button Click Event Code...
            private void btnGo_Click(object sender, RoutedEventArgs e)
            {
                Uri uri = new Uri("http://" + tbURL.Text);
                try
                {
                    WVWebBrowser.Navigate(uri);
                }
                catch (Exception ex)
                {
                    tbURL.Text = "invalid adress !";
                }
            }

12. Now after writing the code above build again and run the application, enter the URL in the text box and click on the GO button. Suppose I write c-sharpcorner in the text box and I click on GO button then:
    
    
    
    After clicking on the GO button the result will be:
    
    
    
    
13. Now in the next step I am creating 3 buttons that are:
    
    HOME (For redirect to Home Page)
    BACK (For going to the Previous Page)
    NEXT (For going to the Next Page)
    Refresh (For Reload again)
    
    
14. So for creating these buttons write the following XAML code.
    

    <!--Back Button-->
           <Button Name="btnBack" Content="BACK" HorizontalAlignment="Left" Margin="10,9,0,0" VerticalAlignment="Top" Width="72" />
    
    <!--Next Button-->
            <Button Name="btnNext" Content="NEXT" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="87,10,0,0" Width="72" />
    
    <!--Home Button-->
            <Button Name="btnHome" Content="HOME" HorizontalAlignment="Left" Margin="815,10,0,0" VerticalAlignment="Top" />
    
    <!--Refresh Button-->
            <Button Name="btnRefresh" Content="Refresh" HorizontalAlignment="Left" Margin="893,10,0,0" VerticalAlignment="Top"/>

15. Now I am creating a list of string types at the class level in which we can save all the states or we can say URLs for saving the next page and the previous page as in the following:
    

    List<string> sitesList = new List<string>();

16. Now for the click event of the back button write the following sample code:
    

    private void btnBack_Click(object sender, RoutedEventArgs e)
            {
                try
                {
                    int i = List_Of_Sites.IndexOf(tbURL.Text) - 1;
                    if (i < 0)
                    {
                        tbURL.Text = List_Of_Sites[List_Of_Sites.Count - 1];
                    }
                    else
                    {
                        tbURL.Text = List_Of_Sites[i];
                    }
    
                    WVWebBrowser.Navigate(new Uri(tbURL.Text));
                    save = tbURL.Text;
                }
                catch (Exception exc) { }
    
            }

17. Code for the NEXT button's click event:
    

    private void btnNext_Click(object sender, RoutedEventArgs e)
            {
                try
                {
                    int i = List_Of_Sites.IndexOf(tbURL.Text) - 1;
                    if (i < 0)
                    {
                        tbURL.Text = List_Of_Sites[List_Of_Sites.Count - 1];
                    }
                    else
                    {
                        tbURL.Text = List_Of_Sites[i];
                    }
    
                    WVWebBrowser.Navigate(new Uri(tbURL.Text));
                }
                catch (Exception exc) { }
            }

18. Code for home button's click events:
    

    private void btnHome_Click(object sender, RoutedEventArgs e)
            {
                WVWebBrowser.Navigate(new Uri("http://www.google.com"));
    
                List_Of_Sites.Add(tbURL.Text);
            }

19. Code for the Refresh button's click event:
    

    private void btnRefresh_Click(object sender, RoutedEventArgs e)
    {
        WVWebBrowser.Navigate(new Uri("http://"+save));
    }

Complete Code

• MainPage.xaml code:
  

  <Page
      x:Class="S_WebBrowser.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:S_WebBrowser"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d">
  
      <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
  
          <WebView x:Name="WVWebBrowser" HorizontalAlignment="Left" Height="711" Margin="10,47,0,0" VerticalAlignment="Top" Width="1346"/>
  
          <TextBox Name="tbURL" Text="http://www.google.com"  HorizontalAlignment="Left" Margin="164,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="588"/>
  
          <Button Name="btnGo"  Content="GO" HorizontalAlignment="Left" Margin="759,10,0,0" VerticalAlignment="Top" Click="btnGo_Click"/>
  
          <Button Name="btnBack" Content="BACK" HorizontalAlignment="Left" Margin="10,9,0,0" VerticalAlignment="Top" Width="72" Click="btnBack_Click"/>
  
          <Button Name="btnNext" Content="NEXT" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="87,10,0,0" Width="72" Click="btnNext_Click"/>
  
          <Button Name="btnHome" Content="HOME" HorizontalAlignment="Left" Margin="815,10,0,0" VerticalAlignment="Top" Click="btnHome_Click"/>
  
          <Button Name="btnRefresh" Content="Refresh" HorizontalAlignment="Left" Margin="893,10,0,0" VerticalAlignment="Top" Click="btnRefresh_Click"/>
  
      </Grid>
  </Page>

•  MainPage.xaml.cs page code:
  

  using System;
  using System.Collections.Generic;
  using System.IO;
  using System.Linq;
  using Windows.Foundation;
  using Windows.Foundation.Collections;
  using Windows.UI.Xaml;
  using Windows.UI.Xaml.Controls;
  using Windows.UI.Xaml.Controls.Primitives;
  using Windows.UI.Xaml.Data;
  using Windows.UI.Xaml.Input;
  using Windows.UI.Xaml.Media;
  using Windows.UI.Xaml.Navigation;
  
  // The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
  
  namespace S_WebBrowser
  {
      public sealed partial class MainPage : Page
      {
          //List which will store history
          List<string> List_Of_Sites = new List<string>();
          //save Present URL
          string save;
          public MainPage()
          {
              this.InitializeComponent();
              WVWebBrowser.Navigate(new Uri("http://www.google.com"));//Default Webpage when user will click
              List_Of_Sites.Add(tbURL.Text);//First time add the URL to the list
              save = "www.google.com";
          }
          protected override void OnNavigatedTo(NavigationEventArgs e)
          {
          }
          //GO Button Click Event Code
          private void btnGo_Click(object sender, RoutedEventArgs e)
          {
              Uri uri = new Uri("http://" + tbURL.Text);
              try
              {
                  WVWebBrowser.Navigate(uri);
                  List_Of_Sites.Add(tbURL.Text);
                  save = tbURL.Text;
              }
              catch (Exception ex)
              {
                  tbURL.Text = "invalid adress !";
              }
          }
  
          //Back Button Code
          private void btnBack_Click(object sender, RoutedEventArgs e)
          {
              try
              {
                  int i = List_Of_Sites.IndexOf(tbURL.Text) - 1;
                  if (i < 0)
                  {
                      tbURL.Text = List_Of_Sites[List_Of_Sites.Count - 1];
                  }
                  else
                  {
                      tbURL.Text = List_Of_Sites[i];
                  }
  
                  WVWebBrowser.Navigate(new Uri(tbURL.Text));
                  save = tbURL.Text;
              }
              catch (Exception exc) { }
  
          }
  
          //Next Button Code
          private void btnNext_Click(object sender, RoutedEventArgs e)
          {
              try
              {
                  int i = List_Of_Sites.IndexOf(tbURL.Text) - 1;
                  if (i < 0)
                  {
                      tbURL.Text = List_Of_Sites[List_Of_Sites.Count - 1];
                  }
                  else
                  {
                      tbURL.Text = List_Of_Sites[i];
                  }
  
                  WVWebBrowser.Navigate(new Uri(tbURL.Text));
              }
              catch (Exception exc) { }
          }
  
          //Home Button Code
          private void btnHome_Click(object sender, RoutedEventArgs e)
          {
              WVWebBrowser.Navigate(new Uri("http://www.google.com"));
  
              List_Of_Sites.Add(tbURL.Text);
          }
  
          //Refresh Button code
          private void btnRefresh_Click(object sender, RoutedEventArgs e)
          {
              WVWebBrowser.Navigate(new Uri("http://"+save));
          }
      }
  }

Now after completion build this web browser and run it; you will get output such as: