Практическое руководство. Указание источника преобразования с помощью относительных значений

В этом примере показано, как использовать относительные значения для указания источника RenderTransform, применяемого к FrameworkElement.

При повороте, масштабировании или отклонении FrameworkElement с помощью свойства RenderTransform параметр по умолчанию применяет преобразование к левому верхнему углу элемента. Если вы хотите повернуть, масштабировать или сдвинуть от центра элемента, можно компенсировать это, установив центр преобразования в центр элемента. Однако для этого решения требуется знать размер элемента. Более простой способ применения преобразования к центру элемента — задать для его свойства RenderTransformOrigin значение (0.5, 0.5), а не задать центральное значение для самого преобразования.

Пример

В следующем примере используется RotateTransform для поворота Button на 45 градусов по часовой стрелке. Так как в примере не указан центр, кнопка поворачивается о точке (0, 0), которая является его верхним левым углом. RotateTransform применяется к свойству RenderTransform.

На следующем рисунке показан результат преобразования для следующего примера.

Поворот по часовой стрелке на 45 градусов с помощью свойства RenderTransform

<Border Margin="30" 
  HorizontalAlignment="Left" VerticalAlignment="Top"
  BorderBrush="Black" BorderThickness="1" >
  <StackPanel Orientation="Vertical">
    <Button Content="A Button" Opacity="1" />
    <Button Content="Rotated Button">
      <Button.RenderTransform>
        <RotateTransform Angle="45" />
      </Button.RenderTransform>
    </Button>
    <Button Content="A Button" Opacity="1" />
  </StackPanel>
</Border>

В следующем примере также используется RotateTransform для поворота по часовой стрелке Button на 45 градусов; однако в этом примере RenderTransformOrigin кнопки устанавливает значение (0.5, 0.5). В результате вращение применяется к центру кнопки, а не к её левому верхнему углу.

На следующем рисунке показан результат преобразования для следующего примера.

Поворот на 45 градусов с использованием свойства RenderTransform и RenderTransformOrigin, равным (0.5, 0.5)

<Border Margin="30"   
  HorizontalAlignment="Left" VerticalAlignment="Top"
  BorderBrush="Black" BorderThickness="1">
  <StackPanel Orientation="Vertical">
    <Button Content="A Button" Opacity="1" />
    <Button Content="Rotated Button"
      RenderTransformOrigin="0.5,0.5">
      <Button.RenderTransform>
        <RotateTransform Angle="45" />
      </Button.RenderTransform>
    </Button>
    <Button Content="A Button" Opacity="1" />
  </StackPanel>
</Border>

Для получения дополнительной информации о преобразовании объектов FrameworkElement см. обзор преобразований.

См. также

• Transform
• Обзор преобразований
• Темы с инструкциями