Customization in Xamarin Effects View (SfEffectsView)

13 May 20215 minutes to read

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

CornerRadius

The CornerRadius property of SfEffectsView is used to customize the corner radius of the SfEffectsView control.

<syncEffectsView:SfEffectsView CornerRadius="0,25">
    ...
</syncEffectsView:SfEffectsView>
var effectsView = new SfEffectsView
{
    CornerRadius = new Thickness(0, 25)
};

EffectsView CornerRadius customization

RippleAnimationDuration

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

<syncEffectsView:SfEffectsView RippleAnimationDuration="800">
    ...
</syncEffectsView:SfEffectsView>
var effectsView = new SfEffectsView()
{
    RippleAnimationDuration = 800
};

ScaleAnimationDuration

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

<syncEffectsView:SfEffectsView
    ScaleAnimationDuration="800"
    LongPressEffects="Scale"
    ScaleFactor="0.85">
    ...
</syncEffectsView:SfEffectsView>
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.

<syncEffectsView:SfEffectsView
    RotationAnimationDuration="800"
    Angle="180"
    TouchDownEffects="Rotation">
    ...
</syncEffectsView:SfEffectsView>
var effectsView = new SfEffectsView()
{
    RotationAnimationDuration = 800,
    Angle = 180,
    LongPressEffects = SfEffects.Rotation
};

InitialRippleFactor

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

<syncEffectsView:SfEffectsView InitialRippleFactor="0.1">
    ...
</syncEffectsView:SfEffectsView>
var effectsView = new SfEffectsView
{
    InitialRippleFactor = 0.1
};

InitialRippleFactor customization

ScaleFactor

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

<syncEffectsView:SfEffectsView
     ScaleFactor="0.85"
     LongPressEffects="Scale"
     TouchDownEffects="None"
     TouchUpEffects="None">
     ...
 </syncEffectsView:SfEffectsView>
var effectsView = new SfEffectsView
{
    ScaleFactor = 0.85,
    LongPressEffects = SfEffects.Scale,
    TouchDownEffects = SfEffects.None,
    TouchUpEffects = SfEffects.None
};

ScaleFactor customization

HighlightColor

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

<syncEffectsView:SfEffectsView
     HighlightColor="#2196F3"
     TouchDownEffects="Highlight">
     ...
 </syncEffectsView:SfEffectsView>
var effectsView = new SfEffectsView
{
    HighlightColor = Color.FromHex("#2196F3"),
    TouchDownEffects = SfEffects.Highlight
};

Highlight Color customization

RippleColor

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

<syncEffectsView:SfEffectsView RippleColor="#2196F3">
    ...
</syncEffectsView:SfEffectsView>
var effectsView = new SfEffectsView
{
    RippleColor = Color.FromHex("#2196F3")
};

Ripple Color customization

SelectionColor

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

<syncEffectsView:SfEffectsView
    LongPressEffects="Selection"
    SelectionColor="#2196F3">
    ...
</syncEffectsView:SfEffectsView>
var effectsView = new SfEffectsView
{
    LongPressEffects = SfEffects.Selection,
    SelectionColor = Color.FromHex("#2196F3")
};

Selection Color customization

Angle

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

<syncEffectsView:SfEffectsView
    Angle="180"
    TouchDownEffects="Ripple,Rotation">
    ...
</syncEffectsView:SfEffectsView>
var effectsView = new SfEffectsView
{
    Angle = 180,
    TouchDownEffects = SfEffects.Ripple | SfEffects.Rotation
};

Rotation Angle customization

See also

How to get the selected item from ListView while using SfEffectsView within ItemTemplate

How to use SfEffectsView in SfListView