Pooja PoojariandAndy De George
caa62283b8
* Suggestion/warning fixes for US-1889327. * Updated H2s. * Minor content edit. * Review edits. * Minor edits. * Update dotnet-desktop-guide/framework/wpf/advanced/localization-attributes-and-comments.md Co-authored-by: Andy (Steve) De George <[email protected]>
3.5 KiB
title, ms.date, ms.custom, description, helpviewer_keywords, ms.assetid
| title | ms.date | ms.custom | description | helpviewer_keywords | ms.assetid | ||
|---|---|---|---|---|---|---|---|
| How to: Flip a UIElement Horizontally or Vertically | 03/30/2017 | devdivchpfy22 | Learn how to flip a UIElement horizontally or vertically. |
|
02c6730f-65c0-40d5-a553-4cb663721882 |
How to: Flip a UIElement Horizontally or Vertically
This example shows how to use a xref:System.Windows.Media.ScaleTransform to flip a xref:System.Windows.UIElement horizontally or vertically. In this example, a xref:System.Windows.Controls.Button control (a type of xref:System.Windows.UIElement) is flipped by applying a xref:System.Windows.Media.ScaleTransform to its xref:System.Windows.UIElement.RenderTransform%2A property.
Illustration to flip a button
The following illustration shows the button to flip.
The UIElement to flip
The following shows the code that creates the button.
[!code-xamlTransforms_snip#GraphicsMMButtonWithoutFlip]
Illustration to flip a button horizontally
To flip the button horizontally, create a xref:System.Windows.Media.ScaleTransform and set its xref:System.Windows.Media.ScaleTransform.ScaleX%2A property to -1. Apply the xref:System.Windows.Media.ScaleTransform to the button's xref:System.Windows.UIElement.RenderTransform%2A property.
[!code-xamlTransforms_snip#GraphicsMMFlipButtonExample1]
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 xref:System.Windows.Media.ScaleTransform to its center, not its corner. An easy way to apply the xref:System.Windows.Media.ScaleTransform to the buttons center is to set the button's xref:System.Windows.UIElement.RenderTransformOrigin%2A property to 0.5, 0.5.
[!code-xamlTransforms_snip#GraphicsMMFlipButtonExample2]
The button with a RenderTransformOrigin of 0.5, 0.5
Illustration to flip a button vertically
To flip the button vertically, set the xref:System.Windows.Media.ScaleTransform object's xref:System.Windows.Media.ScaleTransform.ScaleY%2A property instead of its xref:System.Windows.Media.ScaleTransform.ScaleX%2A property.
[!code-xamlTransforms_snip#GraphicsMMVerticalFlipButtonExample2]
The vertically flipped button