Instrukcje: przerzucanie elementu UIElement w poziomie lub w pionie

W tym przykładzie pokazano, jak za pomocą ScaleTransform przerzucać UIElement w poziomie lub w pionie. W tym przykładzie kontrolka Button (rodzaj UIElement) jest zmieniana przez zastosowanie ScaleTransform do właściwości RenderTransform.

Ilustracja przełączania przycisku

Na poniższej ilustracji przedstawiono przycisk do przewrócenia.

Element interfejsu użytkownika do obracania

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

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

Ilustracja przenoszenia przycisku poziomo

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

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

Przycisk po zastosowaniu kontrolki ScaleTransform

Ilustracja przedstawiająca przekręcanie przycisku na swoim miejscu

Jak widać na poprzedniej ilustracji, przycisk został odwrócony, ale został również przeniesiony. To dlatego, że przycisk został przerzucony z lewego górnego rogu. Aby przerzucić przycisk, należy zastosować ScaleTransform do jego środka, a nie do rogu. Łatwym sposobem zastosowania ScaleTransform do środka przycisków jest ustawienie właściwości RenderTransformOrigin przycisku na 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 RenderTransformOrigin ustawionym na 0.5, 0.5

Ilustracja do obracania przycisku pionowo

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

<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ż

• Przegląd przekształceń