resolution issue in silverlight

Question

HI, i need to have a resolution independant UI in silverlight application. Will it support implicitly or should it be taken care in code behind doing ScaleTransform ?

will it support multiple browsers as well ?

Thanks in advance.

Answer 1

You can use The ViewBox control in the Silverlight Toolkit to do the scale transforming. It will work on all supported browsers.

You can also set the UserControl width and height to Auto (or remove them) and then have your UI stretch (but not resize) to rules that you set up (typically with a Grid control).

Answer 2

Okay, I figured I will outline all the methods that you can make use of the implicit methods that Silverlight allow for specifying sizing.

If you define anything using the Stretch setting for VerticalAlignment option in a control:

<TextBox Grid.Column="0" Grid.Row="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>

The UIElement will stretch to take up all the space available to it in its parent control. Another setting such as this is to do something like defining a grid column width or row height like this:

<ColumnDefinition Width="*"/>

This will take up all the space available on the screen.

You can grow columns and rows of the grid in a ratio form:

<RowDefinition Height="3*"/> <RowDefinition Height="2*"/>

This will grow the height of the first row by 3px for each 2px that the second one grows.

Then you can have options such as Auto

<ColumnDefinition Width="Auto"/>

This will grow the UIElement according to size requirements. If a child of the element requires more size, the element will take up more screen space.

And finally:

<TextBox Grid.Column="1" Grid.Row="0" Height="100" MinWidth="200" MaxWidth="400" x:Name="text"/>

These are fixed values and ensures that given any resolution that the element will not take up more than 400px in width but no less than 200px. It also indicates that the height of the element should always be 100px. This is useful for elements such as buttons etc. which you do not want to grow or shrink as the resolution changes.

Finally, you will probably want to wrap a ScrollViewer around the whole thing, just to ensure that elements off the screen can be scrolled to. This can happen when your view requires more space than available on the screen or have elements set to Auto.