[gbertoli3]

This is a three Part tutorial on Extending your WebBrowser.


Part 1

In this tutorial I will show you how to extend your webBrowser. If you have not yet read my original tutorial on Creating a WebBrowser then click here.

Ok now that we have a WebBrowser we will extend it.

First we will need to add a MenuStrip

Make sure that you dock it to the top


Now we will add some items to the MenuStrip. The first Item will be File. After you have created the File menu add 3 menu items. The 3 items are Open, Save, and Exit. Now the second item we will add to the MenuStrip is the View menu. Now add a menu item Source.

Now double click on the open menu item to get to it's Click() event. Now enter this code

//Declare openFileDailog as a new OpenFileDialog
OpenFileDialog openFileDialog = new OpenFileDialog();
//Set the FileName to nothing
openFileDialog.FileName = "";
//Set the Filter
openFileDialog.Filter = "Webpages|*.html|All Files|*.*";
//Set the Title to Open Webpage
openFileDialog.Title = "Open Webpage";
if (openFileDialog.ShowDialog(this) == DialogResult.OK)
{
//Set the DocumentText to the text of file we just opened
webBrowser.DocumentText = System.IO.File.ReadAllText(openFileDialog.FileName);
}

Now that we have the Open menu item done we can move onto the Save menu item.
Double Click on the Save menu item to get to it's Click() event, and enter this code

//Show the Save Dialog
webBrowser.ShowSaveAsDialog();

Now go to the Close menu item's Click() event and type

//Close the Form
Close();

We are now done with the file menu and moving on to the View menu.

Go to the Source menu item's Click() event and type this code

//Declare sourceForm as a new Form
Form sourceForm = new Form();
//Declare sourceCode as a new TextBox
TextBox sourceCode = new TextBox();
//Fill the TextBox throughout the form
sourceCode.Dock = DockStyle.Fill;
//Allow the TextBox to contain more than one line
sourceCode.Multiline = true;
//Have both scrollbars appear on the TextBox
sourceCode.ScrollBars = ScrollBars.Both;
//Set the width of the form to 450
sourceForm.Width = 450;
//Set the height of the form to 350
sourceForm.Height = 350;
//Set the start Position
sourceForm.StartPosition = FormStartPosition.CenterParent;
//Do not show the Icon
sourceForm.ShowIcon = false;
//Show in the Taskbar
sourceForm.ShowInTaskbar = true;
//Set the text of the form to Source Code for and the URL
sourceForm.Text = "Source Code for " + webBrowser.Url;
//Set the text of sourceCode to the DocumentText of webBrowser
sourceCode.Text = webBrowser.DocumentText;
//Add the sourceCode TextBox to the form
sourceForm.Controls.Add(sourceCode);
//Show the sourceForm
sourceForm.Show(this);

Finished!

Now you can run your form and have fun!
Don't forget I will be coming out with more tutorials on Extending Your WebBrowser.


Part 2

In this tutorial I will show you how to extend your WebBrowser even more.

To begin we will add 3 more menu items to our File menu. The items are Print, Print Preview, and Properties
Once you have created the Print, Print Preview, and Properties menu items go to the Print menu item's Click() event and type

