Instruktioner: Vänd ett UIElement vågrätt eller lodrätt

Det här exemplet visar hur du använder en ScaleTransform för att vända en UIElement vågrätt eller lodrätt. I det här exemplet ändras en Button-kontroll (en typ av UIElement) genom att använda en ScaleTransform på dess RenderTransform-egenskap.

Illustration för att växla en knapp

Följande bild visar knappen som ska vändas.

UIElement som ska vändas

Följande visar den kod som skapar knappen.

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

Bild för att vända en knapp vågrätt

Om du vill vända knappen vågrätt skapar du en ScaleTransform och anger egenskapen ScaleX till -1. Använd ScaleTransform på knappens egenskap RenderTransform.

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

Knappen när du har tillämpat ScaleTransform

Bild för att vända en knapp på dess plats

Som du kan se från föregående bild vändes knappen, men den flyttades också. Det beror på att knappen vändes från det övre vänstra hörnet. Om du vill vända knappen på plats vill du använda ScaleTransform i mitten, inte dess hörn. Ett enkelt sätt att använda ScaleTransform i knapparnas mitt är att ange knappens RenderTransformOrigin egenskap till 0,5, 0,5.

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

Knappen med "RenderTransformOrigin" på 0,5, 0,5

Illustration för att vända en knapp vertikalt

Om du vill vända knappen lodrätt ställer du in ScaleTransform-objektets ScaleY-egenskap i stället för dess egenskap ScaleX.

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

Den lodrätt vända knappen

Se även

• översikt över transformeringar