通过

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

  • 项目

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

使用 RenderTransform 属性旋转、缩放或倾斜 FrameworkElement 时，默认设置会将转换应用到元素的左上角。 如果要从元素中心旋转、缩放或倾斜，可以通过将转换中心设置为元素的中心来补偿。 但是，该解决方案要求你知道元素的大小。 将转换应用于元素中心的一种更简单方法是将其 RenderTransformOrigin 属性设置为 （0.5， 0.5），而不是在转换本身上设置中心值。

例

以下示例使用 RotateTransform 顺时针旋转 Button 45 度。 由于本示例未指定居中，按钮将围绕点（0,0）旋转，这是其左上角。 RotateTransform 应用于 RenderTransform 属性。

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

使用 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 属性并指定 RenderTransformOrigin 为 (0.5, 0.5) 进行 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 对象的详细信息，请参阅 转换概述。

另请参阅