Rotation Effect in .NET MAUI Effects View

5 Aug 202613 minutes to read

The SfEffects.Rotation effect rotates the Effects View around its center by the specified Angle. Positive angles rotate clockwise; negative angles rotate counter-clockwise.

Adding a Basic Rotation

The example below rotates the Effects View by 180 degrees when the user presses it.

<Border WidthRequest="36"
        HeightRequest="36"
        HorizontalOptions="Center"
        VerticalOptions="Center"
        StrokeThickness="0">
    <Border.StrokeShape>
        <RoundRectangle CornerRadius="10" />
    </Border.StrokeShape>
    <syncEffectsView:SfEffectsView Angle="180"
                                   TouchDownEffects="Rotation"
                                   HorizontalOptions="Center">
        <HorizontalStackLayout Spacing="-4">
            <Label Text="↑"
                   FontSize="24"
                   FontAttributes="Bold"
                   VerticalOptions="Start" />
            <Label Text="↓"
                   FontSize="24"
                   FontAttributes="Bold"
                   VerticalOptions="End"
                   Margin="0,8,0,0" />
        </HorizontalStackLayout>
    </syncEffectsView:SfEffectsView>
</Border>
var border = new Border
{
    WidthRequest = 36,
    HeightRequest = 36,
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    StrokeThickness = 0,
    StrokeShape = new RoundRectangle
    {
        CornerRadius = new CornerRadius(10)
    }
};

var effectsView = new SfEffectsView
{
    Angle = 180,
    TouchDownEffects = SfEffects.Rotation,
    HorizontalOptions = LayoutOptions.Center
};

var stackLayout = new HorizontalStackLayout
{
    Spacing = -4,
    Children =
    {
        new Label
        {
            Text = "↑",
            FontSize = 24,
            FontAttributes = FontAttributes.Bold,
            VerticalOptions = LayoutOptions.Start
        },

        new Label
        {
            Text = "↓",
            FontSize = 24,
            FontAttributes = FontAttributes.Bold,
            VerticalOptions = LayoutOptions.End,
            Margin = new Thickness(0, 8, 0, 0)
        }
    }
};

effectsView.Content = stackLayout;
border.Content = effectsView;
this.Content = border;

Rotation effect rotating the view 180 degrees

Customizing the Duration

The example below slows the rotation to 800 milliseconds.

<Border WidthRequest="36"
        HeightRequest="36"
        HorizontalOptions="Center"
        VerticalOptions="Center"
        StrokeThickness="0">
    <Border.StrokeShape>
        <RoundRectangle CornerRadius="10" />
    </Border.StrokeShape>
    <syncEffectsView:SfEffectsView TouchDownEffects="Rotation"
                                   Angle="360"
                                   RotationAnimationDuration="800"
                                   HorizontalOptions="Center">
        <HorizontalStackLayout Spacing="-4">
            <Label Text="↑"
                   FontSize="24"
                   FontAttributes="Bold"
                   VerticalOptions="Start" />
            <Label Text="↓"
                   FontSize="24"
                   FontAttributes="Bold"
                   VerticalOptions="End"
                   Margin="0,8,0,0" />
        </HorizontalStackLayout>
    </syncEffectsView:SfEffectsView>
</Border>
var border = new Border
{
    WidthRequest = 36,
    HeightRequest = 36,
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    StrokeThickness = 0,
    StrokeShape = new RoundRectangle
    {
        CornerRadius = new CornerRadius(10)
    }
};

var effectsView = new SfEffectsView
{
    TouchDownEffects = SfEffects.Rotation,
    Angle = 360,
    RotationAnimationDuration = 800,
    HorizontalOptions = LayoutOptions.Center
};

var stackLayout = new HorizontalStackLayout
{
    Spacing = -4,
    Children =
    {
        new Label
        {
            Text = "↑",
            FontSize = 24,
            FontAttributes = FontAttributes.Bold,
            VerticalOptions = LayoutOptions.Start
        },

        new Label
        {
            Text = "↓",
            FontSize = 24,
            FontAttributes = FontAttributes.Bold,
            VerticalOptions = LayoutOptions.End,
            Margin = new Thickness(0, 8, 0, 0)
        }
    }
};

effectsView.Content = stackLayout;
border.Content = effectsView;
this.Content = border;

Combining with Other Effects

Rotation cannot share a trigger property with other effects. Place another effect on a different trigger property so the two effects can play independently.

<Border WidthRequest="36"
        HeightRequest="36"
        HorizontalOptions="Center"
        VerticalOptions="Center"
        StrokeThickness="0">
    <Border.StrokeShape>
        <RoundRectangle CornerRadius="10" />
    </Border.StrokeShape>
    <syncEffectsView:SfEffectsView TouchDownEffects="Rotation"
                                   LongPressEffects="Ripple"
                                   Angle="180"
                                   HorizontalOptions="Center">
        <HorizontalStackLayout Spacing="-4">
            <Label Text="↑"
                   FontSize="24"
                   FontAttributes="Bold"
                   VerticalOptions="Start" />
            <Label Text="↓"
                   FontSize="24"
                   FontAttributes="Bold"
                   VerticalOptions="End"
                   Margin="0,8,0,0" />
        </HorizontalStackLayout>
    </syncEffectsView:SfEffectsView>
</Border>
var border = new Border
{
    WidthRequest = 36,
    HeightRequest = 36,
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    StrokeThickness = 0,
    StrokeShape = new RoundRectangle
    {
        CornerRadius = new CornerRadius(10)
    }
};

var effectsView = new SfEffectsView
{
    TouchDownEffects = SfEffects.Rotation,
    LongPressEffects = SfEffects.Ripple,
    Angle = 180,
    HorizontalOptions = LayoutOptions.Center
};

var stackLayout = new HorizontalStackLayout
{
    Spacing = -4,
    Children =
    {
        new Label
        {
            Text = "↑",
            FontSize = 24,
            FontAttributes = FontAttributes.Bold,
            VerticalOptions = LayoutOptions.Start
        },

        new Label
        {
            Text = "↓",
            FontSize = 24,
            FontAttributes = FontAttributes.Bold,
            VerticalOptions = LayoutOptions.End,
            Margin = new Thickness(0, 8, 0, 0)
        }
    }
};

effectsView.Content = stackLayout;
border.Content = effectsView;
this.Content = border;

See also