Silverlight Tip: Stretch Canvas to Fill the Screen

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.

This entry was posted on Thursday, March 13th, 2008 at 10:02 pm and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

Alex

It's easier to do it directly in XAML:

<Canvas
Width=”{Binding Path=ActualWidth}”
Height=”{Binding Path=ActualHeight}”>
tambor

Warning :
In Initialization code, i think there is a mistake
myCanvas.Width = ActualWidth ;
myCanvas.Height = ActualWidth ; –> ActualHeight

Thanks for your tip, it is useful for me
tambor

Warning :
In Initialization code, i think there is a mistake
myCanvas.Width = ActualWidth ;
myCanvas.Height = ActualWidth ; –> ActualHeight

Thanks for your tip, it is useful for me

Emad Ibrahim