I am currently working on a Windows 8 Metro/Modern UI application. Right now, I'm working on the interface in Expression Blend for Visual Studio.
My question is this: When sizing UI elements such as grid columns, I can use either pixels, auto, or stars. What is a star in this context? A google search turns up nothing and I haven't found anything in the Windiws 8 developer documentation.
Thank you.
In a grid a * means that it will equally share available space with other * columns (or rows). There are some good WPF examples of how this works here.
From the documentation here:
starSizing
A convention by which you can size rows or columns to take the remaining available space in a Grid. A star sizing always includes the asterisk character (), and optionally precedes the asterisk with an integer value that specifies a weighted factor versus other possible star sizings (for example, 3). For more information about star sizing, see Grid.
In a grid with multiple columns, the * size columns divide up the remaining space. For example assume a 300px wide grid with 3 columns (150px, 120px and 1*).
The calculation is:
remainder = (300 - 150 - 120)
Since the remainder is 30px the 1* column is 30px wide
Now add some columns and modify the widths to (35px, 85px, 2*, 1*, 3*)
Redoing the calculation:
remainder = (300 - 35 - 85)
In this scenario the remainder is 180px, so each * column splits the remaining pixels according to their weighting number.
factor = (180/ (2 + 1 + 3))
factor = 30px
Therefore the 2* column is 60px, the 1* column is 30px and the 3* column is 90px
300 == 35 + 85 + 60 + 30 + 90
Of course the same principles apply for Row sizing.
When the grid is resized the * columns divvy up the new remainder size. But they keep the same size ratio between other * size items. In the example the 3* column will always be 3 times as wide as the 1* column.
