|By: Paul S. Cilwa||Viewed: 7/23/2018
|Topics/Keywords: #Computers #CustomBrowser #Organica #Programming #VB.NET||Page Views: 153|
|How to create a custom web browser with VB.NET.|
Why would anyone want to create a custom browser?
After all, there are already over half-a-dozen, from Microsoft Edge and Google Chrome to Firefox and Safari and even more if you include Android browsers.
But there are reasons. For example, you might want to create an app for just one web site (for example, Netflix) that doesn't allow off-site browsing.
In the case of Organica, we want to use a browser window simply to display data we, ourselves will create programmatically. However, that's too big a chore for one step. And, since we've already created a lovely test web page for Organica, why not start by making a simple browser to display that one page?
Creating The Project
I'm using the free Microsoft Visual Studio Express 2010 to build this project. The name of it is Organica; the application type will be Windows Forms Application. The startup form will be Form1 (created auomatically) but we'll change that shortly. Also, I always provide an icon when I first create the project so I don't forget.
The next step is to open Form1, and to change its name to Frame (which is what I always name my main form). Doing that will automatically update the project Startup Form.
Opening the Frame designer allows us to place controls on it, as well as changing the form name (to "Frame"). We also need to specify the application icon for this form. But we also want to set WindowState to Maximized, and FormBorderStyle to None (to give us a full-screen display).
The Frame form will hold, at its top level, two controls: A WebBrowser, and a ToolStrip. Since the ToolStrip is going to be docked, it will be easier to add it first and set its Dock property to Bottom. Then add the WebBrowser control and set its Dock property to Fill. (I also changed the WebBrowser control name to Canvas. I didn't bother to rename the TabStrip because I won't be working programatically with it.)
On the TabStrip, I specified one button, which I named cmd_Logout and to which I gave a standard control icon. I also put two buttons at the right for Normal and Full Screen displays, with the names cmd_Normal and cmd_FullScreen.
When I click the Start button, my result fills the entire screen:
The buttons do not yet work, of course; the only way to end the program is to stop it from Visual Studio. But that's easy to fix:
Private Sub cmd_Logout_Click(sender As Object, e As EventArgs) Handles cmd_Logout.Click Application.Exit() End Sub
We may as well also implement the window normalizing and maximizing buttons.
Private Sub cmd_Normal_Click(sender As Object, e As EventArgs) Handles cmd_Normal.Click FormBorderStyle = Windows.Forms.FormBorderStyle.Sizable cmd_Normal.Enabled = False cmd_FullScreen.Enabled = True WindowState = FormWindowState.Normal End Sub Private Sub cmd_FullScreen_Click(sender As Object, e As EventArgs) Handles cmd_FullScreen.Click FormBorderStyle = Windows.Forms.FormBorderStyle.None cmd_Normal.Enabled = True cmd_FullScreen.Enabled = False WindowState = FormWindowState.Maximized End Sub
Now, when you Start the app, you can click the Normal button, and then the Maximize button; and, finally, when you click the Logout button, the app stops execution and returns the focus to Visual Studio.
Our next step is to give the browser something to display. That would be the page we designed in the previous step. We do this in the Form Load event:
Private Sub Frame_Load(sender As Object, e As EventArgs) Handles Me.Load Canvas.Navigate("C:\Users\Paul\Desktop 6\Organica Program Files\default.html") End Sub
(Please note that the hard-coded path shown above is unique to my computer; your path will surely be different.)
So what happens when you run the app now? Well, the page attempts to display but it likely won't look right. Why? Because the WebBrowser control defaults to a "compatibility mode" that doesn't understand CSS3, especially the Flexboxes we used.
Obviously we have to change that. But how? The display mode of the WebBrowser control actually comes from a Registry setting. We certainly can't expect an end-user to make changes to their Registry! But, fortunately, we can do it programmatically. Here's a standalone subroutine to do just that:
Private Sub PresetRegistryValues() Const MyKey = "HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION" Const MyValue As Double = &H2AF9 My.Computer.Registry.SetValue(MyKey, "Organica.exe", MyValue, Microsoft.Win32.RegistryValueKind.DWord) My.Computer.Registry.SetValue(MyKey, "Organica.vshost.exe", MyValue, Microsoft.Win32.RegistryValueKind.DWord) End Sub
Now, this code, when called, will cause any WebBrowser used by Organica.exe to come up in its latest mode, which does support CSS3 and Flexboxes. But when to call it? It has to be when the app first starts but before Frame is loaded. The easiest place to do that is in Frame's New method:
Public Sub New() PresetRegistryValues() InitializeComponent() cmd_Normal.Enabled = (Me.WindowState = FormWindowState.Maximized) cmd_FullScreen.Enabled = (Me.WindowState = FormWindowState.Normal) End Sub
As you can see, we invoke PresetRegistryValues() prior to the call to InitializeComponent(). Afterwards, we go ahead and initialize the Normal/FullScreen buttons. (There's no point in allowing the user to try and maximize an already-maximized window.)
So now, when we Start the app, we get to see our Organica screen in all its glory!
We are now ready to add features to our custom browser. Click Next to continue!