How To Create a Tabbed GUI in PowerShellHow To Create a Tabbed GUI in PowerShell

Recently, I have been busy developing a new line-of-business application for my organization, designed to replace three applications that no longer meet my needs. This new application will help me manage several tasks, including my writing assignments, speeches, video projects, and more.

Initially, I imagined it as an "assignment pipeline," where I could input all pertinent details for my assignments and track each through the creation, submission, and billing stages. I needed a tabbed interface to support this workflow, each tab representing a distinct phase in the pipeline.

Building an application from scratch is complicated, but I have found that starting with the user interface has been the easiest approach. Designing the UI first has helped me decide on the features I want to include and visualize how the application will work, even though the design isn't finalized yet.

While I can't share my current prototype for security and privacy reasons, Figure 1 shows a screenshot from one of my early proof-of-concept tests.

Figure 1. This screenshot displays an early proof-of-concept test of the tabbed interface.

As shown in the figure, my test GUI includes a menu bar at the top, a series of tabs just below it, and individual GUI objects (a button in this case) on each tab.

Related:PowerShell Remoting in a Workgroup Environment: A Step-by-Step Guide

I have previously written articles on ITPro Today about creating different types of PowerShell menus, but I haven't yet discussed tabbed interfaces. So, let's walk through how tabs work.

For reference, here are a few articles where I cover PowerShell menus:

Creating a Basic Tabbed Interface in PowerShell

To get started, here is the code for a simple tabbed interface:

Add-Type -AssemblyName System.Windows.Forms

# Create the Form
$Form = New-Object System.Windows.Forms.Form
$Form.Text = "PowerShell Tabbed GUI"
$Form.Size = New-Object System.Drawing.Size(600,400)

# Create TabControl
$TabControl = New-Object System.Windows.Forms.TabControl
$TabControl.Size = New-Object System.Drawing.Size(580, 320)
$TabControl.Location = New-Object System.Drawing.Point(10, 30)

# Add Tab1
$Tab1 = New-Object System.Windows.Forms.TabPage
$Tab1.Text = "First Tab"

# Add Tab2
$Tab2 = New-Object System.Windows.Forms.TabPage
$Tab2.Text = "Second Tab"

# Add Tab3
$Tab3 = New-Object System.Windows.Forms.TabPage
$Tab3.Text = "Third Tab"

# Add Tabs to TabControl
$TabControl.TabPages.Add($Tab1)
$TabControl.TabPages.Add($Tab2)
$TabControl.TabPages.Add($Tab3)

# Add TabControl to the Form
$Form.Controls.Add($TabControl)

# Show the form
$Form.ShowDialog()

Understanding the Code: Step by Step

The script begins by loading the necessary .NET assembly for Windows Form, which allows you to create GUI elements like windows, buttons, and tabs.

Step 1: Create the main window

The first significant object we build is the form, the application's main window.

# Create the Form
$Form = New-Object System.Windows.Forms.Form
$Form.Text = "PowerShell Tabbed GUI"
$Form.Size = New-Object System.Drawing.Size(600,400)    

Here, we set its dimensions to 600 x 500 pixels.

Step 2: Add the TabControl container

Next, the script creates a TabControl object. Consider this object a container that will hold all the tabs (even though we haven't made the tabs yet).

# Create TabControl
$TabControl = New-Object System.Windows.Forms.TabControl
$TabControl.Size = New-Object System.Drawing.Size(580, 320)
$TabControl.Location = New-Object System.Drawing.Point(10, 30)    

There are two important points to note about the TabControl:

Related:Dot Sourcing in PowerShell: How to Simplify Large Scripts

Step 3: Define the tabs

Once the TabControl is created, we set up individual TabPage objects—one for each tab—and set their display names.

# Add Tab1
$Tab1 = New-Object System.Windows.Forms.TabPage
$Tab1.Text = "First Tab"

# Add Tab2
$Tab2 = New-Object System.Windows.Forms.TabPage
$Tab2.Text = "Second Tab"

# Add Tab3
$Tab3 = New-Object System.Windows.Forms.TabPage
$Tab3.Text = "Third Tab"

Step 4: Assemble the pieces

Finally, we add the tabs to the TabControl and the TabControl to the form.

# Add Tabs to TabControl
$TabControl.TabPages.Add($Tab1)
$TabControl.TabPages.Add($Tab2)
$TabControl.TabPages.Add($Tab3)

# Add TabControl to the Form
$Form.Controls.Add($TabControl)  

The script's last line displays the form on the screen.

# Show the form
$Form.ShowDialog()    

The resulting interface is shown in Figure 2.

Figure 2. This is the interface created by the code above.

Adding a Button to a Specific Tab

As you can see, it's easy to create a tabbed GUI. But how do you place a GUI object onto a specific tab? To demonstrate, let's add an Exit button to the middle tab. Here is a block of code for such a button:

# Create a button inside the first tab
$ExitButton = New-Object System.Windows.Forms.Button
$ExitButton.Text = "Exit"
$ExitButton.Size = New-Object System.Drawing.Size(100, 30)
$ExitButton.Location = New-Object System.Drawing.Point(10, 70)
$ExitButton.Add_Click({
   $Form.Close()
   })

$Tab1.Controls.Add($ExitButton)    

This code is nearly identical to how you would create an Exit button for a non-tabbed GUI. The only key difference is in the final line.

Normally, when adding a GUI object to a form, you would write a line like this:

$Form.Controls.Add($ExitButton)

However, since we are adding this button to a specific tab—not directly to the form—we reference the tab's variable instead:

Related:Simplify PowerShell Output With the Expression Command

$Tab1.Controls.Add($ExitButton)

The resulting interface is shown in Figure 3.

Figure 3. I have added a button to one of the tabs.