如何：使用相对值指定变换原点

更新：2007 年 11 月

此示例演示如何使用相对值来指定应用于 FrameworkElement 的 RenderTransform 的原点。

使用 RenderTransform 属性旋转、按比例缩放或扭曲一个 FrameworkElement 时，默认设置会在元素的左上角应用变换。如果要从元素中心进行旋转、按比例缩放或扭曲，则可以通过将变换中心设置为元素中心来进行补偿。但是，该解决方案要求您知道元素的大小。在元素中心应用变换的一种较简单的方法是将其 RenderTransformOrigin 属性设置为 (0.5, 0.5)，而不是在变换本身上设置中心值。

示例

下面的示例使用 RotateTransform 将 Button 沿顺时针方向旋转 45 度。由于示例未指定中心，因此按钮将围绕点 (0, 0)（即按钮的左上角）旋转。RotateTransform 应用于 RenderTransform 属性。

下图显示了以下示例的变换结果。

使用 RenderTransform 属性沿顺时针方向旋转 45 度

<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)。因此，将在按钮的中心（而不是其左上角）应用旋转。

下图显示了以下示例的变换结果。

将 RenderTransform 属性与值为 (0.5, 0.5) 的 RenderTransformOrigin 结合使用以旋转 45 度

<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

其他资源

变换帮助主题