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

Обновлен: Ноябрь 2007

В этом примере показано, как использовать 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>

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

См. также

Основные понятия

Общие сведения о классах Transform