Как перевернуть UIElement по горизонтали или вертикали

В этом примере показано, как использовать ScaleTransform для переворачивания UIElement по горизонтали или вертикали. В этом примере элемент управления Button (тип UIElement) перевернут путем применения ScaleTransform к свойству RenderTransform.

Иллюстрация для переключения кнопки

На следующем рисунке показана кнопка для переворота.

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

Иллюстрация для вертикального переворачивания кнопки

Чтобы перевернуть кнопку по вертикали, задайте свойство ScaleY объекта ScaleTransform вместо свойства ScaleX.

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

Вертикально перевернутая кнопка

См. также

• Обзор преобразований