Full Screen Mode in Silverlight


Silverlight provides functionality to display the Silverlight plug-in in full-screen mode i.e. 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. A Silverlight plug-in can enable full-screen mode only in response to a user-initiated action. If the IsFullScreen propertyis set to true in a Startup event handler, the property setting is ignored. Limiting the actions that enable full-screen mode ensures that the user is always the initiator of full-screen mode behavior. This prevents malicious applications from spoofing the appearance of the operating system or other programs.

The Silverlight plug-in can display in either embedded mode or in full-screen mode:

  • In embedded mode, the plug-in displays within the Web browser.
  • In full-screen mode, the plug-in resizes to the current resolution of the screen and displays on top of all other applications, including the browser.

The Content.IsFullScreen property determines whether the Silverlight plug-in displays as a full-screen plug-in or as an embedded plug-in. If a Web page hosts multiple Silverlight plug-ins, only one plug-in can be in full-screen mode at one time.

When a Silverlight plug-in displays in full-screen mode, it briefly displays the message "Press ESC to exit full-screen mode".



When a Silverlight plug-in is in full-screen mode, it disables most keyboard events. This limitation of keyboard input during full-screen mode is a security feature, and is intended to minimize the possibility of unintended information being entered by a user. In full-screen mode, the only input allowed is through the following keys.

ARROW KEYS, SPACEBAR, TAB, PAGE UP, PAGE DOWN, HOME, END, ENTER

To switch to full screen mode use the following code

private void LayoutRoot_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Application.Current.Host.Content.IsFullScreen = !Application.Current.Host.Content.IsFullScreen;          
        }

Further to resize the application add ScaleTransform in Page.xaml code.

             <Canvas.RenderTransform>
            <ScaleTransform ScaleX="1" ScaleY="1" x:Name="RootLayoutScaleTransform" />
        </Canvas.RenderTransform>

constructor to remember original size

private double oldWidth;
        private double oldHeight;
        public double uniformScaleAmount = 1;

methods to work with resize and full screen events

private void UserControl_Loaded(object sender, RoutedEventArgs e)
        {
            oldHeight = this.Height;
            oldWidth = this.Width;
            Application.Current.Host.Content.Resized += new EventHandler(Content_Resized);
            Application.Current.Host.Content.FullScreenChanged += new EventHandler(Content_Resized);
        }
void Content_Resized(object sender, EventArgs e)
        {
            double currentWidth = Application.Current.Host.Content.ActualWidth;
            double currentHeight = Application.Current.Host.Content.ActualHeight;
            uniformScaleAmount = Math.Min((currentWidth / oldWidth), (currentHeight / oldHeight));
            RootLayoutScaleTransform.ScaleX = uniformScaleAmount;
            RootLayoutScaleTransform.ScaleY = uniformScaleAmount;
        }

But here mouse's coordinates are now not scaled, so divide these points by variable "uniformScaleAmount".

double currentY = e.GetPosition(null).Y / uniformScaleAmount;
double currentX = e.GetPosition(null).X / uniformScaleAmount;


Similar Articles