There are many ways to make your application scalable in Web Browser window and align it in the center. Usually we use two Grid controls to align and panel control (like Canvas) to scale our apps.

Not the best solution

<UserControl … >

    <Grid x:Name="LayoutRoot" Background="White">

        <Grid HorizontalAlignment="Center" VerticalAlignment="Center">

            <Canvas x:Name="scalePanel" VerticalAlignment="Top" HorizontalAlignment="Center">

                …

            </Canvas>

        </Grid>

    </Grid>

</UserControl>

             

The example above usually works but there are better ways. How? Use ViewBox. ViewBox control contains scale mechanisms with some stretching options. So ViewBox together with Grid control is all what we need to align and scale our applications.

Good solution

<UserControl … >

    <Grid x:Name="LayoutRoot" Background="White">

        <Viewbox>

            ...

        </Viewbox>

    </Grid>

</UserControl>

How to find ViewBox control

For those applications created in Silverlight 4, ViewBox is available in plug-in. For applications created in Silverlight 3 you can find it in Microsoft Silverlight Toolkit.

Demo

Let’s create a simple application that will contain: Button, TextBlock and red Rectangle. It will also have some Margin settings. This application won’t be in the center of window and it will not scale.

<UserControl … >

    <Grid x:Name="LayoutRoot">

        <Grid Margin="100, 50, 100, 20">

                <StackPanel Orientation="Horizontal">

                    <Button Width="100" Height="100" Content="test"/>

                    <TextBlock Text="Button" Width="100" Height="100" />

                    <Rectangle Width="100" Height="100" Fill="Red"/>

                </StackPanel>

        </Grid>

</Grid>

</UserControl>

 

Run demo: RUN

But If we use ViewBox control, we will got centered and always scaled application.

   <Grid x:Name="LayoutRoot">

        <Viewbox>

            <Grid Margin="100, 50, 100, 20">

                    <StackPanel Orientation="Horizontal">

                        <Button Width="100" Height="100" Content="test"/>

                        <TextBlock Text="bottom" Width="100" Height="100" />

                        <Rectangle Width="100" Height="100" Fill="Red"/>

                    </StackPanel>

            </Grid>

        </Viewbox>

    </Grid>

Link to application: RUN (try to resize application’s window)

Link to source code: SilverlightCenterApplication.zip

References

• ViewBox for Silverlight 3 http://silverlight.codeplex.com/

 

 Polish version: http://jacekciereszko.pl/2010/05/jak-wysrodkowac-i-skalowac-aplikacje.html

Jacek Ciereszko