What is the stellar dimension in Expression Blend?

Question

I am currently working on a Windows 8 Metro / Modern UI application. Right now, I'm working on an interface in Expression Blend for Visual Studio.

My question is this: when setting up user interface elements, such as grid columns, I can use either pixels, or cars, or stars. What is a star in this context? A Google search did not appear, and I did not find anything in the Windiws 8 developer documentation.

Thanks.

Answer 1

In a grid, a * means that it will equally share the available space with other columns * (or rows). There are some good WPF examples of how this works here .

From the documentation here :

starSizing

The agreement by which you can resize the rows or columns of the remaining free space in the grid. A star calibration always includes an asterisk () and does not necessarily precede an asterisk with an integer value that determines a weighted coefficient compared to other possible stellar values ​​(for example, 3). For more information on star size, see Grid.

Answer 2

In a grid with multiple columns, * size columns divide the remaining space. For example, suppose a grid is 300 pixels wide with three columns (150 pixels, 120 pixels, and 1 *).

Calculation:

 remainder = (300 - 150 - 120) 

Since the remainder is 30px, the 1 * column has a width of 30px

Now add some columns and change the width to (35px, 85px, 2 *, 1 *, 3 *)

Recalculation:

 remainder = (300 - 35 - 85) 

In this case, the remainder is 180px, so each column * divides the remaining pixels according to their weight number.

 factor = (180/ (2 + 1 + 3)) factor = 30px 

Therefore, column 2 * is 60px, column 1 * is 30px, and column 3 * is 90px

 300 == 35 + 85 + 60 + 30 + 90 

Of course, the same principles apply to row size.

When the grid changes, the columns * separate the new remainder size. But they retain the same size ratio between other elements * size. In this example, a 3 * column will always be 3 times wider than a 1 * column.