<UserControl xmlns:controlsToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit" x:Class="FullScreen.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:FullScreen"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<controlsToolkit:Viewbox x:Name="ScreenResolution">
<Grid x:Name="LayoutRoot">
<local:Robot x:Name="ucRobot" Height="190" Width="190" />
<CheckBox x:Name="chkFullScreen" Content="Full Screen?" />
</Grid>
</controlsToolkit:Viewbox>
</UserControl>
Notice that in order to invoke Full Screen mode event MUST tie to click event. As security measure of Silverlight Silverlight application CANNOT go into Full Screen mode automatically.
Notice that we have Robot user ccontrol which we expect to scale as the application goes into Full Screen mode and when it comes out of screen mode we also expect it to scale to normal size.
Silverlight toolkit comes with very handy control called ViewBox which automatically scales the controls and elements for you!
MainPage.xaml.cs
using System;
using System.Windows;
using System.Windows.Controls;
namespace FullScreen
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
chkFullScreen.Click += new RoutedEventHandler(chkFullScreen_Click);
Application.Current.Host.Content.FullScreenChanged += new EventHandler(Content_FullScreenChanged);
// Resize controls to browser white window space
// ScreenResolution.Height = double.Parse(HtmlPage.Document.Body.GetAttribute("clientHeight"));
// ScreenResolution.Width = double.Parse(HtmlPage.Document.Body.GetAttribute("clientWidth"));
ScreenResolution.Height = 300;
ScreenResolution.Width = 640;
}
private void chkFullScreen_Click(object sender, RoutedEventArgs e)
{
if (chkFullScreen.IsChecked.HasValue && chkFullScreen.IsChecked.Value)
{
Application.Current.Host.Content.IsFullScreen = true;
}
else
{
Application.Current.Host.Content.IsFullScreen = false;
}
}
private void Content_FullScreenChanged(object sender, EventArgs e)
{
if (Application.Current.Host.Content.IsFullScreen)
{
// Setto Screen resolution
ScreenResolution.Height = Application.Current.Host.Content.ActualHeight;
ScreenResolution.Width = Application.Current.Host.Content.ActualWidth;
}
else
{
// Resize controls to browser white window space
// ScreenResolution.Height = double.Parse(HtmlPage.Document.Body.GetAttribute("clientHeight"));
// ScreenResolution.Width = double.Parse(HtmlPage.Document.Body.GetAttribute("clientWidth"));
ScreenResolution.Height = 300;
ScreenResolution.Width = 640;
chkFullScreen.IsChecked = false;
}
}
}
}
Notice here that I commented out double.Parse(HtmlPage.Document.Body.GetAttribute("clientHeight")) This is useful for getting browser avialble white.
Also Application.Current.Host.Content.ActualHeight and ActualWidth gives your height and width that were set from from web page.
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="640px" height="300px">
<param name="source" value="ClientBin/FullScreen.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="3.0.40624.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>
</object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>