Tip/Trick: Supporting Full Screen Mode with Silverlight

One of the nice features that Silverlight supports is the ability to go "full screen" and effectively take over the entire screen of a computer (hiding everything else from sight - including the browser frame).  This can be very useful when building immersive UI experiences, games, rich video players, etc.

For a nice example of this feature in action, make sure to check out the Fox Movies Sample on www.silverlight.net:

Once the page loads and the movie starts playing, double-click on the video surface in the middle to switch into full-screen mode (note: the screen-shot above is not in full-screen but rather browser mode).  You can then hit the escape key to switch back into normal browser viewing.

How to Implement Full Screen Mode with Silverlight 1.1 using .NET

One of the questions I've seen a few people ask is "how can you implement full screen-mode when building Silverlight applications using .NET?"  The good news is that the answer is actually pretty easy:

1) First add an input driven event handler to your application (for example: a mouse down or keyboard event handler).  For security reasons Silverlight doesn't allow developers to switch an application into full-screen mode on first application load (you don't want an application to spoof you).  So you'll instead need to trigger full-screen mode in response to a user action.

2) Within your input event handler set the BrowserHost.IsFullScreen property to true (note: the BrowserHost class lives within the System.Windows.Interop namespace).  This will cause Silverlight to switch into full screen mode.  Setting this property to false will return it back to normal browser mode.

Simple Full Screen Mode Sample

You can download a simple Silverlight full screen-mode sample I put together written in C# here. 

When you run the sample it will load a super simple Silverlight application within the browser and display a text message prompting you to click it to switch into full-screen mode:

If you click the "Click for Full Screen" text, the application will switch into full-screen mode - which will hide everything else running on the system and take over the entire screen:

When you switch into full-screen mode, Silverlight will display a user message blurb that will pop-up on the screen for a few seconds and instruct the user that they can press the escape key to switch back into browser mode.  After a few seconds this message will disappear and only your content will be visible.  In my sample above I also allow the user to click on the "Click to Return to Browser" text and switch back into browser mode as well.

Walkthrough the Simple Full Screen Mode Code

The code to implement the above sample is pretty simple. 

To begin with we can open and edit the root .XAML file for the application, and add a UI element to it that we want to use to trigger the full-screen mode.  In the sample above I used a <TextBlock> control that I named "MyMessage".  Below is all of the XAML for the entire application:

The below screen-shot shows the code-behind for the .XAML file above - and contains all of the code for the entire application:

Within the application's Page_Loaded() event handler above I am wiring up two event handlers: 

MyMessage_MouseLeftButtonDown - This event handler will execute anytime a user clicks on the TextBlock message control I added into my XAML file.  Within this event handler I'm simply toggling the BrowserHost.IsFullScreen property to true or false depending on whether or not it is already in full screen mode.

