Rotate

Constrained

Constrained rotation enables you to rotate an element by exactly 90 degrees, either clockwise or counterclockwise, while maintaining the content within the same space and size constraints.

Method	Description
RotateCounterclockwise	Rotates its content 90 degrees counterclockwise.
RotateClockwise	Rotates its content 90 degrees clockwise.

WARNING

When applying rotation, be aware that it changes the dimensional behavior of your elements. What was previously considered width may become height and vice versa. This affects how other properties like alignment and padding work on the rotated element.

container.Row(row =>
{
    row.AutoItem()
        .RotateCounterclockwise()
        .AlignCenter()
        .Text("Definition")
        .Bold().FontColor(Colors.Blue.Darken2);
    
    row.AutoItem()
        .PaddingHorizontal(15)
        .LineVertical(2).LineColor(Colors.Blue.Medium);
    
    row.RelativeItem()
        .Background(Colors.Blue.Lighten5)
        .Padding(15)
        .Text(text =>
        {
            text.Span("A variable").Bold();
            text.Span(" is a named storage location in memory that holds a value which can be modified during program execution.");
        });
});

Free

Rotates its content clockwise, around its center, by a given angle.

container
    .Background(Colors.Grey.Lighten2)
    .Padding(25)
    .Row(row =>
    {
        row.Spacing(25);
        
        AddIcon(0);
        AddIcon(30);
        AddIcon(45);
        AddIcon(80);

        void AddIcon(float angle)
        {
            const float itemSize = 100;
            
            row.AutoItem()
                .Width(itemSize)
                .AspectRatio(1)
                .Rotate(angle)
                .Svg("Resources/compass.svg");
        }
    });