Building a PowerShell GUI (Part 3)

If you would like to read the other parts in this article series please go to:

In the previous article in this series, I showed you a technique for creating a very primitive GUI for PowerShell. In this article, I want to build on what I have already shown you by introducing some new techniques.

Before I jump in and start modifying code, I want to quickly review where things stand. In the previous article, I created three files. The first of these files is called C:\Scripts\LoadDialog.ps1. This is the file that does all of the heavy lifting and converts our code to a graphical format. We won’t need to modify this code as we modify our GUI. The code used in LoadDialog.ps1 is:

[CmdletBinding()]

Param(

[Parameter(Mandatory=$True,Position=1)]

[string]$XamlPath

)

 

[xml]$Global:xmlWPF = Get-Content -Path $XamlPath

 

#Add WPF and Windows Forms assemblies

try{

Add-Type -AssemblyName PresentationCore,PresentationFramework,WindowsBase,system.windows.forms

} catch {

Throw “Failed to load Windows Presentation Framework assemblies.”

}

 

#Create the XAML reader using a new XML node reader

$Global:xamGUI = [Windows.Markup.XamlReader]::Load((new-object System.Xml.XmlNodeReader $xmlWPF))

 

#Create hooks to each named object in the XAML

$xmlWPF.SelectNodes(“//*[@Name]”) | %{

Set-Variable -Name ($_.Name) -Value $xamGUI.FindName($_.Name) -Scope Global

}

The second file that we created was C:\Forms\MyForm.xaml. This is the file that formats the GUI interface. In this case, the file was used to create a window, a text label, and a button. The code used is:

<Window

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”

Title=”MainWindow” Height=”350″ Width=”525″>

<Grid>

<Button Name=”MyButton” Content=”Button” HorizontalAlignment=”Left” Margin=”249,132,0,0″ VerticalAlignment=”Top” Width=”75″/>

<Label Name=”MyLabel” Content=”Label” HorizontalAlignment=”Left” Margin=”88,73,0,0″ VerticalAlignment=”Top”/>

 

</Grid>

</Window>

The third file that we created in the previous article was C:\Scripts\HelloWorld.ps1. As it stands right now, this file doesn’t do much. It calls the LoadDialog.ps1 script, which as you will recall handles the graphic processing. The file also defines what should happen when a button is clicked, and it loads the MyForm.XAML file, which renders the GUI interface. If we were creating a real world PowerShell script, the HelloWorld.ps1 script (or whatever you choose to call this script) would contain all of the logic, while MyForm.xaml instructs PowerShell in how to format the output.

So now that I have spent some time reviewing the previously written code and the overall structure that is being used, it’s time to have some fun. I want to start out by showing you how to add a splash of color. As it stands right now, the GUI that has been created is functional, but is almost as dull to look at as a text based interface.

As you may recall from the previous article, I used Visual Studio to create the layout for the GUI interface. We can use Visual Studio to add extra visual elements and to add color. The really nice thing about Visual Studio however, is that you can use it to get a feel for how to accomplish a task and then you can go off and write your own code based on what you have learned in the Visual Studio environment. Let me show you what I mean.

If you look at Figure A, you will see a screen capture that is somewhat similar to one that I used in the last article. To get this screen capture, I opened Visual Studio, started a new WPF project, opened the toolbar, and dragged a button to the main window. I didn’t write any code whatsoever, and yet Visual Studio automatically created a block of code (shown at the bottom of the screen. In the last article, we made some minor modifications to the code and used it as the basis for the MyForm.XAML file.

Image
Figure A: Visual Studio lets you take a drag and drop approach to user interface creation.

What I didn’t show you in the last article is that Visual Studio allows you to do more than just drag interface elements into a window. You can add attributes to those elements. You can for example, change the size, border, text color, and background color of the button.

You could make such modifications simply by writing some code. Any new code that you write would be rendered in the main window. If you aren’t completely comfortable with writing XAML code from scratch however, you can do what I like to call “fill in the blank programming”.

When you select the button within the main window, the interface’s lower, right pane lets you add attributes to the button. You might have noticed in the previous figure for example, that you can add a tool tip or change the cursor’s appearance. But what about color? If you expand the Brush section, you will have the ability to define the color of the button’s background, text, border, etc. You can see some of these options in Figure B.

Image
Figure B: You can define the button’s color.

If you look at Figure C for example, you can see that I have created a blue button with white text and a black border. More importantly however, these actions have caused the block of code to be updated to reflect my changes, as shown in Figure D. I could use this code as is, or I could apply Visual Studio’s code modifications to an XAML file of my own.

Image
Figure C: I have changed the button’s appearance by adding color.

Image
Figure D: Visual Studio has updated the code to match my changes.

It is important to remember that I selected the button prior to making any modifications. By doing so, the attribute modifications were applied to the button, as opposed to being applied to something else. So what if we wanted to modify the window instead?

Setting the window’s attributes is just as easy as setting the attributes for a button. The trick is to select the window instead of selecting the button. After doing so, you can apply attributes to the window in exactly the same way that you would apply attributes to a button. Once again, the code is updated to reflect your changes. If you look at Figure E for example, you will see that I have changed the window’s color and Visual Studio has added a tag named Grid Background that defines the window’s background color.

Image
Figure E: I have changed the background color for the window.

So what if I wanted to apply these changes to the MyForms.XAML file that I talked about at the beginning of this article? Well, it’s easy enough to do. All I have to do is copy the attributes that Visual Studio added to the sample code and then apply those attributes to the MyForms.XAML file. You can see the modified code below. If you are unclear about the modifications, you can compare this code to the code that I listed at the beginning of the article.

<Window

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”

Title=”MainWindow” Height=”350″ Width=”525″>

<Grid Background=”#FFB7C9C4″>

<Button Name=”MyButton” Content=”Button” HorizontalAlignment=”Left” Margin=”249,132,0,0″ VerticalAlignment=”Top” Width=”75″ Background=”#FF057DF5″ Foreground=”#FFFDF9F9″ BorderBrush=”#FF171717″/>

<Label Name=”MyLabel” Content=”Label” HorizontalAlignment=”Left” Margin=”88,73,0,0″ VerticalAlignment=”Top”/>

 

</Grid>

</Window>

You can see the modified Hello World script’s output in Figure F.

Image
Figure F: This is a color version of the Hello World script.

Conclusion

As you can see, there is a lot of room for creativity when building PowerShell GUI interfaces. In the next article, I will start adding more PowerShell code and demonstrate how to make the script do something useful.

2 thoughts on “Building a PowerShell GUI (Part 3)”

  1. Thanks — but your text is very hard to read. Don’t you have Syntax highlighting available in your blog editor?

    1. Hello Tobias – You have a valid point there. We will look into the syntax highlighting options to make the scripts more readable.

Leave a Comment

Your email address will not be published.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Scroll to Top