Silverlight Tip: Stretch Canvas to Fill the Screen

March 13, 2008

I am not sure if this is a bug or by-design but Canvases don’t stretch the way I expect them to - the Grid control seems to resize better.

If you want your Canvas to stretch and Fill its parent, there is an easy way to do this.

1. On initialization, set the Canvas width and height to the Actual width and height of its parent.

myCanvas.Width = ActualWidth ;
myCanvas.Height = ActualWidth ;

2. Wire the SizeChanged event of the parent control

ParentSizeChanged += 

            new SizeChangedEventHandler(Parent_SizeChanged);

3. In the SizeChanged event handler, set the width and height of the canvas again just like you did during initialization

void ParentManager_SizeChanged(object sender, SizeChangedEventArgs e)
{
   myCanvas.Width = ActualWidth;
   myCanvas.Height = ActualHeight;
}

This tip is related to Silverlight 2 Beta 1.

Posted in Silverlight, Tips & Tricks