Compartir a través de

Cómo: Ajustar la escala de un elemento

  • Artículo

En este ejemplo se muestra cómo usar un ScaleTransform para escalar un elemento.

Use las propiedades ScaleX y ScaleY para cambiar el tamaño del elemento por el factor especificado. Por ejemplo, un valor de ScaleX de 1.5 estira el objeto al 150 por ciento de su ancho original. Un valor de ScaleY de 0.5 comprime la altura del objeto un 50 por ciento.

Use las propiedades CenterX y CenterY para especificar el punto que será el centro de la operación de escalado. De forma predeterminada, un ScaleTransform está centrado en el punto (0,0), lo que se corresponde a la esquina superior izquierda del rectángulo. Esto tiene el efecto de mover el elemento y también de hacer que parezca más grande, ya que cuando aplica un Transform, cambia el espacio de coordenadas en que se encuentra el objeto.

En el siguiente ejemplo se usa un ScaleTransform para duplicar el tamaño de 50 x 50 de un Rectangle. El ScaleTransform tiene un valor de 0 (valor predeterminado) para CenterX y 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 se establecen CenterX y CenterY en el centro del objeto que se escala: (Width/2, Height/2).

En el ejemplo siguiente se muestra otro Rectangle cuyo tamaño se duplica; sin embargo, este ScaleTransform tiene un valor de 25 para CenterX y para CenterY, lo que corresponde con el 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>

La ilustración 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 escalar.

2x scales with different center pointsEscalas dobles con diferentes puntos centraleswcpsdk_graphicsmm_scalecenter
Dos operaciones de ScaleTransform con valores idénticos de ScaleX y ScaleY pero con centros diferentes

Para obtener el ejemplo completo, consulte Ejemplo de transformaciones en 2D.

Vea también