Tamanho automático da grade de Silverlight não funcionando dentro da tela

Question

Como você faz uma largura da grade 100% dentro de uma tela? Aqui estão alguns xaml simples, mas não funciona como esperado.

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

Não entendo por que minha grade não ocupa o máximo de espaço possível! Eu até tentei adicionar uma definição de linha e linhas e coluna com uma largura de 100*, mas ainda assim minha grade ocupará tanto espaço quanto o rótulo que ele contém. O objetivo é ter uma tela, com uma criança de grade e ocupa 100% de largura e altura. Isso é importante porque preciso que o Silverlight para redimensionar quando o navegador redimensione.

Answer 1

Parece que encontrei uma solução aqui

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

Ajustei meu código para redimensionar automaticamente minha grade sempre que o conteúdo for redimensionado. Isso me permitirá posicionar elementos absolutamente usando o Canvas.leftProperty e manter a posição de elementos alinhados horizontalmente/verticalmente.

Eu pensei em usar apenas uma grade como meu layout primário, no entanto, caso a necessidade de animar um objeto, a margem não pode ser animada. Além disso, definir a margem para a esquerda e o topo durante o evento Mousemove não posicionou com precisão meu elemento na posição do cursor.

Answer 2

A tela estabelece seu conteúdo usando o posicionamento absoluto. É muito mais parecido com a maneira como os formulários do Windows funcionaram, pois todos os elementos devem ter um topo, esquerda, largura e altura especificada.

Você pode obter funcionalidade semelhante substituindo a tela por uma grade que não possui linhas/colunas definidas e usar margens para colocar elementos filhos.

Answer 3

Verifique também para garantir que seu formulário esteja realmente esticando o aplicativo 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>