Jak przerzucić element interfejsu użytkownika w poziomie lub w pionie

W tym przykładzie pokazano, jak używać elementu ScaleTransform do przerzucania elementu UIElement w poziomie lub w pionie. W tym przykładzie kontrolka Button (typ UIElement) jest przerzucana przez zastosowanie elementu ScaleTransform do jego RenderTransform właściwości.

Ilustracja służąca do przerzucania przycisku

Na poniższej ilustracji przedstawiono przycisk, który ma być przerzucany.

Element interfejsu użytkownika do przerzucania

Poniżej przedstawiono kod, który tworzy przycisk.

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

Ilustracja przedstawiająca przerzucanie przycisku w poziomie

Aby przerzucić przycisk w poziomie, utwórz ScaleTransform właściwość i ustaw jej ScaleX właściwość na -1. Zastosuj element ScaleTransform do właściwości przycisku RenderTransform .

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

Przycisk po zastosowaniu kontrolki ScaleTransform

Ilustracja przedstawiająca przerzucanie przycisku w jego miejscu

Jak widać na poprzedniej ilustracji, przycisk został przerzucony, ale został również przeniesiony. To dlatego, że przycisk został przerzucony z lewego górnego rogu. Aby przerzucić ScaleTransform przycisk na miejscu, chcesz zastosować go do środka, a nie jego rogu. Łatwym sposobem zastosowania ScaleTransform elementu do środka przycisków jest ustawienie właściwości przycisku RenderTransformOrigin na wartość 0,5, 0,5.

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

Przycisk z elementem RenderTransformOrigin 0.5, 0.5

Ilustracja do przerzucania przycisku w pionie

Aby przerzucić przycisk w pionie, ustaw ScaleTransform właściwość obiektu ScaleY zamiast jej ScaleX właściwości.

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

Przycisk odwrócony pionowo

Zobacz też

• Przekształcenia — przegląd