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

  • 项目

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

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

示例

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

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

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

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

A button transformed about its center
将 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 对象的详细信息，请参阅转换概述。

另请参阅