Sizing in Silverlight – Pixels and Stars

SLLogoWords

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.

GridProportionalSpacing

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

About Jesse Liberty

Jesse Liberty is an independent consultant and programmer with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP, Microsoft MVP and Telerik MVP.
This entry was posted in z Silverlight Archives. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *