Click here to Skip to main content
15,180,555 members
Articles / Web Development / HTML
Article
Posted 16 Jan 2016

Stats

128.4K views
11.4K downloads
31 bookmarked

C# Web Browser

Rate me:
Please Sign up or sign in to vote.
4.33/5 (13 votes)
16 Jan 2016CPOL6 min read
Today, we will create our own web browser(starter) with the web Browser Control in Visual Studio 2015.

Introduction

C# Web Browser actually provides an Internet Explorer control, which has different properties, methods, and events.

Please follow the link to get more ideas about Web Browser Capabilities to a Windows Forms Application, also I would like to suggest overview on Events and Delegates.

Today, we are going to explore those capabilities by creating sample Windows Form application, which has two steps:

  1. First, we will create the application, and
  2. Second/Last, we will deploy it by creating a setup file (using InstallShield 2015)

Let's Create the Application

Ok, let's open Visual Studio 2015(IDE) click : [File > New > Project], the new window will appear like the below image.

Figure: 1.0

Image 1

Click on Windows Form Application and hit "OK" button at the bottom right. After finishing this process, a project with an empty form will be loaded.

Figure: 1.1

Image 2

Next, we will set the properties of the form StartPosition to CenterScreen and then change the WindowState to Maximized.

Now, we need to add ToolStrip control. ToolStrip control provides Windows toolbar controls. Ok, let's go to the Toolbox and in the Menu & Toolbar section, it will appear, drag and drop it into the form.

Figure: 1.2

Image 3

Before we going to the next task, first we need to add some icon to project resources, to do that right click on project name: [ Properties > Resources ] now change the browsing file type to Images from top menu like below image:

Figure: 1.3

Image 4

Now, adding our icons which were pasted in resource folder earlier, browse and import those icons here, which we will use to create our browser control button. Click [ Add Resource > Add Existing File > Browse ].

Figure: 1.4

Image 5

Let's open Form1 now it's time to create some button in ToolStrip control. To add a new button, click on ToolStrip control and click on dropdown icon, then click Button. This is our previous button.

Figure: 1.5

Image 6

A new button is added now in the ToolStrip control, to set the icon right click : [ Button > Set Image ] then select Project resource file, icon will set to the button (our Previous button). Following the same way, let's create another two buttons Home and Next button.

If you want to change the control name, then right click on ToolStrip control and go to properties. In this app, I kept it as it is.

Let's add a comboBox to the ToolStrip control.

Figure: 1.6

Image 7

Now, set the size of the comboBox by going to the properties of the control.

Figure: 1.7

Image 8

Following Fig: 1.5, let's create the next three buttons, Go, Reload and Print button.

We are done with our action button of our browser, now let's focus on the browser page load option. We need to add a web browser control to our form window.

Go to [ ToolBox > Common Controls > WebBrowser ], now drag & drop the web browser control to the form, like below.

Figure: 1.8

Image 9

Now one more thing we need to add into the form is statusStrip. This will show the page load progress while user put URLs and hit the Go button.

Go to [ ToolBox > Menus & ToolBars > StatusStrip] now drag & drop the statusStrip control to the form, like below.

Figure: 1.9

Image 10

We are almost done with the UI Design. We need to add progress bar to the statusStrip control. Right click on statusStrip control and go to [ Properties > Items ] click on Collections a window name Items Collections Editor will appear, now add progress bar and status label here like the below figure:

Figure: 1.10

Image 11

Remove text properties value "toolStripStatusLabel1" from status label, click Ok. Finally, we are done with our UI design,

Now, let’s add some mechanism with this form control and view the website by user request. Double click on Form1 controlBar. It will load Form1_Load method.

C#
private void Form1_Load(object sender, EventArgs e)
{
    toolStripButton1.Enabled = false;
    toolStripButton2.Enabled = false;
}

In this method, the two lines will disable access to the Next & Previous buttons on form startup. Below code sample is the main mechanism to load and display web pages in our web Browser control.

C#
private void myBrowser()
{
    if (toolStripComboBox1.Text != "")
        Url = toolStripComboBox1.Text;
    webBrowser1.Navigate(Url);
    webBrowser1.ProgressChanged += 
    new WebBrowserProgressChangedEventHandler(webpage_ProgressChanged);
    webBrowser1.DocumentTitleChanged += 
    new EventHandler(webpage_DocumentTitleChanged);
    webBrowser1.StatusTextChanged += new EventHandler(webpage_StatusTextChanged);
    webBrowser1.Navigated += new WebBrowserNavigatedEventHandler(webpage_Navigated);
    webBrowser1.DocumentCompleted += 
    new WebBrowserDocumentCompletedEventHandler(webpage_DocumentCompleted);
}

