Page 1 of 1

Extending the WebBrowser 3 Part Tutorial on Extending the WebBrowser

#1 gbertoli3  Icon User is offline

  • DIC at Heart + Code
  • member icon

Reputation: 40
  • View blog
  • Posts: 1,162
  • Joined: 23-June 08

Posted 14 August 2008 - 09:32 PM

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
Posted Image
Make sure that you dock it to the top
Posted Image

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)



Is This A Good Question/Topic? 1
  • +

Replies To: Extending the WebBrowser

#2 Guest_rkopiec*


Reputation:

Posted 17 February 2010 - 01:49 PM

Yo, listen. How would i go about doing this in c# WPF?
There is simply no showfiledialogue thingy, and da rest don work in c# wpf either.
Can you help? :bananaman: :genius:
Was This Post Helpful? 0

#3 Guest_nssltd*


Reputation:

Posted 22 February 2010 - 08:32 AM

Hey awesome tutorial but i was wondering if i could have some help doing this with tabcontrol. i can get the tabcontrol to navigatr, GoHome, Forward and back and all that. but when i put in the loading bar and status strip i keep getting errors.
here is my code so far for the browser
    namespace XP2
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void button2_Click(object sender, EventArgs e)
        {
            ((WebBrowser)(this.tabControl1.SelectedTab.Controls[0])).GoForward();
           
        }

        private void button1_Click(object sender, EventArgs e)
        {
            ((WebBrowser)(this.tabControl1.SelectedTab.Controls[0])).GoBack();
           
        }

        private void button3_Click(object sender, EventArgs e)
        {
            ((WebBrowser)(this.tabControl1.SelectedTab.Controls[0])).Navigate(this.comboBox1.Text);
           
        }

        private void menuStrip1_ItemClicked(object sender, ToolStripItemClickedEventArgs e)
        {

        }

        private void Form1_Load(object sender, EventArgs e)
        {
            TabControl tab = new TabControl();
            WebBrowser web = new WebBrowser();
            TabPage page = new TabPage();
            web.Dock = DockStyle.Fill;
            page.Controls.Add(web);
            this.tabControl1.TabPages.Add(page);
            this.tabControl1.SelectTab(page);
            web.GoHome();
            
        }

     
        
        private void bookmarksToolStripMenuItem_Click(object sender, EventArgs e)
        {
              Favourites fav = new Favourites();
            fav.urlTxt.Text = ((WebBrowser)(this.tabControl1.SelectedTab.Controls[0])).Url.ToString();
            fav.StartPosition = FormStartPosition.CenterParent;
            fav.Show();
        }

        private void button4_Click(object sender, EventArgs e)
        {
            TabPage tab = new TabPage();
            WebBrowser Browser = new WebBrowser();
           
            tabControl1.TabPages.Add("Blank::Tab");
            tabControl1.SelectTab(tab);
            Browser.Name = "Web Browser";
            Browser.Dock = DockStyle.Fill;
            tabControl1.SelectedTab.Controls.Add(Browser);
           
            
            ((WebBrowser)(tabControl1.SelectedTab.Controls[0])).GoHome();
        }

        private void timer1_Tick(object sender, EventArgs e)
        {
            toolStripStatusLabel1.Text = ((WebBrowser)(tabControl1.SelectedTab.Controls[0])).StatusText;
        }

        private void comboBox1_SelectedIndexChanged(object sender, EventArgs e)
        {
            
        }
    }
} 
the toolstrip label wont display the progress so i need help with that neither will the loading bar i would be extremely greatful for any help.
Also if possible could you help me by showing me how to get the tab text to say the page title, Like when you log onto google your tab will say " Google " thanks in advance
Was This Post Helpful? 0

#4 kotinkarwak  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 25-March 11

Posted 27 March 2011 - 09:35 AM

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

Was This Post Helpful? 0
  • +
  • -

#5 SimonYaxley  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 1
  • Joined: 12-March 13

Posted 12 March 2013 - 03:14 AM

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);


Was This Post Helpful? 1
  • +
  • -

Page 1 of 1