Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
..
Failed to load latest commit information.
Images reorganizing forms recipes Mar 12, 2018
README.md adding absolute link to guides Mar 29, 2018

README.md

id title samplecode subtitle
ADAAD566-516D-45A6-8DCA-9D2303EF9EA9
Rotation in Xamarin.Forms
title url
ScaleAndRotate
/samples/xamarin-forms/ScaleAndRotate/
title url
Layout
/samples/xamarin-forms/UserInterface/Layout/
Rotate views in Xamarin.Forms about the X, Y, and Z axes

Xamarin.Forms includes first-class support for rotating views in three dimensions. Every View instance exposes Rotation, RotationX, and RotationY as values that can be set or bound.

Understanding Rotation and Position

Views have AnchorX and AnchorY properties that define how a view is positioned. Rotation is applied relative to the anchor values. Rotation is interpreted as a degree value rather than a radian or gradian value.

Rotation values apply to the axes as follows:

  • Rotation – rotates around the Z-axis. When holding a phone normally, the Z-axis extends out towards the user.
  • RotationX – rotates around the X-axis. When holding a phone normally, the X-axis extends out towards the user's left and right.
  • RotationY – rotates around the Y-axis. When holding a phone normally, the Y-axis extends down towards the ground and up towards the sky.

See the following illustration to better understand how objects are rotated around the axes:

Rotation

The Rotation property rotates the view around the z-axis. Consider the following XAML that rotates a label 52 degrees about the z-axis:

<Label Text="Rotation" Rotation="52" />

In C#:

var label = new Label { Text = "Rotation", Rotation = 52 };

RotationX

The RotationX property rotates the view around the x-axis. Consider the following XAML that rotates a label 73 degrees about the x-axis:

<Label Text="RotationX" RotationX="73" />

In C#:

var label = new Label { Text = "RotationX", RotationX = 73 };

RotationY

The RotationY property rotates the view around the y-axis. Consider the following XAML that rotates a label 122 degrees about the y-axis:

<Label Text="RotationY" RotationY="122" />

In C#:

var label = new Label { Text = "RotationY", RotationY = 122 };