private void webpage_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
    if (webBrowser1.CanGoBack) toolStripButton1.Enabled = true;
    else toolStripButton1.Enabled = false;

    if (webBrowser1.CanGoForward) toolStripButton2.Enabled = true;
    else toolStripButton2.Enabled = false;
    toolStripStatusLabel1.Text = "Done";
}

private void webpage_DocumentTitleChanged(object sender, EventArgs e)
{
    this.Text = webBrowser1.DocumentTitle.ToString();
}

private void webpage_StatusTextChanged(object sender, EventArgs e)
{
    toolStripStatusLabel1.Text = webBrowser1.StatusText;
}

private void webpage_ProgressChanged(object sender, WebBrowserProgressChangedEventArgs e)
{
    toolStripProgressBar1.Maximum = (int)e.MaximumProgress;
    toolStripProgressBar1.Value = ((int)e.CurrentProgress < 0 || 
    (int)e.MaximumProgress < (int)e.CurrentProgress) ? 
    (int)e.MaximumProgress : (int)e.CurrentProgress;
}

private void webpage_Navigated(object sender, WebBrowserNavigatedEventArgs e)
{
    toolStripComboBox1.Text = webBrowser1.Url.ToString();
}

This sample piece of code will reload the webpage while clicking on Reload button.

C#
private void toolStripButton4_Click(object sender, EventArgs e)
{
    webBrowser1.Refresh();
}

This sample piece of code will navigate to forward the webpage while clicking on Forward button.

C#
private void toolStripButton2_Click(object sender, EventArgs e)
{
    webBrowser1.GoForward();
}

This sample piece of code will navigate to backward the webpage while click on Back button

C#
private void toolStripButton1_Click(object sender, EventArgs e)
{
    webBrowser1.GoBack();
}

This sample piece of code will navigate to the Home webpage while clicking on Home button.

C#
private void toolStripButton5_Click(object sender, EventArgs e)
{
    webBrowser1.GoHome();
}

This sample piece of code will Show Print Preview the webpage while clicking on Print button.

C#
private void toolStripButton6_Click(object sender, EventArgs e)
{
    webBrowser1.ShowPrintPreviewDialog();
}

Finally, the combined Class is as follows:

C#
public partial class Form1 : Form
{
    String Url = string.Empty;
    public Form1()
    {
        InitializeComponent();
        Url = "http://www.msn.com";
        myBrowser();
    }

    private void Form1_Load(object sender, EventArgs e)
    {
        toolStripButton1.Enabled = false;
        toolStripButton2.Enabled = false;
    }

    private void toolStripButton3_Click(object sender, EventArgs e)
    {
        myBrowser();
    }

    private void myBrowser()
    {
        if (toolStripComboBox1.Text != "")
            Url = toolStripComboBox1.Text;
        webBrowser1.Navigate(Url);
        webBrowser1.ProgressChanged += 
        new WebBrowserProgressChangedEventHandler(webpage_ProgressChanged);
        webBrowser1.DocumentTitleChanged += new EventHandler(webpage_DocumentTitleChanged);
        webBrowser1.StatusTextChanged += new EventHandler(webpage_StatusTextChanged);
        webBrowser1.Navigated += new WebBrowserNavigatedEventHandler(webpage_Navigated);
        webBrowser1.DocumentCompleted += 
        new WebBrowserDocumentCompletedEventHandler(webpage_DocumentCompleted);
    }

    private void webpage_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
    {
        if (webBrowser1.CanGoBack) toolStripButton1.Enabled = true;
        else toolStripButton1.Enabled = false;

        if (webBrowser1.CanGoForward) toolStripButton2.Enabled = true;
        else toolStripButton2.Enabled = false;
        toolStripStatusLabel1.Text = "Done";
    }

    private void webpage_DocumentTitleChanged(object sender, EventArgs e)
    {
        this.Text = webBrowser1.DocumentTitle.ToString();
    }

    private void webpage_StatusTextChanged(object sender, EventArgs e)
    {
        toolStripStatusLabel1.Text = webBrowser1.StatusText;
    }

    private void webpage_ProgressChanged(object sender, WebBrowserProgressChangedEventArgs e)
    {
        toolStripProgressBar1.Maximum = (int)e.MaximumProgress;
        toolStripProgressBar1.Value = ((int)e.CurrentProgress < 0 || 
        (int)e.MaximumProgress < (int)e.CurrentProgress) ? (int)e.MaximumProgress : (int)e.CurrentProgress;
    }

    private void webpage_Navigated(object sender, WebBrowserNavigatedEventArgs e)
    {
        toolStripComboBox1.Text = webBrowser1.Url.ToString();
    }

    private void toolStripButton4_Click(object sender, EventArgs e)
    {
        webBrowser1.Refresh();
    }

