Cómo: Ajustar la escala de un elemento
Actualización: noviembre 2007
En este ejemplo se muestra cómo usar un objeto ScaleTransform para ajustar la escala de un elemento.
Use las propiedades ScaleX y ScaleY para ajustar la escala del elemento según el factor especificado. Por ejemplo, un valor de ScaleX de 1,5 expande el elemento al 150 por ciento de su ancho original. Un valor de ScaleY de 0,5 reduce el alto de un elemento a la mitad.
Use las propiedades CenterX y CenterY para especificar el punto central de la operación de ajuste de la escala. De manera predeterminada, ScaleTransform se centra en el punto (0,0), que corresponde a la esquina superior izquierda del rectángulo. Esto tiene el efecto de mover el elemento y de hacerlo parecer mayor, porque al aplicar Transform, cambia el espacio de coordenadas en que reside el objeto.
En el ejemplo siguiente se utiliza ScaleTransform para duplicar el tamaño de un Rectangle de 50 por 50. ScaleTransform tiene un valor de 0 (el valor predeterminado) para CenterX y para CenterY.
Ejemplo
<!-- Scales a rectangle by 200% from a center of (0,0).-->
<Rectangle Height="50" Width="50" Fill="#CCCCCCFF"
Stroke="Blue" StrokeThickness="2"
Canvas.Left="100" Canvas.Top="100">
<Rectangle.RenderTransform>
<ScaleTransform CenterX="0" CenterY="0" ScaleX="2" ScaleY="2" />
</Rectangle.RenderTransform>
</Rectangle>
Normalmente, CenterX y CenterY se establecen en el centro del objeto cuya escala se ajusta: (Width/2, Height/2).
En el ejemplo siguiente se muestra otro Rectangle cuyo tamaño se duplica; sin embargo, en este caso ScaleTransform tiene un valor de 25 para CenterX y para CenterY, lo que corresponde al centro del rectángulo.
<!-- Scales a rectangle by 200% from a center of (25,25).-->
<Rectangle Height="50" Width="50" Fill="#CCCCCCFF"
Canvas.Left="100" Canvas.Top="100" Stroke="Blue" StrokeThickness="2">
<Rectangle.RenderTransform>
<ScaleTransform CenterX="25" CenterY="25" ScaleX="2" ScaleY="2" />
</Rectangle.RenderTransform>
</Rectangle>
En la ilustración siguiente se muestra la diferencia entre las dos operaciones ScaleTransform. La línea de puntos muestra el tamaño y la posición del rectángulo antes de ajustar su escala.
Dos operaciones de ScaleTransform con valores idénticos de las propiedades ScaleX y ScaleY pero con centros diferentes
.gif "escalas dobles con diferentes centros")
Para obtener el ejemplo completo, vea Ejemplo 2-D Transforms.
Vea también
Conceptos
Información general sobre transformaciones