BrowserHost_FullScreenChange - This event handler will execute anytime Silverlight switches between full screen and browser mode.  It provides a good place to add logic to update the UI when this happens.  In the example above I am changing the text on the TextBlock control.  I could also have optionally resized controls and/or moved them around the screen to new coordinate positions. Currently the Silverlight 1.1 Alpha doesn't have layout manager support, so controls won't automatically re-position unless you write code to manage this yourself (don't worry - layout manager controls for Silverlight like in the desktop WPF version are coming). 

In addition to the IsFullScreen property, BrowserHost class has a number of additional properties and events that are very useful:

The ActualHeight and ActualWidth properties are particularly useful to lookup the screen dimensions when you switch into full-screen mode - which you can then use when positioning and scaling your UI controls on the page.

Summary

Supporting full-screen mode within Silverlight applications is pretty easy to enable, and offers the ability to provide a nice, immersive user experience. 

To learn more about Silverlight, please read my comprehensive Silverlight announcement post as well as visit the www.silverlight.net community site.

To watch me walkthrough building a Silverlight application from scratch using .NET and Visual Studio "Orcas", please watch this video here.

Hope this helps,

Scott

20 Comments

  • Great tip. Even though this is a sample, it's the best streaming trailer I've ever seen on the net. Awesome quality! Can't wait to build something interesting using this.

  • Hi,

    is there any particular reason you used the ?: syntax over
    BrowserHost.IsFullscreen = !BrowserHost.IsFullscreen;
    ?

    Regards,
    Paul

  • The more I am reading about silver light The more I am loving it. Also when is the next version of beta releasing, and will it support windows 2000- That is a very important requiremetnt as I can still see many people using that

  • Hi Paul,

    Yeah - I probably should have just used that approach. I origionally was going for super easy to explain (for people who don't know C#) and so had a standard if/else block - but then shortened it to use the ? : syntax so that it wasn't as many lines. I probably should have just shortened it further. ;-)

    Thanks,

    Scott

  • Hi Vikram,

    Glad you are liking Silverlight. :-)

    We are planning on supporting Windows 2000 in the future. It probably won't be with the next beta - but we will before 1.1 ships.

    Thanks,

    Scott

  • Hi Scott,

    Thanks for another excellent post. I gotta ask, do you prefer FireFox over IE7? Be honest, please.

    Regards,
    Josh

  • Isn't this a security risk? It wouldn't be hard to convince a user to click something in order to go full screen and spoof them. It's also inconsistent with the proven IE-hosted .NET controls which in the internet zone get security bubbles on pop up windows. This full screen ability effectively gives pop up windows with no warnings. The range of 'safe critical' APIs in silverlight 1.1 are consistent with the APIs allowed for IE-hosted .NET controls, so it's odd that this isn't.

    I'm guessing your security chaps maybe haven't looked at this yet because it's alpha?

  • Very nice, excellent quality!!

    btw, I was viewing the trailing initially on my 2nd monitor. When I clicked to go fullscreen it jumps to the first monitor, not sure if that's 'expected' or not.

  • Thanks for the code, it'll be useful.

    I didn't have such a great viewing experience. Has this thing been slashdotted or what's going on?

  • I second Max Christian's security risk question. Although full screen is really nice for the presentation aspect, I can see it being used for less-than-noble purposes.

  • Great ,do you like Firefox than IE?

  • Hi Max/Dean,

    >> Regarding potential security risk

    When in full-screen mode, with no shell showing, you can use the mouse on the canvas provided by the application, but can't enter keystrokes with the keyboard. This is designed to avoid someone spoofing passwords or behavior on the user.

    Hope this helps,

    Scott

  • "For security reasons please enter your password using the on-screen keyboard. This is to prevent your keystrokes being logged..."

    Also, don't users who can't physically use a keyboard routinesly enter their password using a pointing device?

  • really, its fantastic to learn silverlight. And also the article is very easy and enough for those who started just now. I am really impressed.

    Keep it up.

  • Hello,

    I was wondering why you decided to show the message about hitting esc to exit full screen mode. The latest Flash version does the same, but Windows Media Player has never done this. Was it based on usability tests? What was the problem people had when you didn't show that message?

    Thanks!

  • Hi Scott,
    Nice to know that MS is making whole thing really exciting and easy for we developers.
    I feel blessed that I chose MS.NET as my technology platform.
    But I will feel more oblige if you explain me the reasons,the silverlight doesn't support all types of media formats like mpeg,flv or avi...that we can hook up through other media controls.Is there any workaround to support these kind of media types in silverlight?

    Thanx

  • Hi Bhaskar,

    Silverlight supports playing VC-1, WMV, MP3 and WMA content. It doesn't support arbitrary codecs since those get complicated from a licensing perspective (Microsoft needs to pay the owners of those formats royalties), and they also dramatically increase the size of the download (which we want to keep small to enable really easy deployment).

    We are, though, shipping Expression Media Encoder - which will have support for taking all of the formats you listed above and converting them into file-formats that Silverlight supports.

    Hope this helps,

    Scott

  • The Fantastic Four/Fox Movies sample works exactly how I want, with the player controls also going fullscreen but the .Net Futures asp:media control only makes the video fullscreen, not the controls or chapter selector.

    I would like use the asp.net media control if possible but I can't figure out how to get the playercontrols to work in fullscreen like in the Fox sample. Any pointers?

  • The one thing I do not like about this is IsFullScreen instead of FullScreen. For most of the .Net Framework classes (just checked with reflector) members named "Is.." are either read-only properties or methods and this is a guideline we re following in our code as well.

  • Hi Scott, there is a bug when using multi monitor. When I set a Silverlight app to full screen it will always be opend full screen on the primary monitor.

    Regards,
    Michael

Comments have been disabled for this content.