silverlight xaml canvas grid viewbox

silverlight - Una grilla, un Viewbox y un Canvas



xaml grid (6)

Creo que está fallando porque no especificas la ubicación de tu viewbox en la grilla.

Debería agregar Grid.Row = "0" y Grid.Column = "0" a su declaración de viewbox como:

<toolkit:Viewbox Grid.Row="0" Grid.Column="0" Stretch="Fill">

Esto debería funcionar, estoy haciendo lo mismo bajo mi propio control.

Editar: elija la opción Uniforme con estiramiento si no desea que sus polígonos se distorsionen.

Ok, tengo una Grid que ''tamaños automáticos'' para un navegador web. Ahí tengo un Canvas con formas dibujadas en él. Lo que quiero es que el lienzo se "expanda" para llenar la página. Intenté usar un Viewbox de Silverlight 3 10/09 Toolkit pero parece que no llena todo el espacio en la grilla y solo funciona cuando le doy un conteo exacto de píxeles.

¿Alguien tiene alguna idea?

Ejemplo XAML:

<Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="*" /> </Grid.RowDefinitions> <toolkit:Viewbox Stretch="Fill"> <Canvas Width="617.589" Height="876.934"> <Polygon StrokeThickness="3.0" Stroke="#ff000000" Fill="White" StrokeMiterLimit="1.0" Points=" 395.320,604.854 395.320,604.854 335.696,600.207 311.449,600.365 287.188,600.504 221.110,604.854 221.110,604.854 221.110,345.832 221.110,345.832 278.372,350.370 309.237,350.320 340.106,350.279 395.320,345.832 395.320,345.832 395.320,604.854 " /> <Polygon StrokeThickness="3.0" Stroke="#ff000000" Fill="White" StrokeMiterLimit="1.0" Points=" 420.576,870.950 420.576,870.950 348.925,875.434 308.134,875.434 267.351,875.434 197.958,870.950 197.958,870.950 189.140,693.696 189.140,693.696 249.707,698.225 308.134,698.182 366.562,698.135 429.401,693.696 429.401,693.696 420.576,870.950 " /> </Canvas> </toolkit:Viewbox> </Grid>


Creo que lo que estás buscando es algo como esto:

<UserControl x:Class="DemoApplication.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Grid x:Name="LayoutRoot" Background="White"> <Canvas Background="LightBlue" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> <Polygon StrokeThickness="3.0" Stroke="#ff000000" Fill="White" StrokeMiterLimit="1.0" Points=" 395.320,604.854 395.320,604.854 335.696,600.207 311.449,600.365 287.188,600.504 221.110,604.854 221.110,604.854 221.110,345.832 221.110,345.832 278.372,350.370 309.237,350.320 340.106,350.279 395.320,345.832 395.320,345.832 395.320,604.854 " /> <Polygon StrokeThickness="3.0" Stroke="#ff000000" Fill="White" StrokeMiterLimit="1.0" Points=" 420.576,870.950 420.576,870.950 348.925,875.434 308.134,875.434 267.351,875.434 197.958,870.950 197.958,870.950 189.140,693.696 189.140,693.696 249.707,698.225 308.134,698.182 366.562,698.135 429.401,693.696 429.401,693.696 420.576,870.950 " /> </Canvas> </Grid>

Este es el contenido de Page.xaml. Tenga en cuenta que configuro el fondo del lienzo para que sea LightBlue para que pueda ver exactamente dónde va el lienzo (se extiende horizontal y verticalmente) Rellena la pantalla.

Puede verificar una copia de trabajo del proyecto de demostración aquí:

http://code.google.com/p/silverlight-canvas-layout-fill/

¡Disfrutar!

Gracias,

Scott

EDITAR:

Si te entiendo correctamente, tienes una cuadrícula de Silverlight, que llena el ancho y el ancho de los navegadores web sin importar el tamaño del navegador, algo como esto (el mío es de color verde claro):

Green Grid http://img192.imageshack.us/img192/7308/greengrid.jpg

Ahora desea agregar dos formas de polígono a la cuadrícula dentro de un lienzo, pero ¿desea que la cuadrícula sea ahora del mismo tamaño que el lienzo? Si eso es cierto, quiere que la cuadrícula (verde claro) no se muestre porque se cambia de tamaño al tamaño del lienzo (azul claro), así:

