Blend 3 - Canvas Resize

Question

Hi ppl..

I'm using Blend 3 for a SILVERLIGHT APP. How can I use a Canvas to resize automatically and adapted to the browser (100% width and height).. I think it could be done using C# because I want to have the objects inside to move freely around the browser, but don't know howto... Help would be appreciated!

snippet XAML:

<Grid x:Name="thisMustBeAcanvas">
     <Grid x:Name="thisShouldResize" MinHeight="768" MinWidth="1024" Background="#FF8A0F26"/>

When I use a Canvas the objects I have inside get broken...

Thanks in advance,

David Vera.

Answer 1

If you remove the width and height and alignment parameters then the Silverlight app should stretch to fit its container. Combine that with good use of Grids, StackPanels, and DockPanels, and you should be able to create a nice fluid design.

Of course for all of this to work your HTML needs to look something like this...

<style>
html, body {
    width: 100%;
    height: 100%;
}
#silverlightControlHost {
    height: 100%;
}
</style>

<div id="silverlightControlHost"> 
    <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%"> 
      ...
    </object>
</div>

At least this worked for me at http://regexhero.net/

Of course it's a Silverlight 2 app, but I'd think it'd be the same way in 3.

EDIT -- My bad, I just looked at my code and I'm not using a Canvas. That's why it works for me. May I ask why you're using a canvas?