Methods in .NET MAUI Effects View (SfEffectsView)

28 Jul 202612 minutes to read

Effects can be applied and removed programmatically using the ApplyEffects and Reset methods.

Prerequisites

Before using the SfEffectsView, ensure the following NuGet package is installed in your .NET MAUI project:

  • Syncfusion.Maui.Core

For a step-by-step setup, refer to the Getting Started documentation.

ApplyEffects

The ApplyEffects method starts an effect on the Effects View, optionally repeating it.

Parameters

Parameter Type Default Description
effects SfEffects SfEffects.Ripple The effect to apply. Pass a single value or a bitwise combination (for example, SfEffects.Highlight \| SfEffects.Ripple).
rippleStartPosition RippleStartPosition RippleStartPosition.Default The starting edge or corner of the ripple. One of Left, Top, Right, Bottom, TopLeft, TopRight, BottomLeft, BottomRight, or Default.
rippleStartPoint Microsoft.Maui.Graphics.Point? null The point at which the ripple animation starts. When null, the ripple starts from the position determined by rippleStartPosition.
repeat bool false Indicates whether to repeat the effect. Only SfEffects.Ripple can be repeated; other effects ignore this value.

NOTE

The SfEffects applied using the ApplyEffects method will not be removed automatically.

Apply a Ripple from a Button

The example below triggers a ripple from the top-left corner when the user clicks a button.

<VerticalStackLayout Padding="10" 
                     Spacing="10">
    <syncEffectsView:SfEffectsView x:Name="effectsView"
                                   HorizontalOptions="Center" 
                                   VerticalOptions="Center"
                                   RippleBackground="Red">
        <Grid Padding="12" 
              WidthRequest="350" 
              HeightRequest="150"
              HorizontalOptions="Center" 
              VerticalOptions="Center">
            <Grid.Background>
                <LinearGradientBrush EndPoint="1,1">
                    <GradientStop Color="#FF6B6B" 
                                  Offset="0.0" />
                    <GradientStop Color="#4ECDC4" 
                                  Offset="1.0" />
                </LinearGradientBrush>
            </Grid.Background>
        </Grid>
    </syncEffectsView:SfEffectsView>

    <Button x:Name="applyEffects_Button"
            Text="Apply Effect" 
            WidthRequest="120"
            HeightRequest="40"
            Clicked="applyEffects_Button_Clicked"/>
</VerticalStackLayout>

The Clicked event can be handled in C# as follows:

private void applyEffects_Button_Clicked(object sender, EventArgs e)
{
    if (effectsView != null)
    {
        effectsView.ApplyEffects(effects: SfEffects.Ripple, rippleStartPosition: RippleStartPosition.TopLeft);
    }
}

Apply a Ripple at a Custom Point

Use rippleStartPoint to start the ripple at specific coordinates inside the view.

<VerticalStackLayout Padding="10" 
                     Spacing="10">
    <syncEffectsView:SfEffectsView x:Name="effectsView"
                                   HorizontalOptions="Center" 
                                   VerticalOptions="Center"
                                   RippleBackground="Red">
        <Grid Padding="12" 
              WidthRequest="350" 
              HeightRequest="150"
              HorizontalOptions="Center" 
              VerticalOptions="Center">
            <Grid.Background>
                <LinearGradientBrush EndPoint="1,1">
                    <GradientStop Color="#FF6B6B" 
                                  Offset="0.0" />
                    <GradientStop Color="#4ECDC4" 
                                  Offset="1.0" />
                </LinearGradientBrush>
            </Grid.Background>
        </Grid>
    </syncEffectsView:SfEffectsView>

    <Button x:Name="applyEffects_Button"
            Text="Apply Effect" 
            WidthRequest="120"
            HeightRequest="40"
            Clicked="applyEffects_Button_Clicked"/>
</VerticalStackLayout>

The Clicked event can be handled in C# as follows:

private void applyEffects_Button_Clicked(object sender, EventArgs e)
{
    if (effectsView != null)
    {
        effectsView.ApplyEffects(effects: SfEffects.Ripple, rippleStartPoint: new System.Drawing.Point(50, 75));
    }
}

Reset

The Reset method clears any effect previously applied through ApplyEffects, returning the Effects View to its rest state. The method takes no parameters and returns void.

Apply and Reset

<VerticalStackLayout Padding="10" 
                     Spacing="10" >
    <syncEffectsView:SfEffectsView x:Name="effectsView"
                                   HorizontalOptions="Center" 
                                   VerticalOptions="Center"
                                   RippleBackground="Red">
        <Grid Padding="12" 
              WidthRequest="350" 
              HeightRequest="150"
              HorizontalOptions="Center" 
              VerticalOptions="Center">
            <Grid.Background>
                <LinearGradientBrush EndPoint="1,1">
                    <GradientStop Color="#FF6B6B" 
                                  Offset="0.0" />
                    <GradientStop Color="#4ECDC4" 
                                  Offset="1.0" />
                </LinearGradientBrush>
            </Grid.Background>
        </Grid>
    </syncEffectsView:SfEffectsView>
    <HorizontalStackLayout Spacing="8"
                           HorizontalOptions="Center">
        <Button x:Name="applyEffects_Button"
                Text="Apply Effect" 
                WidthRequest="120"
                HeightRequest="40"
                Clicked="applyEffects_Button_Clicked"/>
        <Button x:Name="reset_Button"
                Text="Reset"
                WidthRequest="80"
                HeightRequest="40"
                Clicked="reset_Button_Clicked"/>
    </HorizontalStackLayout>
</VerticalStackLayout>
private void reset_Button_Clicked(object sender, EventArgs e)
{
    if (effectsView != null)
    {
        effectsView.Reset();
    }
}

private void applyEffects_Button_Clicked(object sender, EventArgs e)
{
    if (effectsView != null)
    {
        effectsView.ApplyEffects( effects: SfEffects.Ripple, repeat: true );
    }
}

See also