Silverlight Grid Auto Size not working within canvas

Question

How do you make a grid width 100% inside a canvas? Here's some simple XAML but it doesn't work as expected.

<Canvas Background="MediumSlateBlue" Width="Auto" Height="Auto" >
    <Grid x:Name="LayoutRoot" MouseMove="MainPage_MouseMove" Background="Beige" >
        <TextBlock x:Name="lblDisplay" Height="24" HorizontalAlignment="Right" VerticalAlignment="Top" Width="128" Text="asdf" ></TextBlock>
    </Grid>
</Canvas>

I don't understand why my grid doesn't take up as much room as it can get it's hands on! I've even tried adding a single row and column definition with a width of 100*, but still my grid will only take up as much space as the label it contains. The goal is to have a canvas, with a grid child and takes up 100% width and height. This is important because I need the silverlight to resize when the browser resizes.

Answer 1

Canvas lays out its content using absolute positioning. It's much more similar to the way Windows Forms worked in that all elements must have a top, left, width, and height specified.

You can achieve similar functionality by replacing Canvas with a Grid that has no rows/columns defined and use margins to place child elements.

Answer 2

Also check to make sure that your form is actually stretching the Silverlight application.

<form id="form1" runat="server" style="height:100%">
<div id="silverlightControlHost">
    <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
      <param name="source" value="clientbin/MyApp.xap"/>
      <param name="onError" value="onSilverlightError" />
      <param name="background" value="white" />
      <param name="minRuntimeVersion" value="3.0.40818.0" />
      <param name="autoUpgrade" value="true" />
      <a href="http://go.microsoft.com/fwlink/?LinkID=149156&amp;v=3.0.40818.0" style="text-decoration:none">
          <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>
      </a>
    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
</form>

Answer 3

Looks like I found a solution here

http://forums.silverlight.net/forums/t/13415.aspx

I've adjusted my code to automatically resize my grid whenever the content is resized. This will allow me to position elements absolutly using Canvas.LeftProperty and maintain the position of horizontally/vertically aligned elements.

I considered using just a grid as my primary layout, however should the need arise to animate an object, margin cannot be animated. Additionally, setting the margin Left and Top during the mousemove event did not accurately position my element to the cursor position.