Skip to content
On this page

Rotate

Constrained

  • This container changes content rotation in 90 degrees increments,
  • The content is always put within the same space and size constraints.

There are two methods available: .RotateLeft() and .RotateRight()

Example:

















 
 





































.Padding(20)
.Grid(grid =>
{
    grid.Columns(2);
    grid.Spacing(10);
    
    foreach (var turns in Enumerable.Range(0, 4))
    {
        grid.Item()
            .Width(200)
            .Height(200)
            .Background(Colors.Grey.Lighten2)
            .Padding(10)
            .Element(element =>
            {
                foreach (var x in Enumerable.Range(0, turns))
                    element = element.RotateRight();

                return element;
            })
            .MinimalBox()
            .Background(Colors.White)
            .Padding(10)
            .Text($"Rotated {turns * 90}°")
            .FontSize(20);
    }
});
.Padding(20)
.Grid(grid =>
{
    grid.Columns(2);
    grid.Spacing(10);
    
    foreach (var turns in Enumerable.Range(0, 4))
    {
        grid.Item()
            .Width(200)
            .Height(200)
            .Background(Colors.Grey.Lighten2)
            .Padding(10)
            .Element(element =>
            {
                foreach (var x in Enumerable.Range(0, turns))
                    element = element.RotateRight();

                return element;
            })
            .MinimalBox()
            .Background(Colors.White)
            .Padding(10)
            .Text($"Rotated {turns * 90}°")
            .FontSize(20);
    }
});

example

Free

  • This container allows to rotate its child by any angle provided in degrees,
  • The content is always put within the same space and size constraints,
    • The rendered child appears like floating below/above of the other content.

Example:









 


















.Padding(25)
.Background(Colors.Grey.Lighten2)

.AlignCenter()
.AlignMiddle()

.Background(Colors.White)

.Rotate(30)

.Width(100)
.Height(100)
.Background(Colors.Blue.Medium);
.Padding(25)
.Background(Colors.Grey.Lighten2)

.AlignCenter()
.AlignMiddle()

.Background(Colors.White)

.Rotate(30)

.Width(100)
.Height(100)
.Background(Colors.Blue.Medium);

example

You can apply additional translation to change the rotation origin point:









 
 



 
 
























.Padding(25)
.Background(Colors.Grey.Lighten2)

.AlignCenter()
.AlignMiddle()

.Background(Colors.White)

.TranslateX(50)
.TranslateY(50)

.Rotate(30)

.TranslateX(-50)
.TranslateY(-50)

.Width(100)
.Height(100)
.Background(Colors.Blue.Medium);
.Padding(25)
.Background(Colors.Grey.Lighten2)

.AlignCenter()
.AlignMiddle()

.Background(Colors.White)

.TranslateX(50)
.TranslateY(50)

.Rotate(30)

.TranslateX(-50)
.TranslateY(-50)

.Width(100)
.Height(100)
.Background(Colors.Blue.Medium);

example

Released under the MIT License.