Авторазмер Silverlight Grid не работает на холсте

Question

Как сделать ширину сетки 100% внутри холста? Вот простой XAML, но он не работает должным образом.

<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>

Я не понимаю, почему моя сетка не занимает столько места, сколько может достать! Я даже пытался добавить одно определение строки и столбца шириной 100 *, но моя сетка все равно будет занимать столько же места, сколько и содержащаяся в ней метка. Цель состоит в том, чтобы иметь холст с дочерней сеткой, занимающий 100% ширины и высоты. Это важно, потому что мне нужно изменить размер Silverlight при изменении размера браузера.

Answer 1

Canvas выкладывает содержимое, используя абсолютное позиционирование. Это намного больше похоже на работу Windows Forms, когда все элементы должны иметь верхнюю, левую, ширину и высоту.

Вы можете добиться аналогичной функциональности, заменив Canvas сеткой, для которой не определены строки / столбцы, и используйте поля для размещения дочерних элементов.

Answer 2

Похоже, я нашел решение здесь

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

Я изменил свой код для автоматического изменения размера сетки при каждом изменении размера содержимого. Это позволит мне полностью позиционировать элементы с помощью Canvas.LeftProperty и поддерживать положение горизонтально / вертикально выровненных элементов.

Я рассмотрел использование только сетки в качестве основного макета, однако, если возникает необходимость в анимации объекта, поле не может быть анимировано. Кроме того, установка полей Left и Top во время события mousemove не точно позиционировала мой элемент в позиции курсора.

Answer 3

Также убедитесь, что ваша форма действительно растягивает приложение Silverlight.

<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&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>