Grid issues

Nov 13, 2013 at 4:19 PM
I tried to use the help command from another post here, but the examples and help files are fairly useless to me as a beginner. Can anyone explain to me what the numbers mean/do in the following code:
New-Grid -Row 0 __-Rows Auto,5,Auto,5,Auto,5,Auto__  __-Columns Auto,5,Auto,10,Auto,5,Auto,5,Auto,5,Auto,5,Auto,5,Auto,5,Auto__ -Children
I'm trying to make a small form that has a Label, and then an ellipse that is either red, yellow, or green in the next column, and then a button following that, Basically something like:


But i cannot seem to figure out what the 7 numbers after -Rows mean, nor the 17 entries after -Columns. I've tried playing with the numbers to watch what changes, but just as i think I have it, everything goes sideways and I'm lost again. I appreciate all the examples out there, but could really use some help that explains what each line of the example does. To me it feels like staring at the source code for Gimp and having the example say "Here's how you draw a line..."
Nov 14, 2013 at 7:11 PM
Edited Nov 14, 2013 at 10:54 PM
EDIT: This is mostly covered in the ShowUI Tutorial Walk-through, have you seen that?

WPF Grids are ... special, so we have special code for working with them.

Basically, when you specify -Rows or -Columns for a Grid, you can specify either a count (which will result in a bunch of evenly spaced rows/columns), or a size.
When you pass a comma-separated list to -Rows you're specifying the height of the rows, and when you pass one to -Columns, you're specifying the width of the columns (in order). That height is either a number (in WPF's "device independent" pixels), or "Auto" which basically means make it as small as you can and still fit the contents, or a * which means "use up all the space" ... or a number AND a star, which allows you to proportionally use up all the space.

Of course, the results depend partly on what you put in the space. Most WPF controls will just use up all the space that's available, so for instance, if we put buttons in there, they'll grow to fill the space. In this example you can see that the last two buttons proportionally use up whatever space is available:
New-Grid -columns 25, 25, 10*, 20* { button; button -column 1; button -column 2; button -column 3 } -MinWidth 200 -MinHeight 50 -Show

Note that when you make columns in your grid, you have to specify the -Column parameter for anything that you want to put in anything other than the first (0) column, and ditto for Rows with the -row parameter: the value defaults to 0 (which is the first row/column), but if you want it anywhere else you have to specify it.

For what it's worth, you can do most of this stuff easier with other layout panels that flow, so you don't have to keep track in your head of which column you're on.
For instance, you could use nested stack panels, and just alternate the orientation of the stack:
New-StackPanel -Orientation Vertical { 
    foreach($color in "Red","Green","Blue") {
        New-StackPanel -Orientation Horizontal { 
            New-label $color -minwidth 50
            New-ellipse -Width 20 -Height 20 -Fill $color
            New-button $color -Margin "10,0,0,0" -minwidth 75
} -show

Don't ask me why I used blue instead of yellow in my example, oh well :-P
Marked as answer by Jaykul on 11/14/2013 at 2:54 PM