Build complex GUI with your PowerShell scripts

Posted by

PowerShell is not a very good scripting language if it comes to building GUIs. But what PowerShell has that other scripting language don’t have is a great compatibility with .NET Framework, and with .NET come great GUI opportunities!

In this case I will use Blend for Visual Studio 2012 to build my GUI with WPF, save it as a .XAML file and use this in PowerShell. And my simple example will just look like this (at the bottom you will find my example)

image

Save the file and locate the .XAML file and put it in a new folder together with a .PS1 file. Like this

image

First we start off with some cleaning in the XAML code, fire up Notepad and open MainWindow.xaml and get rid of these two lines in the top tag.

image

It should look something like this

image

In my file Blend created a <Custom:DataGrid …/> It should only be <DataGrid…/>

Edit the PowerShell file in PowerShell ISE, by right clicking the Example.ps1 and choose Edit or just open the PowerShell ISE from the start menu and open the Example.ps1 from there. I choose to work in PowerShell ISE just because it is built-in, is has snippets, command browser, it is colorful and gives me a lot of tips and tricks for free.

Ok lets start up this GUI with PowerShell with these simple lines.

[string]$scriptPath = split-path $SCRIPT:MyInvocation.MyCommand.Path -parent

# Initialize the Windows Presentation Framework
Add-Type -AssemblyName PresentationFramework

# Get the content from the XAML file
$xaml = [XML](Get-Content “$scriptPath\MainWindow.xaml”)

# Create an object for the XML content
$xamlReader = New-Object System.Xml.XmlNodeReader $xaml

# Load the content so we can start to work with it
$mainform = [Windows.Markup.XamlReader]::Load($xamlReader)

#Put your code here

# Show the form
$mainform.ShowDialog()

Save the file and hit F5 to run the script, and it will look like this

image

To add an event to close the Window I do the following changes

In MainWindow.XAML, I change the last button to this

<Button Content=”CloseName=”btn_Close” HorizontalAlignment=”Left” Margin=”410,161,0,0″ VerticalAlignment=”Top” Width=”75″/>

In Example.PS1, I added this function just before where I show the form

$btn_Close = $mainform.FindName(‘btn_Close’)

$btn_Close.Add_Click({
    $mainform.Close()
})

It looks like this, and when I hit Close the Window will – surprisingly – Close Ler

image

Other events that could be good to have handy are these two, you can find more on MSDN in the WPF/XAML documentation

  • $mainform.Add_Loaded
    • When the form/Window is loaded, you can reset button, text or other stuff
  • $mainform.Add_Closing
    • If you close the form/Window you might want to clean things up, this is where to do this

You will see some more tips on this soon, but for now this should get you going!

Just below you will find my example code, ready to cut and paste

MainWindow.XAML

<Window
        xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
        Title=”MainWindow” Height=”242″ Width=”524″>
    <Grid>
        <Grid HorizontalAlignment=”Left” Height=”192″ Margin=”10,10,0,0″ VerticalAlignment=”Top” Width=”496″>
            <DataGrid HorizontalAlignment=”Left” Margin=”10,10,0,0″ VerticalAlignment=”Top” Height=”146″ Width=”475″>
            </DataGrid>
            <Button Content=”Button” HorizontalAlignment=”Left” Margin=”10,161,0,0″ VerticalAlignment=”Top” Width=”75″/>
            <Button Content=”Button” HorizontalAlignment=”Left” Margin=”90,161,0,0″ VerticalAlignment=”Top” Width=”75″/>
            <Button Content=”Button” HorizontalAlignment=”Left” Margin=”170,161,0,0″ VerticalAlignment=”Top” Width=”75″/>
            <Button Content=”Button” HorizontalAlignment=”Left” Margin=”250,161,0,0″ VerticalAlignment=”Top” Width=”75″/>
            <Button Content=”Button” HorizontalAlignment=”Left” Margin=”330,161,0,0″ VerticalAlignment=”Top” Width=”75″/>
            <Button Content=”Close” Name=”btn_Close” HorizontalAlignment=”Left” Margin=”410,161,0,0″ VerticalAlignment=”Top” Width=”75″/>
        </Grid>
    </Grid>
</Window>

Example.PS1

[string]$scriptPath = split-path $SCRIPT:MyInvocation.MyCommand.Path -parent

# Initialize the Windows Presentation Framework
Add-Type -AssemblyName PresentationFramework

# Get the content from the XAML file
$xaml = [XML](Get-Content “$scriptPath\MainWindow.xaml”)

# Create an object for the XML content
$xamlReader = New-Object System.Xml.XmlNodeReader $xaml

# Load the content so we can start to work with it
$mainform = [Windows.Markup.XamlReader]::Load($xamlReader)

$btn_Close = $mainform.FindName(‘btn_Close’)

$btn_Close.Add_Click({
    $mainform.Close()
})

# Show the form
$mainform.ShowDialog()

Leave a comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.