Full Screen Applications in Silverlight 2.0

In this article we will see how to set our Silverlight applications to run in full screen mode.

 

Silverlight applications can be set to run in full screen mode only in response to a user initiated action. The application cannot be set to full screen without user interaction.

 

We will use the application developed in the article Hello Silverlight to demonstrate the full screen setting in Silverlight.

 

Our aim is to set the application to run in full screen mode when the Hello button is clicked. The application will be set to full screen mode and then continue to display the animated text message.

 

In the event handler for the Hello button, we add the following line of code.

 

App.Current.Host.Content.IsFullScreen = true;

 

The application will now take up the full screen mode when the Hello button is clicked and then the animation will be displayed.

 

At the time when the application toggles in to full screen, a message is displayed to the user "Press ESC to exit full screen mode". Note: This message cannot be customized for security reasons. Also, in full screen mode, most of the keyboard events are disabled by the system.

 

 

Image: User Message when the application goes to full screen mode.

 

The following options are available for moving out of full screen mode:

 

1. The user presses the ESC or Alt+F4 key
2. When the full screen application loses focus (eg. Switching tasks using ALT+TAB or the task manager)
3. Setting the IsFullScreen property to false in code. 

To complete our sample code, we also provide a button to allow the user to toggle out of/in to the full screen mode.

 

In the event handler for the button, we add the following line of code:

 

App.Current.Host.Content.IsFullScreen = !App.Current.Host.Content.IsFullScreen;

 

Here is the complete code for the sample

 

HelloSilverlight.xaml

 

<UserControl x:Class="SilverlightApplication1.HelloSilverlight" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  Width="400" Height="300">

<StackPanel x:Name="mainPanel">

<StackPanel.Resources>

<Storyboard x:Name="sbAnim">

<DoubleAnimation Storyboard.TargetName="tbkHello" Storyboard.TargetProperty="Opacity"

From="0.0" To="1.0" Duration="0:0:3"></DoubleAnimation>

<DoubleAnimation Storyboard.TargetName="tfm_ScaleXYtxbAnim"

Storyboard.TargetProperty="ScaleX" From="1.0" To="3.0" Duration="0:0:3" />

<DoubleAnimation Storyboard.TargetName="tfm_ScaleXYtxbAnim"

Storyboard.TargetProperty="ScaleY" From="1.0" To="3.0" Duration="0:0:3" />

</Storyboard>

</StackPanel.Resources>

<TextBlock x:Name="tbkTitle" FontFamily="Verdana" FontSize="20" TextDecorations="underline">Hello Silverlight Application <LineBreak></LineBreak></TextBlock>

<Button x:Name="btnToggleFullScreen" Content="Toggle Screen" Width="100" Click="btnToggleFullScreen_Click"></Button>

<Button x:Name="btnStartAnim" Click="btnStartAnim_Click" Content="Hello" Width="100" ></Button>

<TextBlock x:Name="tbkHello" FontFamily="Verdana" FontSize="32" Opacity="0.0">Hello Silverlight

<TextBlock.Foreground>

<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">

<GradientStop Color="Violet" Offset="0.0" />

<GradientStop Color="Indigo" Offset="0.15" />

<GradientStop Color="Blue" Offset="0.3" />

<GradientStop Color="Green" Offset="0.45" />

<GradientStop Color="Yellow" Offset="0.6" />

<GradientStop Color="Orange" Offset="0.75" />

<GradientStop Color="Red" Offset="1" />

</LinearGradientBrush>

</TextBlock.Foreground>

<TextBlock.RenderTransform>

<ScaleTransform ScaleX="3.0" ScaleY="3.0" x:Name="tfm_ScaleXYtxbAnim"/>

</TextBlock.RenderTransform>

</TextBlock>

</StackPanel>

</UserControl>

 

HelloSilverlight.xaml.cs

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

 

namespace SilverlightApplication1

{

public partial class HelloSilverlight : UserControl

{

public HelloSilverlight()

{

InitializeComponent();

}

 

private void btnStartAnim_Click(object sender, RoutedEventArgs e)

{

App.Current.Host.Content.IsFullScreen = true;

sbAnim.Begin();

}

 

private void btnToggleFullScreen_Click(object sender, RoutedEventArgs e)

{

App.Current.Host.Content.IsFullScreen = !App.Current.Host.Content.IsFullScreen;

}

}

}

 

Conclusion

 

In this article, we took a look in to the full screen mode settings for Silverlight 2.0.