--- title: "How to: Flip a UIElement Horizontally or Vertically" ms.date: "03/30/2017" ms.custom: devdivchpfy22 description: Learn how to flip a UIElement horizontally or vertically. helpviewer_keywords: - "flipping UIElements [WPF]" - "UIElements [WPF], flipping" ms.assetid: 02c6730f-65c0-40d5-a553-4cb663721882 --- # How to: Flip a UIElement Horizontally or Vertically This example shows how to use a to flip a horizontally or vertically. In this example, a control (a type of ) is flipped by applying a to its property. ## Illustration to flip a button The following illustration shows the button to flip. ![A button with no transform](./media/graphicsmm-buttonflipbeforeflip.gif "graphicsmm_buttonflipbeforeflip") The UIElement to flip The following shows the code that creates the button. [!code-xaml[Transforms_snip#GraphicsMMButtonWithoutFlip](~/samples/snippets/csharp/VS_Snippets_Wpf/Transforms_snip/CS/FlipExample.xaml#graphicsmmbuttonwithoutflip)] ## Illustration to flip a button horizontally To flip the button horizontally, create a and set its property to -1. Apply the to the button's property. [!code-xaml[Transforms_snip#GraphicsMMFlipButtonExample1](~/samples/snippets/csharp/VS_Snippets_Wpf/Transforms_snip/CS/FlipExample.xaml#graphicsmmflipbuttonexample1)] ![A button flipped horizontally about (0,0)](./media/graphicsmm-buttonfliphorizontalflip-displaced.gif "graphicsmm_buttonfliphorizontalflip_displaced") The button after applying the ScaleTransform ## Illustration to flip a button at its place As you can see from the previous illustration, the button was flipped, but it was also moved. That's because the button was flipped from its top left corner. To flip the button in place, you want to apply the to its center, not its corner. An easy way to apply the to the buttons center is to set the button's property to 0.5, 0.5. [!code-xaml[Transforms_snip#GraphicsMMFlipButtonExample2](~/samples/snippets/csharp/VS_Snippets_Wpf/Transforms_snip/CS/FlipExample.xaml#graphicsmmflipbuttonexample2)] ![A button flipped horizontally about its center](./media/graphicsmm-buttonfliphorizontalflip-inplace.gif "graphicsmm_buttonfliphorizontalflip_inplace") The button with a RenderTransformOrigin of 0.5, 0.5 ## Illustration to flip a button vertically To flip the button vertically, set the object's property instead of its property. [!code-xaml[Transforms_snip#GraphicsMMVerticalFlipButtonExample2](~/samples/snippets/csharp/VS_Snippets_Wpf/Transforms_snip/CS/FlipExample.xaml#graphicsmmverticalflipbuttonexample2)] ![A button flipped vertically about its center](./media/graphicsmm-buttonflipverticalflip-inplace.gif "graphicsmm_buttonflipverticalflip_inplace") The vertically flipped button ## See also - [Transforms Overview](../graphics-multimedia/transforms-overview.md)