如何翻转 UIElement：水平或垂直方向

此示例演示如何使用 a ScaleTransform 来水平翻转或垂直翻转 UIElement 。 在此示例中，通过将Button应用于UIElement属性来翻转ScaleTransform控件（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 后的按钮

用于说明如何在原地翻转按钮的插图

如上图所示，按钮已翻转，但它也被移动。 这是因为按钮是从左上角翻转的。 若要在原地翻转按钮，需要将 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>

垂直翻转按钮

另请参阅

• 转换概述