Hey people! I was just surfing around the threads here, and found one asking for how to make a Installer-like GUI (http://www.daniweb.com/forums/post1492819.html).
I've replied there, but I think that is nice to have this on our code database.
To start, let’s make na empty Project. Add a TabControl to it. Name it myCoolTabControl. Then, copy into the form load the following code:
Me.myCoolTabControl.Region = New Region(New RectangleF(Me.myCoolWelcomePage.Left, Me.myCoolWelcomePage.Top, Me.myCoolWelcomePage.Width, Me.myCoolWelcomePage.Height))
Once okay, customize the tabs the way you want. Add how many as needed, rename them and make sure you have at least two buttons on each form. Let’s name they as Next and Back.
The Next button code will be:
With myCoolTabControl .SelectedIndex += 1 End With
And the Back button code will be:
With myCoolTabControl .SelectedIndex -= 1 End With
It will be nice disable the next button on the first page and back button on the finished page. Also, remember that you'll need to add this code for each Next/Back button you have on the project. Or, you can add more handlers to the same event:
Private Sub myCoolNextButton_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles myCoolNextButton.Click, myCoolNextButton2.Click, myCoolNextButton3.Click 'one event for multiple buttons '// Next Tab. With myCoolTabControl .SelectedIndex += 1 End With End Sub
Same for the Back Button:
Private Sub myCoolBackButton2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles myCoolBackButton.Click, myCoolBackButton2.Click, myCoolBackButton3.Click '// Previous Tab. With myCoolTabControl .SelectedIndex -= 1 End With End Sub
Let’s create 4 tabs. Welcome, Location, Progress, Finish.
The Welcome tab will have the well-known welcome message. The location will have the also well-known text and a textbox, with a browse button near to it. The code to this page can be something like this:
One textbox, one folder browser dialog and one button
Public Class Form1 Private myCoolSetupLocation As String ‘declares the variable that will be used to store the location Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load Me.myCoolTabControl.Region = New Region(New RectangleF(Me.myCoolWelcomePage.Left, Me.myCoolWelcomePage.Top, Me.myCoolWelcomePage.Width, Me.myCoolWelcomePage.Height)) End Sub Private Sub myCoolBrowseButton_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles myCoolBrowseButton.Click With FolderBrowserDialog1 .RootFolder = Environment.SpecialFolder.MyComputer 'define the folder that will be selected when folderbrowsedialog opens .ShowNewFolderButton = True 'shows a 'new folder button End With If FolderBrowserDialog1.ShowDialog = Windows.Forms.DialogResult.OK Then 'shows the dialog myCoolSetupLocation = FolderBrowserDialog1.SelectedPath 'and, if the result was OK, assign the selected path to our variable myCoolTextbox.Text = myCoolSetupLocation 'shows the selected path on the textbox control End If End Sub End Class
Since the user can also change the textbox text by its own, we need to check if the text into the box is the same as the stored into the variable. So, let’s add this code on the Next button on this page:
If TextBox1.Text <> myCoolSetupLocation Then myCoolSetupLocation = TextBox1.Text End If
This way, it will make sure that the typed path will always be the same as the stored value. You can pre-define a value by setting the myCoolSetupLocation when the form loads. Paste this into the form load sub:
myCoolSetupLocation = Environment.SpecialFolder.ProgramFiles & "\myCoolAppName" myCoolTextbox.Text = myCoolSetupLocation
This way, when you reach the location tab, it will always have a value. One important thing is that, if the variable is empty, the user cannot continue. To do this, we can use the following code:
Private Sub myCoolTextbox _TextChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles myCoolTextbox.TextChanged If myCoolTextbox.Text = "" Then myCoolNextButton2.Enabled = False End If End Sub
Now we can proceed to the progress page.
In this page, you'll need to unpack the data of you app. I really don't know how to do that with embbeding files, so I zip the files and use a library to unzip. I'll not teach on how to do this, since you can get all the answers directly from the developers. Check here: http://dotnetzip.codeplex.com/
There, you can download the code and see some examples on how to use it. I also suggest you to take a look on this particular discussion thread: http://dotnetzip.codeplex.com/discussions/239675
The links posted by Cheeso will explain exactly how to make a working progressbar.
So, on this form, we'll need to add a progressbar and nothing more. Just need to remember that, when the extracting event finish (in case you use the library I suggested), you'll need to add the code to go to the next form.
Since we're doing a test app, add a button to the tab and use the following code:
Private Sub myNotSoCoolNextButton_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles myNotSoCoolNextButton.Click With myCoolTabControl .SelectedIndex += 1 End With End Sub
We finally get to the finish page. There is no much to say. Just add the texts, a checkbox (or a few checkboxes) and a finish button. You decide what checkboxes will do. For example, lets add one that will run the installed app and one that opens a site.
Private Sub myCoolRunCheckbox_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles myCoolRunCheckbox.CheckedChanged If myCoolRunCheckbox.CheckState = CheckState.Checked Then myCoolRunProgramVar = True ElseIf myCoolRunCheckbox.CheckState = CheckState.Unchecked Then myCoolRunProgramVar = False End If End Sub Private Sub myCoolSiteCheckbox_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles myCoolSiteCheckbox.CheckedChanged If myCoolSiteCheckbox.CheckState = CheckState.Checked Then myCoolWebsiteVar = True ElseIf myCoolSiteCheckbox.CheckState = CheckState.Unchecked Then myCoolWebsiteVar = False End If End Sub
Remember to declare the variables!
Private myCoolRunProgramVar As Boolean Private myCoolWebsiteVar As Boolean
The Finish button code will look like:
Private Sub myCoolFinishButton_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles myCoolFinishButton.Click If myCoolRunProgramVar = True Then Process.Start("path to process") End If If myCoolWebsiteVar = True Then Process.Start("http://www.daniweb.com") End If Me.Close() End Sub
Thats it! The UI is done. It is up to you to customize it the way you want. And remember: I only covered the UI part. When installing an program, you need to register it on the uninstall section. You'll also need to write an uninstaller app. You can re-use this code for the uninstaller, just changing a few things.
You can look here: http://social.msdn.microsoft.com/forums/en-US/vbgeneral/thread/98c2da3a-1497-4c24-9d87-f1945f806e47 for some info about uninstall section. You can also look here http://social.msdn.microsoft.com/Forums/en-SG/Vsexpressvb/thread/255841ae-7a18-47dd-913f-69222b068fe4 and here http://www.codeproject.com/KB/vb/registry_with_vb.aspx for more detailed info about managing registry.
The complete code is on the snippet.
You can also download the ready-to-use project below. It has been written using Visual Studio 2010, so it will only open on it. I'm sorry, I cannot provide earlier Visual Studio versions.