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

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

Иллюстрация, демонстрирующая отражение кнопки

На рисунке ниже показана кнопка, которую требуется отразить.

Элемент пользовательского интерфейса, который требуется отразить

Ниже показан код, создающий кнопку.

<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