El tamaño automático de la cuadrícula de Silverlight no funciona dentro del lienzo

Question

¿Cómo se hace un ancho de cuadrícula 100% dentro de un lienzo? Aquí hay un XAML simple, pero no funciona como se esperaba.

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

¡No entiendo por qué mi cuadrícula no ocupa tanto espacio como puede obtener sus manos! Incluso he intentado agregar una sola definición de fila y columna con un ancho de 100*, pero aún así mi cuadrícula solo ocupará tanto espacio como la etiqueta que contiene. El objetivo es tener un lienzo, con un niño de la cuadrícula y ocupa el 100% de ancho y altura. Esto es importante porque necesito que el Silverlight cambie cuando el navegador cambia de tamaño.

Answer 1

Parece que encontré una solución aquí

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

He ajustado mi código para cambiar el tamaño automáticamente de mi cuadrícula cada vez que el contenido se redimensiona. Esto me permitirá posicionar elementos absolutamente utilizando Canvas.LftProperty y mantener la posición de elementos alineados horizontalmente/verticalmente.

Consideré usar solo una cuadrícula como mi diseño principal, sin embargo, si surge la necesidad de animar un objeto, el margen no puede animarse. Además, establecer el margen a la izquierda y la parte superior durante el evento MouseMove no colocó con precisión mi elemento en la posición del cursor.

Answer 2

El lienzo establece su contenido utilizando el posicionamiento absoluto. Es mucho más similar a la forma en que los formularios de Windows funcionan en que todos los elementos deben tener una parte superior, izquierda, ancho y altura especificada.

Puede lograr una funcionalidad similar reemplazando el lienzo con una cuadrícula que no tiene filas/columnas definidas y use márgenes para colocar elementos infantiles.

Answer 3

También verifique para asegurarse de que su formulario esté realmente estirando la aplicación 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>