Compartir a través de

Cómo: Escalar un elemento

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

Use las ScaleX propiedades y ScaleY para cambiar el tamaño del elemento por el factor que especifique. Por ejemplo, un ScaleX valor de 1,5 amplía el elemento al 150 por ciento de su ancho original. Un ScaleY valor de 0,5 reduce el alto de un elemento en un 50 %.

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

En el ejemplo siguiente, se utiliza un ScaleTransform para duplicar el tamaño de un Rectangle de 50 por 50. ScaleTransform tiene un valor de 0 (valor predeterminado) para y CenterXCenterY.

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 establece CenterX y CenterY en el centro del objeto que se escala: (Width/2, Height/2).

En el ejemplo siguiente se muestra otro Rectangle que se duplica en tamaño; sin embargo, este ScaleTransform tiene un valor de 25 tanto para CenterX como para CenterY, 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 ScaleTransform operaciones. La línea de puntos muestra el tamaño y la posición del rectángulo antes de escalar.

2 escalas con diferentes puntos centrales
Dos operaciones ScaleTransform con valores ScaleX y ScaleY idénticos, pero centros diferentes

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

Consulte también