R – Change Silverlight Full Screen Background Color

The solution was two-fold. Firstly to make changes in the LayoutUpdated event rather than the Loaded event and secondly to subscribe to the PropertyChangedCallback of the PropertyMetadata. Here's the complete working code:

  public partial class SilverlightControl1 : UserControl
  {
    public SilverlightControl1()
    {
      InitializeComponent();
      this.LayoutUpdated += new EventHandler(SilverlightControl1_LayoutUpdated);
      Composite = new Composite();
    }

    void SilverlightControl1_LayoutUpdated(object sender, EventArgs e)
    {
      Composite.Width = this.Width / 2.0;
      Composite.Height = this.Height / 2.0;
      if (!this.LayoutRoot.Children.Contains(Composite)) this.LayoutRoot.Children.Add(Composite);
    }

    public Composite Composite
    {
      get;
      set;
    }
  }

  public class Composite : ContentControl
  {
    private Grid grid;
    private Canvas canvas;

    public Composite()
    {
      if (grid == null) grid = new Grid();
      if (canvas == null) canvas = new Canvas();
      if (!grid.Children.Contains(canvas)) grid.Children.Add(canvas);
      Content = grid;
      this.LayoutUpdated += new EventHandler(Composite_LayoutUpdated);
    }

    void Composite_LayoutUpdated(object sender, EventArgs e)
    {
      if (rectangle == null) rectangle = new Rectangle();
      Canvas.SetTop(rectangle, 0);
      Canvas.SetLeft(rectangle, 0);
      rectangle.Fill = new SolidColorBrush(Color);

      rectangle.Width = Width;
      rectangle.Height = Height;
      if (!canvas.Children.Contains(rectangle)) canvas.Children.Add(rectangle);
    }

    public static readonly DependencyProperty ColorProperty = DependencyProperty.Register("Color", typeof(Color), typeof(Composite), new PropertyMetadata(Colors.Red, new PropertyChangedCallback(OnColorPropertyChanged)));

    private static void OnColorPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
      Composite comp = (Composite)d;
      comp.InvalidateArrange();
    }

    private Rectangle rectangle;

    public Color Color
    {
      get { return (Color)GetValue(ColorProperty); }
      set { SetValue(ColorProperty, value); }
    }
  }

In newer browsers such as Chrome 15, Firefox 10, Safari 5.1, IE 10 this is possible. It's also possible for older IE's via ActiveX depending on their browser settings.

Here's how to do it:

function requestFullScreen(element) {
    // Supports most browsers and their versions.
    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;

    if (requestMethod) { // Native full screen.
        requestMethod.call(element);
    } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
}

var elem = document.body; // Make the body go full screen.
requestFullScreen(elem);

The user obviously needs to accept the fullscreen request first, and there is not possible to trigger this automatically on pageload, it needs to be triggered by a user (eg. a button)

Read more: https://developer.mozilla.org/en/DOM/Using_full-screen_mode