如何:水平或垂直翻转 UIElement

更新:2007 年 11 月

本示例演示如何使用 ScaleTransform 水平或垂直翻转 UIElement。在本示例中,通过向一个 UIElement 类型的 Button 控件的 RenderTransform 属性应用 ScaleTransform 来翻转该控件。

示例

下图显示要翻转的按钮。

要翻转的 UIElement

无变换的按钮

下面显示创建该按钮的代码。

<Button Content="Flip me!" Padding="5">
</Button>

若要水平翻转按钮,请创建一个 ScaleTransform 并将它的 ScaleX 属性设置为 -1。将 ScaleTransform 应用于按钮的 RenderTransform 属性。

<Button Content="Flip me!" Padding="5">
  <Button.RenderTransform>
    <ScaleTransform ScaleX="-1" />
  </Button.RenderTransform>
</Button>

应用 ScaleTransform 之后的按钮

围绕 (0,0) 水平翻转的按钮

从上图可以看出,翻转了按钮,但是同时也移动了该按钮。这是因为按钮是从左上角开始翻转的。若要原地翻转按钮,需要将 ScaleTransform 应用于按钮的中心,而不是角。将 ScaleTransform 应用于按钮中心的一个简便方法是将按钮的 RenderTransformOrigin 属性设置为 0.5, 0.5。

<Button Content="Flip me!" Padding="5"
  RenderTransformOrigin="0.5,0.5">
  <Button.RenderTransform>
    <ScaleTransform ScaleX="-1" />
  </Button.RenderTransform>
</Button>

RenderTransformOrigin 为 0.5, 0.5 的按钮

围绕中心水平翻转的按钮

若要垂直翻转按钮,请设置 ScaleTransform 对象的 ScaleY 属性,而不是 ScaleX 属性。

<Button Content="Flip me!" Padding="5"
  RenderTransformOrigin="0.5,0.5">
  <Button.RenderTransform>
    <ScaleTransform ScaleY="-1" />
  </Button.RenderTransform>
</Button>

垂直翻转的按钮

围绕中心垂直翻转的按钮

请参见

概念

变换概述