PS C:\>

Starts WPF with PowerShell from scratch - Part 1


In this part you will find some cool links, videos and tutos to learn WPF with PowerShell from scratch.
You will find resources to learn how to use XAML and Powershell with XAML.

According to me, if you want to learn and understand how to create cool GUIs you need to:
- Understand what is XAML
- Understand what is a Control
- Understand the XAML layout
- Understand how works the StackPanel control
- Understand how work all XAML controls
- Learn how to use those controls
- Understand how to bind your XAML and your PS1 files
- Understand how to bind actions from your PS1 with your XAML contols
- Use different actions with your Controls


Understanding XAML
XAML is a markup language, based on XML. It also looks like a bit to HTML.
If you have already used HTML and XML, you will understand easily how to build an XAML file.
XAML is the main part of your GUI, it will contain all your buttons, table, text, images...
It will be used to display the graphic part.

See below some links about XAML
- XAML Overview
- Introduction to XAML


How to edit your XAML ?
There are many ways. In my case I always use Notepad++ and no graphic solution like Visual Studio.
There are some graphics solutions to build your GUI like Visual Studio or KaXaml and probably many others that I don't know. Don't hesitate to tell me if you know others and I will add them in this part.

See below a cool video about how to use KaXaml.




What is a control ?
It's simply something located in your GUI.
It can be for instance a button, a checkbox, a text and whatever else you want to display.


How a control looks like ?
As in XML, your control is a line with an open and close tags.
There are many controls and those mostly used are:
- Button
- TextBox
- Label
- ComboBox
- CheckBox
- DataGrid

For instance see below a simple Button control.

Things to note:
- Do not forget to close your Control <Button></Button> or <Button/>
- XAML is case sensitive, control should be like Button, ComboBox, DataGrid...
Don't forget it when you add your controls, Button or ComboBox and not button or combox 😄


Customize my control
We can customize a control using attributes.
Attributes allows you to give for instance a name to your control, change the size...
Attributes may change, depending of the control, for instance to display something in a Label you have to use the Content attribute, whereas with a TextBox you have to use the Text attribute.

How can I find all attributes ?
In my case, when I want to see properties or events for a specific control, I type the following thing on Google "XAML textbox events" or "XAML Button events" and I go to the Microsoft page.
You will find different option as below
- Properties will be used to change something in your control, as Width, Height, Content...
- Events will be used to manipulate the Control in your code, here in your PS1 file.

We'll see it later, but to use your control with your PS1, the main attribute is the Name, because it's this one that will bind your action between both PS1 and XAML files.

What are the most used attributes ?
- Name: to use your control in your ps1
- Width and Height: To change the size of your control
- IsEnabled: To enable or not your control, if not it'll be grey out.
- Margin: To change the layout of your control
- ForeGround: To change the text color
- BackGround: Tochange the background color
- Content or Text: To display a text
- FontSize: To change the size of your text
And many others...


The StackPanel Control
What is it ?
The StackPanel is for me one of the most important control to learn in XAML.
It allows you to choose the way to display your GUI.
If you want to align your controls, for instance two buttons side by side or one below the other.
Using it you can manage one or a group of controls. You can also choose to hide a group of controls by managing the StackPanel directly.
See here a post I did about it.
See here some other Controls (Grid, DockPanel, Canvas...) to manage the layout of your GUI.


How to use Controls ?
See below a list of some controls and their utility. For choice controls you'll see if they are single or multi choice.
- Button: Simple button
- ComboBox: Use to let the user choose between different options (single)
- CheckBox: Use to let the user choose between different options (multi)
- RadioButton: Use to let the user choose between different options (single)
- TextBox: Use it if you want to let the user type something, for instance his name.
- PasswordBox: Use it if you want to let the user to type a password and replace text by *
- Label: Use it to display a simple text
- DataGrid: Use it to display many things in a table like a list of user with name, firstname, age...
- ListView: Like DataGrid
- ExpandPanel: Use to hide or display some content

See below some cool links to understand how work others controls:
- Built-in controls


Bind your XAML and PS1
Now we have seen how work both XAML and Controls, you have to understand how to bind your PS1 with XAML files.
In my case I procced with two files:
- My_GUI.ps1: for the code part
- My_GUI.XAML: for the graphic part

To bind both files, use the below part.
Assemblies can depend of your project. For instance to add Mahapps theme you'll have to add other specific DLLs (see below).


Add action on a Control
We have binded the PS1 and XAML, but after launching the PS1 it will just display the GUI.
If you click on a Control nothing happens 😞
For that, you have to declare each controls in your PS1 file.

As mentioned above for each control there is an attribute Name, that allows you to manage action on your control.

For instance see below a Button and TextBox controls in my XAML.
In your PS1 you have to declare your controls using the Name attribute as below:
Now you can add an action 😄
For instance to add an action once a button is clicked, you have to use the event Add_Click, as below:
You can find all available events for your control on the Web.

Things to note
You have to add the prefix "add_" on the event you have choosed from the Web.
For instance I have a Button and I want to add an action when the mouse passed over the button, not clicked.
On the Microsoft page you can find the event MouseEnter
To use it in your PS1 you have to use Add_MouseEnter and not only MouseEnter.


Use different actions with your controls
The mostly used action on a Control is the Click or Add_Click for us.

However you can add many other actions depenping of what you want to do, see below some of them.
- Action when the mouse cursor is over the button.
- Action after a right-click on a button: Add_Click
- Action after a left-click on a button: Add_MouseLeftButtonDown
- Action when leaving a button: Add_MouseLeave
- Action when after double-click on a button: Add_MouseDoubleClick
- Action when using the wheel: Add_MouseWheel (🙉Yeah I admit this one is not really useful, but it's just to show you that there are many possibilities).

There are plenty of possibility, I invite you to explore them by yourself.
A very nice tool from Trevor Jones, avalaible here, allows you to find events, properties and methods for a specific controls, see below an overview.


How to run your GUI ?
Ok, now we have both XAML and PS1 files ready.
1 / In order to run your GUI you'll need in your folder:
- Your PS1 file
- Your XAML file
- Your assemblies
- Your resources xml if you use one

2 / Now just run your ps1 file: powershell .\myps1.ps1

Things to note:
- If you are on Windows 7 you may have to run the ps1 file like this: powershell -sta .\myps1.ps1
- You may check also that your files, like assemblies are not in in blocked state. To do that do a right-click on your files and check if there is the part Unblocked.

If you need to unblock all content in a folder, you can use this method.


Cool links 

How to create a GUI
Learning GUI toolmakaking from FoxDeploy
How to create a GUI from Kevin Rahetilahy
Your first WPF window from Trevor Jones
How to build a GUI from Damien Van Robaeys
Adding content to your Window from Trevor Jones

Understanding XAML layout controls
Using Layout controls from Trevor Jones
- https://www.wpftutorial.net/Layout.html

Add themes
How to add a theme from Kevin Rahetilahy
- Add a theme from damien Van Robaeys
Add the Mahapps theme from Damien Van Robaeys

Videos
How to create Metro design GUI (English version)
Create WPF GUI (Videos serie) 

Feel free to contact me if you need help, explanation or if you have some suggestion to add in this post: damien.vanrobaeys@gmail.com

Aucun commentaire