| By: Paul S. Cilwa | Viewed: 4/27/2024 Posted: 6/11/2018 |
Page Views: 969 | |
| Topics: #Computers #CustomBrowser #Organica #Programming #VB.NET | |||
| 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 Community Edition 2017 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 with it programatically.)
In preparation for the way we want to use the WebBrowser control, we need to change three other properties to disallow the user from dropping a link onto the browser and opening it that way (we actually will allow this, but we want Organica itself, and not the browser, to respond to the drop). In addition we disable the browser's own context menu and menu shortcut keys.
- AllowWebBrowserDrop = false
- IsWebBrowserContextMenuEnabled = false
- WebBrowserShortcutsEnabled = false
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.
Trial Run
When I click the Start button, my almost completely blank 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:
Frame.vb
Private Sub cmd_Logout_Click(sender As Object, e As EventArgs) _
Handles cmd_Logout.Click
Application.Exit()
End SubWe may as well also implement the window normalizing and maximizing buttons, as well as the underlying function that will make them work.
Frame.vb
Private Sub GoFullScreen(ByVal GoFull As Boolean)
If GoFull Then
cmd_Normal.Enabled = True
cmd_FullScreen.Enabled = False
FormBorderStyle = Windows.Forms.FormBorderStyle.None
WindowState = FormWindowState.Maximized
Else
cmd_Normal.Enabled = False
cmd_FullScreen.Enabled = True
FormBorderStyle = Windows.Forms.FormBorderStyle.Sizable
WindowState = FormWindowState.Normal
End If
End Sub
Private Sub cmd_Normal_Click(sender As Object, e As EventArgs) _
Handles cmd_Normal.Click
GoFullScreen(False)
End Sub
Private Sub cmd_FullScreen_Click(sender As Object, e As EventArgs) _
Handles cmd_FullScreen.Click
GoFullScreen(True)
End SubNow, 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:
Frame.vb
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:
Frame.vb
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 SubNow, 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:
Frame.vb
Public Sub New()
PresetRegistryValues()
InitializeComponent()
GoFullScreen(True)
End SubAs you can see, we invoke PresetRegistryValues() prior to the call to InitializeComponent(). Afterwards, we go ahead and initialize the Normal/FullScreen buttons.
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!