Full screen mode for Silverlight apps

A Web application will resemble more to a desktop software if it is displayed in full screen rather than inside the browser.

Entering full screen

The FullScreen property displays an ActiveX control in full screen. This property applies to the <div> tag which we defined as container in our examples, and which is followed by the CreateObject() constructor.
When an interface is presented in full screen, one returns to the embedded mode by pressing the escape key.

Click on the following image to see it in full screen:

The XAML code

<Rectangle 
  Height="240" 
  Width="320" 
  Stroke="Black" 
  StrokeThickness="1"
  MouseLeftButtonDown = "enlarge"	
 >     

The full XAML code.

One assign to the MouseLeftButtonDown event the JavaScript function "enlarge".

The Javascript code

To access the control, it is necessary to have a JavaScript variable who represents it. One makes use of this line which follows the call of the CreateObject) constructor. Our variable is named "application".

var application = document.getElementById("myControl");

The agControl1 argument is the identifier given to the ActiveX control as second parameter of the function CreateObject.

To go to full screen, one assigns the true value to the FullScreen property:

function enlarge(sender, args)
{
    sender.getHost().FullScreen = true;
}

One can also switch between the true and false values:

function enlarge(sender, args)
{
   var obj =  sender.getHost();
   obj.content.FullScreen = ! obj.content.FullScreen;
}

The action of going to full screen or returning in embedded mode creates automatically a FullScreenChanged event. One thus associates to the event a JavaScript function to do something when the user changes the screen mode:

FullScreenChanged = "doSomething";

That implies that a doSomething() JavaScript function is defined for this purpose.