Поделиться через

Как масштабировать элемент

  • Статья

В этом примере показано, как использовать ScaleTransform для масштабирования элемента.

Используйте свойства ScaleX и ScaleY для изменения размера элемента по указанному фактору. Например, ScaleX значение 1,5 растягивает элемент до 150 процентов от исходной ширины. Значение ScaleY 0,5 уменьшает высоту элемента на 50 процентов.

Используйте свойства CenterX и CenterY, чтобы указать точку, которая является центром операции масштабирования. По умолчанию ScaleTransform по центру находится в точке (0,0), которая соответствует левому верхнему углу прямоугольника. Это имеет эффект перемещения элемента, а также создания его большего размера, так как при применении Transformвы изменяете пространство координат, в котором находится объект.

В следующем примере используется ScaleTransform, чтобы увеличить размер 50 на 50 Rectangleвдвое. ScaleTransform имеет значение 0 (по умолчанию) для CenterX и CenterY.

Пример

<!-- 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>

Как правило, вы устанавливаете CenterX и CenterY в центр масштабируемого объекта: (Width/2, Height/2).

В следующем примере показана другая Rectangle, которая увеличивается по размеру; однако этот ScaleTransform имеет значение 25 для CenterX и CenterY, которое соответствует центру прямоугольника.

<!-- 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>

На следующем рисунке показано различие между двумя операциями ScaleTransform. Пунктирная линия показывает размер и положение прямоугольника перед масштабированием.

масштабирование 2x с различными центральными точками
Две операции ScaleTransform с одинаковыми значениями ScaleX и ScaleY, но разные центры

Полный пример см. в разделе пример преобразования 2D.

См. также