PowerShell & WPF: Play with StackPanel

In this post, I will try to show you, how useful and powerfull is the StackPanel in WPF.
This if the first post of my blog series about Powershell & WPF.
My Powershell & WPF posts series will be as below:

- Play with StackPanel
- Play with DataGrid
- Hide or Display controls

- Play with Grid

- Populate a ComboBox

- Populate a DataGrid

- Easily build a top menu (menuitem)

- Easily build a Status Bar

- Create your own Prerequisites part

What is a StackPanel ?

The StackPanel allows you to gather a group of controls. For instance all the below controls, GroupBox, Label, TextBox and button are located in a main StackPanel. 

See below the code used to display the controls.
The StackPanel works by adding and modifying attributes like Margin, Orientation, Visibility, Height, Width...
!!! Be careful, XAML is case-sensitive.

How to use it ?

HorizontalAlignment
One of the great advantage of the StackPanel is the possibility to move directly all controls by modifying just the StackPanel part.

For instance, in the below GUI our controls are located just above the title bar and at the center of the GUI.

If we want to move all those controls at the left, you just need to use the attribute HorizontalAlignment. In our example, the value is setted to Center. Now change it to Left.

See below the result. 

All our controls have moved in one action. That's nice.
If we change the attribute to Right, guess what ? All controls will moved all together.

Margin

Now let's add a short space between the title bar and the controls. For that we will use the Margin control.

The Margin control is composed of 4 values, see below.

So to add a space from the top, let's modify the second value from 0 to 30.

See below the result.

Ok, Ok that's cool. But if I want to display my labels one below the other how can I do ?

Very, very easy!!! As above, just one attribute to do that.

Orientation

This is for me one of the main attribute to understand if you want to play with your GUI.
Two values are available, Horizontal and Vertical.

In our example, as you may noticed our two labels are located on beside the other, so it's Horizontal.

If you want to display the second label below the first, just change the Orientation attribute from Horizontal to Vertical.

See below the result.

Visibility

As mentioned above, the StackPanel allows you to gather a group of controls. 

Sometimes in GUI it's useful to display or hide many controls depending of some conditions. For that you just need to use the Visibility attribute. 

Three values are available, see below:

- Visibility="Visible"

- Visibility="Hidden"

- Visibility="Collapsed"

The Visible value is used to display the control.
The Hidden value is used to hide the control but will keep space between the element.
The Collapsed value is used to hid the control and also hide space between controls.

So how to hide or display a control wih Powershell ? It's really pretty simple.
For the next example we'll use the below GUI.

What do we want ?
When use click on the Visible button all controls have to be displayed.
When user click on the Hidden button all controls have to be hidden.
We will see also the different ways to hide a control.
Let's start.
See below the XAML code used to display this GUI.
To display our controls from the PS1 file, we will set the attribute Visibility to each controls with the value Visible, as below:

To hide our controls, we will use the value Hidden or Collapsed, as below:
See the result below:

To understand the difference between values Hidden and Collapsed, we will change the scenario, we want to just display the last button and textbox.
See below the result we will have if we use the Hidden value.

You may notice that there is a big space. That"s the difference, the Hidden control keeps space of other controls.
Now if we use the Collapsed value, see below the result.

That's a bit better but there is still a little space. That's because we use the Visibility attribute to each controls. 
In my case I also used it directly on the StackPanel Tag. 
For that we will have to add a name to our Stackpanel, as below.
See below the PS1 code to display just the last control parts, called Third.
See below the result.

Here below the difference between hidden an collapsed in action.

As you may guess, it could be also easy to display directly all our controls by adding all of them in a parent controls and hide this StackPanel.

StackPanel in action

Imagine that we need to create an application that will looks like as below:

The question you should ask yourself, is how to create it in order to manage it easily. 
It should contain the less possible position attributes and you need to play with the Orientation attribute, Vertical and Horizontal.
In my case, I always draw my GUI firstly on a paper to imagine how to proceed.
Then I open my Notepad++ and create my GUI.
In my opinion a good way to create this kind of GUI should be as below:

See below the XAML code to do that
See below how will looks the GUI