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:
Figure 3
The below screen-shot shows the code-behind for the .XAML
file above - and contains all of the code for the entire application:
Figure 4
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:
Figure 5
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.