webBrowser.ShowPrintDialog();
[/code

Next go to the Print Preview menu item's Click() event and type
[code]

webBrowser.ShowPrintPreviewDialog();

After that go to the Properties menu item's Click() event and type

webBrowser.ShowPropertiesDialog();

Now we will add 5 more menu items to the View menu. They are [i]Back, Forward, Home, Refresh, and Stop[i].
Go to the Back menu item's Click() event and type webBrowser.GoBack();
Go to the Forward menu item's Click() event and type webBrowser.GoForward();
Go to the Home menu item's Click() event and type webBrowser.GoHome();
Go to the Refresh menu item's Click() event and type webBrowser.Refresh();
Go to the Stop menu item's Click() event and type webBrowser.Stop();

Now we will move on to adding shortcut keys to menu item's.
For the Open menu item go to it's properties and scroll down to where it says ShortcutKeys, change it to Ctrl+O.
For the Save menu item go to it's properties and scroll down to where it says ShortcutKeys, change it to Ctrl+S.
For the Print menu item go to it's properties and scroll down to where it says ShortcutKeys, change it to Ctrl+P.
For the Print Preview menu item go to it's properties and scroll down to where it says ShortcutKeys, change it to Ctrl+Shift+P.
For the Properties menu item go to it's properties and scroll down to where it says ShortcutKeys, change it to Alt+P.
For the Back menu item go to it's properties and scroll down to where it says ShortcutKeys, change it to Alt+Left.
For the Forward menu item go to it's properties and scroll down to where it says ShortcutKeys, change it to Alt+Right.
For the Home menu item go to it's properties and scroll down to where it says ShortcutKeys, change it to Alt+H.
For the Refresh menu item go to it's properties and scroll down to where it says ShortcutKeys, change it to F5.
For the Stop menu item go to it's properties and scroll down to where it says ShortcutKeys, change it to Alt+S.
For the Source menu item go to it's properties and scroll down to where it says ShortcutKeys, change it to Ctrl+U.


Now that we have added ShortcutKeys to most of the menu items, we can add some images.
If you want the images that I used download and unzip the attachment. The attachment also includes the project.

Now Run the Form and Have Fun!


Part 3


In this tutorial I will show you how to Extend your WebBrowser even further then it's current state.

Now we can begin

First drag a StatusStrip onto your form. Then right click on the webBrowser and select Bring to Front.
Now add a statusLabel to the StatusStrip by clicking on the small arrow. When you click on the small arrow you will see a hidden menu pop up. Name the statusLabel status. Change the text of our newly created label to status

Now go to the webBrowser's Navigated() event and type

			status.Text = e.Url.ToString();

Now add a progressBar to the Status strip by clicking the arrow again to show the hidden menu.
Name this progressBar.

Now go to the webBrowser's ProgressChanged() event and type

			progressBar.Value = (int)e.CurrentProgress;

Now we will add a Title to the Form

Go to the webBrowser's Navigated() event again and type this underneath the previous text we typed in

			this.Text = webBrowser.DocumentTitle + " - Web Browser";
			progressBar.Visible = false;

Finished!

Now run your form and have fun!

Attached File(s)

•  WebBrowserTutorial_Parts_1_2___3.zip (132.76K)
  Number of downloads: 1846

[kotinkarwak]

gbertoli3,
Please check the code in the supplied tutorial zip. The following error is being shown when I try and run the app.
This is same error when I did create the webApp working through the code in VS2010 Express. Your file was also converted without any errors but both cases, I am getting same error.

System.ArgumentOutOfRangeException was unhandled by user code
  Message=Value of '150' is not valid for 'Value'. 'Value' should be between 'minimum' and 'maximum'.
Parameter name: Value
  Source=System.Windows.Forms
  ParamName=Value
  StackTrace:
       at System.Windows.Forms.ProgressBar.set_Value(Int32 value)
       at System.Windows.Forms.ToolStripProgressBar.set_Value(Int32 value)
       at WebBrowserTutorial.Form1.webBrowser_ProgressChanged(Object sender, WebBrowserProgressChangedEventArgs e) in C:\Users\bawaba\Downloads\Visual Studio 2010 Express resources and tutorials\WebBrowserTutorial\Form1.cs:line 141
       at System.Windows.Forms.WebBrowser.onprogressChanged(WebBrowserProgressChangedEventArgs e)
       at System.Windows.Forms.WebBrowser.WebBrowserEvent.ProgressChange(Int32 progress, Int32 progressMax)
  InnerException: 

reported for this portion of the code

private void webBrowser_ProgressChanged(object sender, WebBrowserProgressChangedEventArgs e)
{
       progressBar.Value = (int)e.CurrentProgress;
}

This post has been edited by tlhIn`toq: 25 March 2013 - 07:39 AM
Reason for edit:: code tags added

[SimonYaxley]

I had the same issue with the progress bar. I found this solution that worked for me:

progressBar.Maximum = (int) e.MaximumProgress;
progressBar.Value = ((int) e.CurrentProgress < 0 || (int) e.MaximumProgress < (int)e.CurrentProgress ? (int) e.MaximumProgress: (int) e.CurrentProgress);