Tuesday, October 21, 2008

Sizing in Silverlight – Pixels and Stars

by jesseliberty via Jesse Liberty - Silverlight Geek on 10/21/2008 10:45:33 PM

Virtually all measurements (width, height, etc.) are measured in Pixels in Silverlight… except when they're not.  

Pixels

When you are creating a shape or setting a margin, or filing in the width or height of a control the implicit unit is pixel.  Thus,

<Button  Content="Button" Width="100" />
<CheckBox  Content="CheckBox" Height="20" Width="75"/>
<StackPanel Orientation="Horizontal" >
    <RadioButton Height="29" Width="106" Content="RadioButton1" />
    <RadioButton Height="29" Width="136" Content="RadioButton2" />
</StackPanel>
<ListBox Width="100" Height="100">
</ListBox>
<Slider Width="250" Height="25"/>
<swc:Calendar Height="150" Width="200" />

All the measurements here are pixels, from the width of the button to the height of the Calendar.

Proportional (Star) Sizing

There are two ways to set the height of a grid's row or the width of a grid's column. One is to use absolute sizing, and thus pixels; the other is to use proportional sizing. When you create a pair of rows by clicking on the margin in Blend, the default is not to create two rows with absolute sizes, but rather two rows whose size is defined relative to one another.  This is indicated in the art board with open locks and in the Xaml with asterisks after the height values.

When row and height values are expressed using star sizing, the unit of measure is not pixels; they are proportional values. Thus, Blend has indicated that the top row is to be allocated 25% of the total height and the bottom row 75%

If you click on both locks, you’ll change over to absolute heights, the locks will close, and the Heights will become 120 and 360 (no asterisks) respectively; now measured in pixels, but in the same proportions.

Pop Quiz

One of these things is not like the others:

<Grid.RowDefinitions>
    <RowDefinition Height="0.25*" />
    <RowDefinition Height="0.75*" />
</Grid.RowDefinitions>

<Grid.RowDefinitions>
    <RowDefinition Height="100*" />
    <RowDefinition Height="300*" />
</Grid.RowDefinitions>

<Grid.RowDefinitions>
    <RowDefinition Height="100" />
    <RowDefinition Height="300" />
</Grid.RowDefinitions>

-jesse