Monday 30 May 2016

Powershell_WPF - Part I - How to create a GUI

This is the first part of a series of tutorial that I’m going to write about powershell and WPF. How to create a GUI, apply a theme, manage event and more subjects... 
In this first post, I’m going to explain how to create a simple GUI using powershell and xaml. 

You can create a GUI in powershell in two different ways.
  • First is using the System.Windows.Forms
  • And second is System.Windows.Controls 
In this tutorial, I will use the latter one. 
It’s because, writing and editing with the first one is really a burden (not to say a pain in the ***J). You need to place each element one by one and later if you need to modify the interface, you will be in trouble because you’ll be forced to touch all the other elements as well. Quite troublesome isn’t? I advise you not to dive in for your GUI in powershell.

Enough talking, let’s begin:

What do you need?
  • Powershell ISE: if you begin in powershell. It’s installed by default in your computer. Just type Powershell ISE from the Start Menu and launch it.
  • Visual studio: I used visual studio Community 2015 for this article. You can download it on Microsoft website.
  • Notepad++ or a simple text editor with syntax highlighting features.

Step 1

Open visual studio and create a new project. You should see this window appear:

1. Select Templates > visual C# in the left column 
2. Select WPF Application in the middle window 
3. Leave the rest with default value and click OK.

Visual Studio is going to do his stuff and then you’ll have this new window:

It’s here that we’re going to add our element and edit our GUI. Pull down the ToolBox menu at your left, you will see all commonly used WPF controls listed such as TextBox, Label, Image, Button …

Add all elements you need to the Window in the middle and design every element to your taste. I placed basic elements on mine: an Image, a TextBox and a Label.

When you are satisfied with the result, we can go to the next step.

Step 2

You’ll see that you have a window called XAML like shown in the picture below. It’s there that we’re going to get our XAML code. Copy its content to a new text file (*.txt) and change the file extension to XAML (*.xaml).

You can now close visual Studio as we don’t need it anymore. Open the new XAML file that we have just created in Notepad++, and delete the emphasized lines

So that we only have these lines left:

Now Create a new text file and save it with a *.ps1 extension. We should have two files in our directory now. The xaml we just edited (I called MainWindow.xaml) and a Powershell file (I called MainForm.ps1)

Right click on MainForm.ps1 and select "Edit", this will open Powershell ISE. After that, paste these few lines:

Save the file and then launch your code:

Our window is quite ugly for now. Let’s make some customization: add some picture, change color , … J

Open your XamlFile in your favorite text editor and, proceed like this:

Add Background="Cornflowerblue" in Window tag
This will fill the background form with a type of blue color

Add Source=".\dev4sys.png" in the Image tag
Note that ”.\” means the file is in the current directory. So if your picture is in child folder called “toto”; you need to write “.\toto\mypicture.ext”.

Edit Text="This is the second textbox" in TextBox tag
It will change the TextBox content with "This is second a textBox".
Important: Parameters in Xaml are case sensitive: If you write "text" instead of "Text", it will not work, so pay attention in your tags when editing.

All those modifications can be done from within visual studio but it’s better to go through this if you want to have the hang of it. So, here is the new output:

Well, it’s still ugly I admit but not as much as before.

This ends this first part, I hope you liked it. Next time I’m going to show you how to apply a theme on our GUI. Thanks for reading and see you soon.


0 commentaires:

Post a Comment

Popular Posts

Join us on Facebook


Contact Form


Email *

Message *