Rotation Effect in .NET MAUI Effects View (SfEffectsView)

28 Jul 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