Silverlight – Bring Element to Full Screen

Silverlight includes a Full Screen capability where you can view your application in full screen.

This can be done by setting the “IsFullScreen” property to true:

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

It basically turns your Silverlight application into a full screen view.
You can set it back to false in order to exit the full screen mode. In addition, the user can press the escape key and exit the full screen at any time.

Recently I was involved in a project where the following requirement was presented – Bring specific element within the application onto full screen.

The Silverlight application contained several controls, each having its own full screen mode, consider the following UI:

These are two controls which can be practically anything. A real-life example would be media players. Assume you needed to support multi media players and provide the functionality of viewing each in full screen mode.

As mentioning in the beginning, setting the application to full screen is not enough. It will simply display the entire application in full screen, whereas what we really want is to display the control itself onto full screen.

The trivial solution that comes into mind is that when the full screen button is pressed in each control, we adjust the UI to include only that control on top of everything and set the application to be in full screen.

That will work, however, it has its issues:

1. What if we want to package this control? This means we can’t modify the application UI when the button is pressed since we have no idea where and how this control was placed.
   1. In this case, we may think about raising an event and let the application adjust the UI properly. The problem with that is that the application needs to write a lot of code in order to make our full screen feature work.
2. This solution is inherently coupled to the UI. Changes to the UI structure will require changes to that code as well.

Obviously, I wanted to find a better, more encapsulated and reusable solution.
I decided to write a helper class to provide this functionality seamlessly and as simple as:

myControl.ToggleElementFullScreen();

The main design is to move the element to a popup on top of the entire root visual. Obviously, there’s more logic into it such as moving the element, sizing, preserving size-related information since exiting the full screen requires to move the element back to its original state and position. Plus, I had to take care of when the user exits the full screen using the Escape key.

I'm very happy with the final solution, it is clean, easy and reusable and acts very similar to how the ChildWindow works.

I attached the project, make sure you enter the specific post page in order to see the link.

Things to Note

1. My class takes care of placing the element as needed, but it is still your responsibility to make your view stretchable on the entire available size. Otherwise, the element will not fill the entire area.
2. Since the implementation needs to remove the element from where it is placed and move it to my popup, I currently support that the element can be a child/content of the following: Panel, ContentControl, UserControl, and Popup.