Fluid layout and Fullscreen in Silverlight

In this tutorial we will have a Silverlight application take up the entire webpage and have the capablity to go fullscreen. This will allow you to create Silverlight applications that take up 100% of the width and height of html pages.

1- Place a rectangle on the stage
2- Set the margins to Margin=”8,8,8,42″ which will place the rectangle at 8 from the left, right and top and 42 from the bottom.
3- Place a button on the stage and set its width to 120
4- With the button selected select the “events” panel
5- Enter “toggleFullscreen” on the Click event
6- Add code to handle the toggling of the fullscreen window status

Click the button to go Fullscreen and have a fluid layout

XAML code

<UserControl
	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" mc:Ignorable="d"
	x:Class="Fullscreen.MainPage" d:DesignWidth="710" d:DesignHeight="420">

	<Grid x:Name="LayoutRoot" Background="White">
		<Rectangle Margin="8,8,8,42" Stroke="Black">
			<Rectangle.Fill>
				<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
					<GradientStop Color="Black" Offset="1"/>
					<GradientStop Color="#FF5D5F60"/>
				</LinearGradientBrush>
			</Rectangle.Fill>
		</Rectangle>
		<Button Content="Button" Height="30" Margin="252,0,232,8" VerticalAlignment="Bottom" Click="toggleFullscreen" Width="120" HorizontalAlignment="Center"/>
	</Grid>
</UserControl>

C# code

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace Fullscreen
{
	public partial class MainPage : UserControl
	{
		public MainPage()
		{
			InitializeComponent();
		}

		private void toggleFullscreen(object sender, System.Windows.RoutedEventArgs e)
		{
			if (Application.Current.Host.Content.IsFullScreen)
			{
				Application.Current.Host.Content.IsFullScreen = false;
			}
			else
			{
				Application.Current.Host.Content.IsFullScreen = true;
			}
		}
	}
}