Практическое руководство. Масштабирование элемента
Обновлен: Ноябрь 2007
В этом примере показано использование ScaleTransform для масштабирования элемента.
Используйте свойства ScaleX и ScaleY для изменения размеров элемента с определенным коэффициентом. Например, значение 1,5 для ScaleX увеличивает элемент на 150 процентов от его исходной ширины. Значение 0,5 для ScaleY сжимает высоту элемента на 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. Пунктирная линия показывает размер и положение прямоугольника до масштабирования.
Две операции ScaleTransform с идентичными значениями ScaleX и ScaleY, но различными центрами
.gif "Масштабирование на 2 с различными точками центра")
Полный пример см. в разделе Пример двумерных преобразований.
См. также
Основные понятия
Общие сведения о классах Transform