Customization in Xamarin Effects View (SfEffectsView)

5 Oct 20237 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.

XAML

<syncEffectsView:SfEffectsView CornerRadius="0,25">
    ...
</syncEffectsView:SfEffectsView>

C#

var effectsView = new SfEffectsView
{
    CornerRadius = new Thickness(0, 25)
};

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,
    LongPressEffects = 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
};

HighlightColor

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

XAML

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

C#

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

RippleColor

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

XAML

<syncEffectsView:SfEffectsView RippleColor="#2196F3">
    ...
</syncEffectsView:SfEffectsView>

C#

var effectsView = new SfEffectsView
{
    RippleColor = Color.FromHex("#2196F3")
};

SelectionColor

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

XAML

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

C#

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

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
};

HighlightColorOpacity

The HighlightColorOpacity property of SfEffectsView can be used to customise the opacity of the HighlightColor. The default value is 0.04 and it ranges from 0 to 1.

XAML

<syncEffectsView:SfEffectsView
    TouchDownEffects="Highlight"
    HighlightColorOpacity="0.5">
    ...
</syncEffectsView:SfEffectsView>

C#

var effectsView = new SfEffectsView
{
    TouchDownEffects = SfEffects.Highlight,
    HighlightColorOpacity = 0.5
};

RippleColorOpacity

The RippleColorOpacity property of SfEffectsView can be used to customise the opacity of the RippleColor. The default value is 0.12 and it ranges from 0 to 1.

XAML

<syncEffectsView:SfEffectsView
    TouchDownEffects="Ripple"
    RippleColorOpacity="0.5">
    ...
</syncEffectsView:SfEffectsView>

C#

var effectsView = new SfEffectsView
{
    TouchDownEffects = SfEffects.Ripple,
    RippleColorOpacity = 0.5
};

SelectionColorOpacity

The SelectionColorOpacity property of SfEffectsView can be used to customise the opacity of the SelectionColor. The default value is 0.12 and it ranges from 0 to 1.

XAML

<syncEffectsView:SfEffectsView
    LongPressEffects="Selection"
    SelectionColorOpacity="0.5">
    ...
</syncEffectsView:SfEffectsView>

C#

var effectsView = new SfEffectsView
{
    LongPressEffects = SfEffects.Selection,
    SelectionColorOpacity = 0.5
};

See also

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

How to use SfEffectsView in SfListView