Toggling Full Screen Mode

Introduction

Part of the attraction of Silverlight is that it provides a desktop user experience with the reach of a web application. With support for high quality video and data presentation controls, Silverlight applications can be very immersive and so running them in full screen mode can make a lot of sense. Fortunately, this is very straight forward to achieve. Let's have a look at a simple example:

The Code

A simple Grid layout with a button to toggle full screen mode, and a label to display the full screen status.

<UserControl x:Class="FullScreen.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="50"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFFFFFFF" Offset="0"/>
                <GradientStop Color="#FF979797" Offset="1"/>
            </LinearGradientBrush>
        </Grid.Background>
        <Button x:Name="ToggleButton" Content="Toggle Full Screen" Grid.Row="1" Grid.Column="1" Click="ToggleButton_Click"/>
        <TextBlock x:Name="StatusLabel" Grid.Row="2" Grid.Column="1" Text="Full Screen: No" HorizontalAlignment="Center" Padding="10" FontSize="10"></TextBlock>
    </Grid>
</UserControl>

So we can see that toggling between full screen modes is just a case of setting the IsFullScreen property to true or false. However, depending on how you've setup your canvas, you may end up with a lot of empty space as Silverlight doesn't automatically scale your content.

Scaling your application can be achieved fairly easily though. If you look at the top of MainPage.xaml, you'll notice that the Width and Height properties have been purposefully removed from the UserControl element. This has the effect of automatically scaling the Silverlight application to the dimensions of the host. The next step is to make your controls scale. There are two techniques we can apply here:

1. Use a Grid layout and set your column and row widths to "Auto" or "*". These cells will then be scaled proportionately to fill the Grid and therefore the size of the container.
2. Apply a ScaleTransform in the Content_FullScreenChanged to uniformly scale up all your controls in one step.

Conclusion

Providing the user with the option to work in full screen mode can add a lot of value and is very simple to implement. Obviously this isn't recommended for a simple banner add, but for any kind of data, video, or image intensive application, it's worth the small amount of extra effort.