    private void toolStripButton2_Click(object sender, EventArgs e)
    {
        webBrowser1.GoForward();
    }

    private void toolStripButton1_Click(object sender, EventArgs e)
    {
        webBrowser1.GoBack();
    }

    private void toolStripButton5_Click(object sender, EventArgs e)
    {
        webBrowser1.GoHome();
    }

    private void toolStripButton6_Click(object sender, EventArgs e)
    {
        webBrowser1.ShowPrintPreviewDialog();
    }
}

We are done with our Web Browser application, now we will focus on creating a new Setup project to deploy the application to install.

Output

Figure: 1.11

Image 12

Let's Deploy the Application

We need to Install InstallShield, this is a InstallShield Limited Edition for Visual Studio 2015. Get it from here InstallShield 2015.

To deploy the application, we will create a new setup project. Go to Solution Explorer, right click on Solution, add new project. In the Add new project window, browse menu to Other Type Projects

Figure: 1.12

Image 13

It will load Project Assistant window which will guide to create the setup file. Provide the application information in the first tab. After providing all information, let's move to Installation Requirements, we will check yes in software to be installed section (bottom). We will include Microsoft .NET Framework 4.5 Full package.

Figure: 1.13

Image 14

Navigate to next tab which is Application Files. In this section, we will include our project output. To include, please click on Add Project Outputs button. Check primary output like the below figure.

Figure: 1.14

Image 15

Next, we will add application shortcut icons to launch our application. Go to Application Shortcuts and click New and in next popup window, browse for a destination file.

Browse [ProgramsFileFolder] > WebBrowser.Primary output.

Figure: 1.15

Image 16

Rename it and check on [create shortcut on Desktop]. Here you can use a icon file to appear on desktop by checking on [User alternate file icon].

Create another shortcut to create uninstall the application by clicking on [Create an uninstallation shortcut] and rename it.

Next, we have Application Registry tab to create a key in the registry. As this is a sample web browser, we will keep this stage as it is.

In our next tab which is last tab is Installation Interview is to configure and display license agreement dialog.

We are all done. Let's build our application and Install the setup file, right click on Setup project and click Install.

Figure: 1.16

Image 17

Installation steps will appear.

Figure: 1.17

Image 18

Installation completed successfully.

Figure: 1.18

Image 19

Finally, the application shortcut icons.

Figure: 1.19

Image 20

Hope this will help. :)

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author


Comments and Discussions

 
GeneralMy vote of 2 Pin
Muhammed Saraç23-Apr-19 3:21
MemberMuhammed Saraç23-Apr-19 3:21 
GeneralRe: My vote of 2 Pin
OriginalGriff23-Apr-19 3:24
mveOriginalGriff23-Apr-19 3:24 
GeneralRe: My vote of 2 Pin
Muhammed Saraç23-Apr-19 3:39
MemberMuhammed Saraç23-Apr-19 3:39 
GeneralRe: My vote of 2 Pin
OriginalGriff23-Apr-19 3:42
mveOriginalGriff23-Apr-19 3:42 
QuestionHow load webbrowser with ie11 Pin
ttson245-May-18 8:50
Memberttson245-May-18 8:50 
AnswerRe: How load webbrowser with ie11 Pin
bcare8-Nov-19 4:22
Memberbcare8-Nov-19 4:22 
QuestionThis worked for me fine - https://github.com/cefsharp/CefSharp.MinimalExample Pin
Member 1097428921-Dec-17 22:27
MemberMember 1097428921-Dec-17 22:27 
QuestionDoes not work Pin
pbarden1-Oct-17 4:55
Memberpbarden1-Oct-17 4:55 
QuestionSetup1 incompatible on VS2015 Pin
Michael B Pliam7-Nov-16 6:57
MemberMichael B Pliam7-Nov-16 6:57 
GeneralMy vote of 3 Pin
lejuif20-Jan-16 2:40
Memberlejuif20-Jan-16 2:40 
GeneralRe: My vote of 3 Pin
Shekhar Shashangka20-Jan-16 6:26
professionalShekhar Shashangka20-Jan-16 6:26 
Suggestiongood Pin
Ahmed Amer Jaf16-Jan-16 8:56
MemberAhmed Amer Jaf16-Jan-16 8:56 
Good for beginner Wink | ;) , try using another engine.
Awesomium - HTML UI Engine[^]
QuestionGood job , wish you introduce Gecko Engine with full descriptions also... Pin
Member 1037742616-Jan-16 2:54
MemberMember 1037742616-Jan-16 2:54 
AnswerRe: Good job , wish you introduce Gecko Engine with full descriptions also... Pin
Shekhar Shashangka16-Jan-16 5:05
professionalShekhar Shashangka16-Jan-16 5:05 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.