Saturday, November 6, 2010

Full Screen Mode In Silverlight

In this post I will show you how to make the silverlight application to run in full screen mode which is provided by the silverlight. You can use the F11 key to run the silverlight application in full screen mode but the toolbar button are visible on the top of screen in case of the F11 key. To go back to the embedded mode you can use the Esc key to exit the full screen mode. But if you want to give this functionality in you application or by using the code here is the code which is used to run in the Full screen mode and also to go back to the embedded mode.
For the code listed in List 1, the code is used written in the click event handler for the toggle button which will check the text based on the IsChecked value, if true mean application is running in embedded mode will changed to the full screen and set the text on the toggle button to Exit Full screen and same is for the when application is running in full screen in the else case.

private void btnFullScreen_Click(object sender, RoutedEventArgs e) { if (btnFullScreen.IsChecked.Value) { Application.Current.Host.Content.IsFullScreen = true; btnFullScreen.Content = "Exit Full Screen"; } else { Application.Current.Host.Content.IsFullScreen = false; btnFullScreen.Content = "Full Screen"; } }
List 1

Now let me tell you about the IsFullScreen property which is of Boolean type and you can see in the code that when set this property to true the application will run in full screen mode and when the IsFullScreen is set to false the application will come back to the embedded mode. The IsFullScreen is property of the Content which is property of the SilverlightHost class. The Content Property also has the FullScreenChanged event which is triggered every time you set the true or false to the IsFullScreen property. This event is helpful when you need to change the size location or some other properties of the controls when application is running in full screen or in embedded mode.

Image 1
Image one shows the effect of running the application in full screen mode when you changed from the embedded to the full screen mode the prompt will display the message to the user to change to the embedded mode you can press Esc key. When running application in full screen mode you have some limitation like the openFileDialog and showFileDialog classes are not supported.
Hope that you get some idea of how to change the full screen and back to the embedded mode by using the code. as It is very easy to change the mode from full screen to embedded and from embedded mode to full screen.

All and any comments / bugs / suggestions are welcomed!

1 comment:

Anonymous said...

Thank you... it helps me alot