A A
RSS

Silverlight Tip: Stretch Canvas to Fill the Screen

Thu, Mar 13, 2008

Uncategorized

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.

Tags: ,

  • 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
blog comments powered by Disqus
Advertise Here

What I'm Doing...

Yonkly Open Source

Sign up for my newsletter

powered by MailChimp!

Cyber Identity