Light Up the Web with Silverlight by Jacek Ciereszko

This time I would like to show, how to create full screen in Silverlight 2.0 RTW. Changing application to full screen using only "Application.Current.Host.Content.IsFullScreen" is nothing special because only web browser's window is changing. Our application, have still the same size like before switching to full screen state.

So how to resize application, so it will change simultaneously with web browser? Solution is very simple and all we have to do is use transformations.

Let's start with simple full screen. To switch to full screen mode we have to run only this code:

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

Now, we can add button to invoke code above.

Page.xaml:
<Button Content="Full Screen" Click="Button_Click" />
Page.xaml.cs: 
private void Button_Click(object sender, RoutedEventArgs e)
{
   Application.Current.Host.Content.IsFullScreen = !Application.Current.Host.Content.IsFullScreen;
}
    

If you run your application now, you will see that full screen is already working and you can switch views by pushing the button.

So we have full screen but our application still have the same size.. Let's do something with that.

First we have to add ScaleTransform in Page.xaml code:

 <Grid.RenderTransform>
    <ScaleTransform ScaleX="1" ScaleY="1" x:Name="RootLayoutScaleTransform" />
 </Grid.RenderTransform>

and then some code in Page.xaml.cs. In constructor we have to remember original size

 and add some methods to work with resize and full screen events

Application.Current.Host.Content.Resized += new EventHandler(Content_Resized);
Application.Current.Host.Content.FullScreenChanged += new EventHandler(Content_Resized);
void Content_Resized(object sender, EventArgs e)
{
  double currentWidth = Application.Current.Host.Content.ActualWidth;
  double currentHeight = Application.Current.Host.Content.ActualHeight;
  double uniformScaleAmount = Math.Min((currentWidth / _oldWidth), (currentHeight / _oldHeight));
  RootLayoutScaleTransform.ScaleX = uniformScaleAmount;
  RootLayoutScaleTransform.ScaleY = uniformScaleAmount;
} 
   

FIN, our application is ready! It can resize with Web Browser's window and also when we turn on/off full screen mode.

double currentY = e.GetPosition(null).Y / uniformScaleAmount;
double currentX = e.GetPosition(null).X / uniformScaleAmount;

Constraints

I would like to add, that we have also few constraints. Namely, code above ( ..IsFullScreen != ..IsFullScreen) can be used only in event handler, invoked by user. So we can change application to full screen mode, only by clicking mouse on something or by pressing key on keyboard. This is because of security reasons. None of us, want to see advertisement, created in Silverlight, which will appear all the time and always in full screen mode ;)

Another constrains are keyboard and mouse functionalities in full screen mode, which are reduce to only:

• arrows keys and space bar on keyboard
• mouse buttons (even mouse wheel doesn't work!)

FIN

OK, now we have all that we can imagine. Our solution is simple and it can be easily applied to every application. It will be nice and very useful feature in every project.

Source code:   source code

Working demo:    play demo (Resize window and click on button!)

Working Example (Resize it or turn on Full Screen mode)

You can play it in small window, so nobody will see you in work :]

Resources

• Mike Snows's blog link
  
• Jeff Blankenburg's blog link