Green Grid - Blue Canvas http://img4.imageshack.us/img4/1107/greengridwithpolygons.jpg

Además, observo en su código de ejemplo anterior, que su lienzo tiene el alto y el ancho establecidos, ¿es este el alto y el ancho que quiere para la grilla? Excepto que no desea tener el alto y el ancho de la grilla establecidos estáticamente, ¿correcto?

Si esto es cierto, quiere cambiar el código para que sea así:

<UserControl x:Class="DemoApplication.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Grid x:Name="LayoutRoot" Background="LightGreen" HorizontalAlignment="Center" VerticalAlignment="Center" > <Canvas Background="LightBlue" Width="617.589" Height="876.934"> <Polygon StrokeThickness="3.0" Stroke="#ff000000" Fill="White" StrokeMiterLimit="1.0" Points=" 395.320,604.854 395.320,604.854 335.696,600.207 311.449,600.365 287.188,600.504 221.110,604.854 221.110,604.854 221.110,345.832 221.110,345.832 278.372,350.370 309.237,350.320 340.106,350.279 395.320,345.832 395.320,345.832 395.320,604.854 " /> <Polygon StrokeThickness="3.0" Stroke="#ff000000" Fill="White" StrokeMiterLimit="1.0" Points=" 420.576,870.950 420.576,870.950 348.925,875.434 308.134,875.434 267.351,875.434 197.958,870.950 197.958,870.950 189.140,693.696 189.140,693.696 249.707,698.225 308.134,698.182 366.562,698.135 429.401,693.696 429.401,693.696 420.576,870.950 " /> </Canvas> </Grid> </UserControl>

El código anterior da como resultado esto:

Cuadrícula de tamaño automático http://img192.imageshack.us/img192/9665/gridfitscanvas.jpg

Tenga en cuenta que los puntos de los polígonos que especifica están en relación con el contenedor (en su caso, el lienzo). Por lo tanto, los puntos son bajos en la pantalla pero no son consistentes en diferentes tamaños de ventana.

Si tiene un polígono, por ejemplo, un cuadrado de 10 píxeles de alto y 10 de ancho, puede especificarlo de la siguiente manera:

<Polygon StrokeThickness="3.0" Stroke="#ff000000" Fill="White" StrokeMiterLimit="1.0" Points="10,10 10,0 0,0 0,10" />

Tenga en cuenta que los puntos están tan cerca de la parte superior izquierda (0,0) como sea posible, por lo tanto, podemos colocar el polígono más fácilmente en la pantalla.

Para su pregunta, creo que lo que está buscando son dos polígonos que se encuentran en la parte inferior de su navegador y que se mantienen en el centro. Cuando la pantalla cambia de tamaño, se mueven, pero permanecen consistentes entre sí. Es decir, siempre parecerán estar en la misma posición sin importar el tamaño de la pantalla. Al igual que:

Resultado flaco http://img9.imageshack.us/img9/1107/greengridwithpolygonscoy.jpg

Resultado gordo http://img9.imageshack.us/img9/3306/greengridwithpolygonsco.jpg

Aquí está mi código (también actualizado en el proyecto de Google anterior) que muestra los polígonos de posicionamiento automático. Tenga en cuenta que los polígonos tienen puntos nuevos, son el punto original menos el valor mínimo más 1.5 (la mitad del grosor del trazo). Entonces, si originalmente el valor era 420.576,870.950 , se convirtió en 232.936,178.754 para moverlo lo más cerca posible de (0,0) en la pantalla. Esto hace que sea mucho más fácil envolverlo en un lienzo y moverlo exactamente a donde lo desee en la pantalla.

