Designing a Flexible User Interface

Microsoft Silverlight will reach end of support after October 2021. Learn more.

This topic describes how to design a user interface that automatically sizes to various screen resolutions. You can use the Grid or StackPanel layout to achieve this. The Canvas layout uses absolute positioning. Because absolute positioning does not consider the size of the window or screen, Grid or StackPanel is often a better choice as the container.

Note:
To get the best window resizing behavior in a browser window, it is generally best to leave the Document Object Model (DOM) width and height properties at 100% and exclude any width or height declarations from the root element of your XAML file or the layout root element.

Note:
For more information about layouts, see Silverlight Layout System.

If the application requires absolute positioning of UI elements, you can design different pages for different screen resolutions or use scaling as an alternative.

Applications that do not require absolute positioning appear correctly on various screen resolutions if you use automatic or proportional sizing of layouts, controls, and any UI elements that they contain.

To use automatic or proportional sizing, you must assign special values to the Height and Width properties. We recommend the following:

• Set the Height and Width of the control or layout to Auto. When these values are used for controls in the Grid layout, the control fills the cell that contains it. Auto sizing is supported for controls and for the Grid and StackPanel layouts.

• For controls that contain text, remove the Height and Width properties, and set the MinWidth or MinHeight properties. This prevents the text from scaling down to a size that is unreadable.

• To set proportional values for the RowDefinition and ColumnDefinition elements in a Grid layout, use relative Height and Width values. For example, to specify that one column is five times wider than another column, use "*" and "5*" for the Width properties in the ColumnDefinition elements.

The following code example shows an example of a Grid layout that scales automatically. In this example, the third row in the Grid is ten times the height of the first row.

In this example, no width is specified for the columns. Therefore, default column widths are used. By default, rows and columns occupy the least amount of space that is required to contain the longest content within any cell that is contained in a given row or column.

<Grid x:Name="LayoutRoot" ShowGridLines="True" Background="White">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="10*" />
    </Grid.RowDefinitions>
</Grid>

The following code example shows various ways to scale controls. You can add this XAML code to the previous Grid example code.

    <!-- Grid layout that has 3 rows and 3 columns. -->
    <!-- Fixed size. -->
    <Button Content="Option '1'" Height="25" Width="75"
        Grid.Column="0" Grid.Row="0" Click="Button_Click"/>
    <!-- Height and width are scaled to Grid cell. -->
    <Button Content="Option '2'" Height="Auto" Width="Auto"
        Grid.Column="1" Grid.Row="0" Click="Button2_Click"/>
    <!-- Minimum height and width are specified to preserve text
       Readability. -->
    <Button Content="Option '3'" MinHeight="20" MinWidth="40"
        Grid.Column="2" Grid.Row="0" Click="Button3_Click"/>
    <!-- Height and width are scaled to the Grid cell. -->
    <Rectangle x:Name ="myRectangle" Fill="Blue" Width="Auto" 
        Height="Auto" Grid.Column="1" Grid.Row="2"/>

See Also

Other Resources

Mobile Platform Design Considerations