Compartilhar via

Como dimensionar um elemento

  • Artigo

Este exemplo mostra como usar um ScaleTransform para dimensionar um elemento.

Use as propriedades ScaleX e ScaleY para redimensionar o elemento pelo fator especificado. Por exemplo, um valor ScaleX de 1,5 estende o elemento para 150% de sua largura original. Um valor ScaleY de 0,5 reduz a altura de um elemento em 50%.

Use as propriedades CenterX e CenterY para especificar o ponto que é o centro da operação de escala. Por padrão, um ScaleTransform é centralizado no ponto (0,0), que corresponde ao canto superior esquerdo do retângulo. Isso tem o efeito de mover o elemento e também de fazê-lo parecer maior, pois quando você aplica um Transform, você altera o espaço de coordenadas no qual o objeto reside.

O exemplo a seguir usa um ScaleTransform para dobrar o tamanho de um Rectanglede 50 por 50. O ScaleTransform tem um valor 0 (o padrão) para CenterX e CenterY.

Exemplo

<!-- 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, você define CenterX e CenterY para o centro do objeto que é dimensionado: (Width/2, Height/2).

O exemplo a seguir mostra outro Rectangle cujo tamanho é duplicado; no entanto, esse ScaleTransform tem um valor de 25 tanto para CenterX quanto para CenterY, o que corresponde ao centro do retâ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>

A ilustração a seguir mostra a diferença entre as duas operações de ScaleTransform. A linha pontilhada mostra o tamanho e a posição do retângulo antes do dimensionamento.

Dimensionamentos 2x com diferentes pontos centrais
Duas operações ScaleTransform com valores ScaleX e ScaleY idênticos, mas centros diferentes

Para obter o exemplo completo, consulte exemplo de transformações 2D.

Consulte também