<UserControl x:Class="DemoApplication.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Grid x:Name="LayoutRoot" Background="LightGreen" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> <StackPanel HorizontalAlignment="Center" VerticalAlignment="Bottom"> <Polygon StrokeThickness="3.0" Margin="0,0,0,50" HorizontalAlignment="Center" Stroke="#ff000000" Fill="White" StrokeMiterLimit="1.0" Points="175.710, 260.522 116.086, 255.875 91.839, 256.033 67.578, 256.172 1.5, 260.522 1.5, 260.522 1.5, 1.5 1.5, 1.5 58.762, 6.038 89.627, 5.988 120.496, 5.947 175.710, 1.5 175.710, 1.5 175.710, 260.522" /> <Polygon StrokeThickness="3.0" Margin="0,0,0,10" Stroke="#ff000000" HorizontalAlignment="Center" Fill="White" StrokeMiterLimit="1.0" Points="232.936,178.754 232.936,178.754 161.285,183.238 120.494,183.238 79.711,183.238 10.318,178.754 10.318,178.754 1.5,1.5 1.5,1.5 62.067,6.029 120.494,5.986 178.922,5.939 241.761,1.5 241.761,1.5 232.936,178.754" /> </StackPanel> </Grid> </UserControl>

Espero que esto ayude,

¡Gracias!


Un Canvas espera recibir un tamaño fijo. Es el tipo equivocado de contenedor para su escenario. A pesar de su nombre en algún momento, la Grid es el contenedor correcto para usar, aunque no es necesario definir ninguna fila o columna. (Por cierto, la cuadrícula sin definiciones es igual a una con una columna con un ancho de * y una fila con una altura de *).

Por lo tanto, el siguiente marcado logra su objetivo:

<Grid> <controlsToolkit:Viewbox> <Grid> <Polygon StrokeThickness="3.0" Stroke="#ff000000" Fill="White" StrokeMiterLimit="1.0" Points=" 395.320,604.854 395.320,604.854 335.696,600.207 311.449,600.365 287.188,600.504 221.110,604.854 221.110,604.854 221.110,345.832 221.110,345.832 278.372,350.370 309.237,350.320 340.106,350.279 395.320,345.832 395.320,345.832 395.320,604.854 " /> <Polygon StrokeThickness="3.0" Stroke="#ff000000" Fill="White" StrokeMiterLimit="1.0" Points=" 420.576,870.950 420.576,870.950 348.925,875.434 308.134,875.434 267.351,875.434 197.958,870.950 197.958,870.950 189.140,693.696 189.140,693.696 249.707,698.225 308.134,698.182 366.562,698.135 429.401,693.696 429.401,693.696 420.576,870.950 " /> </Grid> </controlsToolkit:Viewbox> </Grid>


Prueba esto.

Establezca el Width y la Height del Canvas dentro del ViewBox en el ActualWidth y la ActualWidth ActualHeight de un ActualHeight Border/Grid .

<Border x:Name="border"> <Viewbox HorizontalAlignment="Left" VerticalAlignment="Top"> <Canvas Width="{Binding ActualWidth, ElementName=border}" Height="{Binding ActualHeight, ElementName=border}"/> </Viewbox> </Border>

Estoy usando Silverlight 4.


Técnicamente, la Grid no es necesaria. Podrías poner el Canvas en la raíz, pero para mantener las cosas simples, lo dejaré como está.

Tenga en cuenta que la Grid se puede utilizar sin filas y columnas como una forma de componer y organizar los controles en su superficie. De forma predeterminada, un niño se dimensionará para llenar la cuadrícula con ajustes para sus propiedades de margen y alineación (Alineación HorizontalAlignment y Alineación VerticalAlignment ).

Un artículo de MSDN explica esto de la siguiente manera:

Puede posicionar con precisión elementos secundarios de una cuadrícula mediante una combinación de la propiedad Margen y las propiedades de alineación.

Como tiene la intención de tener solo un elemento, el lienzo, simplemente puede colocarlo en la cuadrícula de esta manera:

<Grid> <Canvas Margin="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></Canvas> </Grid>

Esto hará que Canvas ocupe todo el área interna de la Grid .

Si no está viendo su lienzo estirado, es probable que su suposición sobre el tamaño de su cuadrícula sea incorrecta. Si ese es el caso, configure la cuadrícula y los colores de fondo del lienzo como algo obvio (y diferente) y juegue con el diseño.


Intenté responder solo al @barcrab, estaba intentando usar el ActualWidth , pero no funcionaba. Entonces, para otros, aquí hay una solución al ActualWidth no funciona.

La vinculación a ActualWidth no funciona

oxidado