Creating a installer-like UI

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.

Two checkboxes

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.