Customization in .NET MAUI Effects View (SfEffectsView)

The SfEffectsView control provides support to customize the animation duration, color, and more. This section explains how to customize the effects view control.

RippleAnimationDuration

The RippleAnimationDuration property of SfEffectsView is used to customize the duration of ripple animation.

XAML

<syncEffectsView:SfEffectsView RippleAnimationDuration="800">
</syncEffectsView:SfEffectsView>

C#

var effectsView = new SfEffectsView()
{
    RippleAnimationDuration = 800
};

ScaleAnimationDuration

The ScaleAnimationDuration property of SfEffectsView is used to customize the duration of scale animation.

XAML

<syncEffectsView:SfEffectsView
    ScaleAnimationDuration="800"
    LongPressEffects="Scale"
    ScaleFactor="0.85">
</syncEffectsView:SfEffectsView>

C#

var effectsView = new SfEffectsView()
{
    ScaleAnimationDuration = 800,
    LongPressEffects = SfEffects.Scale,
    ScaleFactor = 0.85
};

RotationAnimationDuration

The RotationAnimationDuration property of SfEffectsView is used to customize the duration of rotation animation.

XAML

<syncEffectsView:SfEffectsView
    RotationAnimationDuration="800"
    Angle="180"
    TouchDownEffects="Rotation">
</syncEffectsView:SfEffectsView>

C#

var effectsView = new SfEffectsView()
{
    RotationAnimationDuration = 800,
    Angle = 180,
    TouchDownEffects = SfEffects.Rotation
};

InitialRippleFactor

The InitialRippleFactor property of SfEffectsView is used to customize the radius of the ripple when ripple animation starts.

XAML

<syncEffectsView:SfEffectsView InitialRippleFactor="0.1">
</syncEffectsView:SfEffectsView>

C#

var effectsView = new SfEffectsView
{
    InitialRippleFactor = 0.1
};

ScaleFactor

The ScaleFactor property of SfEffectsView is used to customize the scale of the view.

XAML

<syncEffectsView:SfEffectsView
     ScaleFactor="0.85"
     LongPressEffects="Scale"
     TouchDownEffects="None"
     TouchUpEffects="None">
 </syncEffectsView:SfEffectsView>

C#

var effectsView = new SfEffectsView
{
    ScaleFactor = 0.85,
    LongPressEffects = SfEffects.Scale,
    TouchDownEffects = SfEffects.None,
    TouchUpEffects = SfEffects.None
};

HighlightBackground

The HighlightBackground property of SfEffectsView is used to customize the color of highlight effect.

XAML

<syncEffectsView:SfEffectsView
     HighlightBackground="#2196F3"
     TouchDownEffects="Highlight">
 </syncEffectsView:SfEffectsView>

C#

var effectsView = new SfEffectsView
{
    effectsView.HighlightBackground = new SolidColorBrush(Colors.Aqua),
    TouchDownEffects = SfEffects.Highlight
};

RippleBackground

The RippleBackground property of SfEffectsView is used to customize the color of ripple.

XAML

<syncEffectsView:SfEffectsView RippleBackground="#2196F3">
</syncEffectsView:SfEffectsView>

C#

var effectsView = new SfEffectsView
{
    RippleBackground = new SolidColorBrush(Colors.Aqua)
};

SelectionBackground

The SelectionBackground property of SfEffectsView is used to customize the color of selection effect.

XAML

<syncEffectsView:SfEffectsView
    LongPressEffects="Selection"
    SelectionBackground="#2196F3">
</syncEffectsView:SfEffectsView>

C#

var effectsView = new SfEffectsView
{
    LongPressEffects = SfEffects.Selection,
    SelectionBackground = new SolidColorBrush(Colors.Aqua)
};

Angle

The Angle property of SfEffectsView is used to customize the rotation angle.

XAML

<syncEffectsView:SfEffectsView
    Angle="180"
    TouchDownEffects="Ripple,Rotation">
</syncEffectsView:SfEffectsView>

C#

var effectsView = new SfEffectsView
{
    Angle = 180,
    TouchDownEffects = SfEffects.Ripple | SfEffects.Rotation
};