Class SfEffectsView
SfEffectsView is a container control that provides the out-of-the-box effects such as highlight, ripple, selection, scaling, and rotation.
Implements
Inherited Members
Namespace: Syncfusion.Maui.Toolkit.EffectsView
Assembly: Syncfusion.Maui.Toolkit.dll
Syntax
public class SfEffectsView : SfContentView, IDrawableLayout, IDrawable, IAbsoluteLayout, ILayout, IView, IElement, ITransform, IContainer, IList<IView>, ICollection<IView>, IEnumerable<IView>, IEnumerable, ISafeAreaView, IPadding, ICrossPlatformLayout, IVisualTreeElement, ISemanticsProvider, ITouchListener, ITapGestureListener, ILongPressGestureListener, IGestureListener, IParentThemeElement, IThemeElement
Examples
The following examples show how to initialize the badge view.
<effectsView:SfEffectsView>
<effectsView:SfEffectsView.Content>
<Button Text="Content"
WidthRequest="120"
HeightRequest="60"/>
</effectsView:SfEffectsView.Content>
</effectsView:SfEffectsView>
Constructors
SfEffectsView()
Initializes a new instance of the SfEffectsView class.
Declaration
public SfEffectsView()
Fields
AngleProperty
Identifies the Angle bindable property.
Declaration
public static readonly BindableProperty AngleProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for Angle bindable property. |
AutoResetEffectsProperty
Identifies the AutoResetEffects bindable property.
Declaration
public static readonly BindableProperty AutoResetEffectsProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for AutoResetEffects bindable property. |
FadeOutRippleProperty
Identifies the FadeOutRipple bindable property.
Declaration
public static readonly BindableProperty FadeOutRippleProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for FadeOutRipple bindable property. |
HighlightBackgroundProperty
Identifies the HighlightBackground bindable property.
Declaration
public static readonly BindableProperty HighlightBackgroundProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for HighlightBackground bindable property. |
InitialRippleFactorProperty
Identifies the InitialRippleFactor bindable property.
Declaration
public static readonly BindableProperty InitialRippleFactorProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for InitialRippleFactor bindable property. |
IsSelectedProperty
Identifies the IsSelected bindable property.
Declaration
public static readonly BindableProperty IsSelectedProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for IsSelected bindable property. |
LongPressedCommandParameterProperty
Identifies the LongPressedCommandParameter bindable property.
Declaration
public static readonly BindableProperty LongPressedCommandParameterProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for LongPressedCommandParameter bindable property. |
LongPressedCommandProperty
Identifies the LongPressedCommand bindable property.
Declaration
public static readonly BindableProperty LongPressedCommandProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for LongPressedCommand bindable property. |
LongPressEffectsProperty
Identifies the LongPressEffects bindable property.
Declaration
public static readonly BindableProperty LongPressEffectsProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for LongPressEffects bindable property. |
RippleAnimationDurationProperty
Identifies the RippleAnimationDuration bindable property.
Declaration
public static readonly BindableProperty RippleAnimationDurationProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for RippleAnimationDuration bindable property. |
RippleBackgroundProperty
Identifies the RippleBackground bindable property.
Declaration
public static readonly BindableProperty RippleBackgroundProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for RippleBackground bindable property. |
RotationAnimationDurationProperty
Identifies the RotationAnimationDuration bindable property.
Declaration
public static readonly BindableProperty RotationAnimationDurationProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for RotationAnimationDuration bindable property. |
ScaleAnimationDurationProperty
Identifies the ScaleAnimationDuration bindable property.
Declaration
public static readonly BindableProperty ScaleAnimationDurationProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for ScaleAnimationDuration bindable property. |
ScaleFactorProperty
Identifies the ScaleFactor bindable property.
Declaration
public static readonly BindableProperty ScaleFactorProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for ScaleFactor bindable property. |
SelectionBackgroundProperty
Identifies the SelectionBackground bindable property.
Declaration
public static readonly BindableProperty SelectionBackgroundProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for SelectionBackground bindable property. |
ShouldIgnoreTouchesProperty
Identifies the ShouldIgnoreTouches bindable property.
Declaration
public static readonly BindableProperty ShouldIgnoreTouchesProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for ShouldIgnoreTouches bindable property. |
TouchDownCommandParameterProperty
Identifies the TouchDownCommandParameter bindable property.
Declaration
public static readonly BindableProperty TouchDownCommandParameterProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for TouchDownCommandParameter bindable property. |
TouchDownCommandProperty
Identifies the TouchDownCommand bindable property.
Declaration
public static readonly BindableProperty TouchDownCommandProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for TouchDownCommand bindable property. |
TouchDownEffectsProperty
Identifies the TouchDownEffects bindable property.
Declaration
public static readonly BindableProperty TouchDownEffectsProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for TouchDownEffects bindable property. |
TouchUpCommandParameterProperty
Identifies the TouchUpCommandParameter bindable property.
Declaration
public static readonly BindableProperty TouchUpCommandParameterProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for TouchUpCommandParameter bindable property. |
TouchUpCommandProperty
Identifies the TouchUpCommand bindable property.
Declaration
public static readonly BindableProperty TouchUpCommandProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for TouchUpCommand bindable property. |
TouchUpEffectsProperty
Identifies the TouchUpEffects bindable property.
Declaration
public static readonly BindableProperty TouchUpEffectsProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for TouchUpEffects bindable property. |
Properties
Angle
Gets or sets the rotation angle.
Declaration
public int Angle { get; set; }
Property Value
Type | Description |
---|---|
System.Int32 | Specifies the rotation angle of the effects view. The default value is 0. |
Examples
The following example shows how to apply the angle for the effects view.
<effectsView:SfEffectsView Angle="180">
<effectsView:SfEffectsView.Content>
<Button Text="Content"
WidthRequest="120"
HeightRequest="60"/>
</effectsView:SfEffectsView.Content>
</effectsView:SfEffectsView>
AutoResetEffects
Gets or sets the effect that was start rendering on touch down and start removing on touch up in Android and UWP platforms.
Declaration
public AutoResetEffects AutoResetEffects { get; set; }
Property Value
Type | Description |
---|---|
AutoResetEffects | One of the AutoResetEffects enumeration that specifies the auto reset effect of the effects view. The default value is None. |
Examples
The following example shows how to apply the auto reset effect for the effects view.
<effectsView:SfEffectsView AutoResetEffects="Highlight">
<effectsView:SfEffectsView.Content>
<Button Text="Content"
WidthRequest="120"
HeightRequest="60"/>
</effectsView:SfEffectsView.Content>
</effectsView:SfEffectsView>
FadeOutRipple
Gets or sets a value indicating whether or not the ripple color should fade out as it grows.
Declaration
public bool FadeOutRipple { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | Specifies the value whether or not the ripple color should fade out as it grows. The default value is false. |
Examples
The following example shows how to apply the fade out ripple for the effects view.
<effectsView:SfEffectsView FadeOutRipple="True">
<effectsView:SfEffectsView.Content>
<Button Text="Content"
WidthRequest="120"
HeightRequest="60"/>
</effectsView:SfEffectsView.Content>
</effectsView:SfEffectsView>
HighlightBackground
Gets or sets the color to highlight the effects view.
Declaration
public Brush HighlightBackground { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.Maui.Controls.Brush | Specifies the highlight color of the effects view. The default value is SolidColorBrush(Colors.Black). |
Examples
The following example shows how to apply the highlight background for the effects view.
<effectsView:SfEffectsView HighlightBackground="Red">
<effectsView:SfEffectsView.Content>
<Button Text="Content"
WidthRequest="120"
HeightRequest="60"/>
</effectsView:SfEffectsView.Content>
</effectsView:SfEffectsView>
InitialRippleFactor
Gets or sets the initial radius factor of ripple effect.
Declaration
public double InitialRippleFactor { get; set; }
Property Value
Type | Description |
---|---|
System.Double | Specifies the initial radius factor of ripple effect. The default value is 0.25d. |
Examples
The following example shows how to apply the initial ripple factor for the effects view.
<effectsView:SfEffectsView InitialRippleFactor="0.75">
<effectsView:SfEffectsView.Content>
<Button Text="Content"
WidthRequest="120"
HeightRequest="60"/>
</effectsView:SfEffectsView.Content>
</effectsView:SfEffectsView>
IsSelected
Gets or sets a value indicating whether to set the view state as selected.
Declaration
public bool IsSelected { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | Specifies the value that indicates whether the view state should be set to selected or not. The default value is false. |
Examples
The following example shows how to apply the IsSelected for the effects view.
<effectsView:SfEffectsView IsSelected="True">
<effectsView:SfEffectsView.Content>
<Button Text="Content"
WidthRequest="120"
HeightRequest="60"/>
</effectsView:SfEffectsView.Content>
</effectsView:SfEffectsView>
LongPressedCommand
Gets or sets the command to invoke when handling long press.
Declaration
public ICommand LongPressedCommand { get; set; }
Property Value
Type | Description |
---|---|
System.Windows.Input.ICommand | Specifies the command to invoke when handling long press in EffectsView. The default value is null. |
Examples
The following example shows how to apply the long pressed command for the effects view.
<effectsView:SfEffectsView LongPressedCommand="{Binding LongPressedCommand}">
<effectsView:SfEffectsView.Content>
<Button Text="Content"
WidthRequest="120"
HeightRequest="60"/>
</effectsView:SfEffectsView.Content>
</effectsView:SfEffectsView>
LongPressedCommandParameter
Gets or sets the parameter to pass to the LongPressedCommand.
Declaration
public object LongPressedCommandParameter { get; set; }
Property Value
Type | Description |
---|---|
System.Object | Specifies the parameter of the long pressed command in EffectsView. The default value is null. |
Examples
The following example shows how to apply the long pressed command parameter for the effects view.
<effectsView:SfEffectsView x:Name="sfEffectsView"
LongPressedCommand="{Binding LongPressedCommand}"
LongPressedCommandParameter="{x:Reference sfEffectsView}">
<effectsView:SfEffectsView.Content>
<Button Text="Content"
WidthRequest="120"
HeightRequest="60"/>
</effectsView:SfEffectsView.Content>
</effectsView:SfEffectsView>
LongPressEffects
Gets or sets the long-press effect.
Declaration
public SfEffects LongPressEffects { get; set; }
Property Value
Type | Description |
---|---|
SfEffects | One of the SfEffects enumeration that specifies the long press effect of the effects view. The default value is None. |
Examples
The following example shows how to apply the long press effect for the effects view.
<effectsView:SfEffectsView LongPressEffects="Ripple">
<effectsView:SfEffectsView.Content>
<Button Text="Content"
WidthRequest="120"
HeightRequest="60"/>
</effectsView:SfEffectsView.Content>
</effectsView:SfEffectsView>
RippleAnimationDuration
Gets or sets the duration of the ripple animation in milliseconds.
Declaration
public double RippleAnimationDuration { get; set; }
Property Value
Type | Description |
---|---|
System.Double | Specifies the duration of the ripple animation. The default value is 180d. |
Examples
The following example shows how to apply the ripple animation duration for the effects view.
<effectsView:SfEffectsView RippleAnimationDuration="1200">
<effectsView:SfEffectsView.Content>
<Button Text="Content"
WidthRequest="120"
HeightRequest="60"/>
</effectsView:SfEffectsView.Content>
</effectsView:SfEffectsView>
RippleBackground
Gets or sets the color of the ripple.
Declaration
public Brush RippleBackground { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.Maui.Controls.Brush | Specifies the color of the ripple effect. The default value is SolidColorBrush(Colors.Black). |
Examples
The following example shows how to apply the ripple background for the effects view.
<effectsView:SfEffectsView RippleBackground="Red">
<effectsView:SfEffectsView.Content>
<Button Text="Content"
WidthRequest="120"
HeightRequest="60"/>
</effectsView:SfEffectsView.Content>
</effectsView:SfEffectsView>
RotationAnimationDuration
Gets or sets the duration of the rotation animation in milliseconds.
Declaration
public double RotationAnimationDuration { get; set; }
Property Value
Type | Description |
---|---|
System.Double | Specifies the duration of the rotation animation. The default value is 200d. |
Examples
The following example shows how to apply the rotation animation duration for the effects view.
<effectsView:SfEffectsView RotationAnimationDuration="1200">
<effectsView:SfEffectsView.Content>
<Button Text="Content"
WidthRequest="120"
HeightRequest="60"/>
</effectsView:SfEffectsView.Content>
</effectsView:SfEffectsView>
ScaleAnimationDuration
Gets or sets the duration of the scale animation in milliseconds.
Declaration
public double ScaleAnimationDuration { get; set; }
Property Value
Type | Description |
---|---|
System.Double | Specifies the duration of the scale animation. The default value is 150d. |
Examples
The following example shows how to apply the scale animation duration for the effects view.
<effectsView:SfEffectsView ScaleAnimationDuration="1200">
<effectsView:SfEffectsView.Content>
<Button Text="Content"
WidthRequest="120"
HeightRequest="60"/>
</effectsView:SfEffectsView.Content>
</effectsView:SfEffectsView>
ScaleFactor
Gets or sets the scale factor used for scale effect.
Declaration
public double ScaleFactor { get; set; }
Property Value
Type | Description |
---|---|
System.Double | Specifies the scale factor of the scale effect. The default value is 1d. |
Examples
The following example shows how to apply the scale factor for the effects view.
<effectsView:SfEffectsView ScaleFactor="0.5">
<effectsView:SfEffectsView.Content>
<Button Text="Content"
WidthRequest="120"
HeightRequest="60"/>
</effectsView:SfEffectsView.Content>
</effectsView:SfEffectsView>
SelectionBackground
Gets or sets the color applied when the view is on selected state.
Declaration
public Brush SelectionBackground { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.Maui.Controls.Brush | Specifies the selection color of the effects view. The default value is SolidColorBrush(Colors.Black). |
Examples
The following example shows how to apply the selection background for the effects view.
<effectsView:SfEffectsView SelectionBackground="Red">
<effectsView:SfEffectsView.Content>
<Button Text="Content"
WidthRequest="120"
HeightRequest="60"/>
</effectsView:SfEffectsView.Content>
</effectsView:SfEffectsView>
ShouldIgnoreTouches
Gets or sets a value indicating whether to ignore the touches in EffectsView.
Declaration
public bool ShouldIgnoreTouches { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | Specifies the value which indicates whether to ignore the touches in EffectsView. The default value is false. |
Examples
The following example shows how to apply the ShouldIgnoreTouches for the effects view.
<effectsView:SfEffectsView ShouldIgnoreTouches="True">
<effectsView:SfEffectsView.Content>
<Button Text="Content"
WidthRequest="120"
HeightRequest="60"/>
</effectsView:SfEffectsView.Content>
</effectsView:SfEffectsView>
TouchDownCommand
Gets or sets the command to invoke when handling touch down.
Declaration
public ICommand TouchDownCommand { get; set; }
Property Value
Type | Description |
---|---|
System.Windows.Input.ICommand | Specifies the command to invoke when handling touch down in EffectsView. The default value is null. |
Examples
The following example shows how to apply the touch down command for the effects view.
<effectsView:SfEffectsView TouchDownCommand="{Binding TouchDownCommand}">
<effectsView:SfEffectsView.Content>
<Button Text="Content"
WidthRequest="120"
HeightRequest="60"/>
</effectsView:SfEffectsView.Content>
</effectsView:SfEffectsView>
TouchDownCommandParameter
Gets or sets the parameter to pass to the TouchDownCommand.
Declaration
public object TouchDownCommandParameter { get; set; }
Property Value
Type | Description |
---|---|
System.Object | Specifies the parameter of the touch down command in EffectsView. The default value is null. |
Examples
The following example shows how to apply the touch down command parameter for the effects view.
<effectsView:SfEffectsView x:Name="sfEffectsView"
TouchDownCommand="{Binding TouchDownCommand}"
TouchDownCommandParameter="{x:Reference sfEffectsView}">
<effectsView:SfEffectsView.Content>
<Button Text="Content"
WidthRequest="120"
HeightRequest="60"/>
</effectsView:SfEffectsView.Content>
</effectsView:SfEffectsView>
TouchDownEffects
Gets or sets the effects for touch down.
Declaration
public SfEffects TouchDownEffects { get; set; }
Property Value
Type | Description |
---|---|
SfEffects | One of the SfEffects enumeration that specifies the touch down effect of the effects view. The default value is Ripple. |
Examples
The following example shows how to apply the touch down effect for the effects view.
<effectsView:SfEffectsView TouchDownEffects="Highlight">
<effectsView:SfEffectsView.Content>
<Button Text="Content"
WidthRequest="120"
HeightRequest="60"/>
</effectsView:SfEffectsView.Content>
</effectsView:SfEffectsView>
TouchUpCommand
Gets or sets the command to invoke when handling touch up.
Declaration
public ICommand TouchUpCommand { get; set; }
Property Value
Type | Description |
---|---|
System.Windows.Input.ICommand | Specifies the command to invoke when handling touch up in EffectsView. The default value is null. |
Examples
The following example shows how to apply the touch up command for the effects view.
<effectsView:SfEffectsView TouchUpCommand="{Binding TouchUpCommand}">
<effectsView:SfEffectsView.Content>
<Button Text="Content"
WidthRequest="120"
HeightRequest="60"/>
</effectsView:SfEffectsView.Content>
</effectsView:SfEffectsView>
TouchUpCommandParameter
Gets or sets the parameter to pass to the TouchUpCommand.
Declaration
public object TouchUpCommandParameter { get; set; }
Property Value
Type | Description |
---|---|
System.Object | Specifies the parameter of the touch up command in EffectsView. The default value is null. |
Examples
The following example shows how to apply the touch up command parameter for the effects view.
<effectsView:SfEffectsView x:Name="sfEffectsView"
TouchUpCommand="{Binding TouchUpCommand}"
TouchUpCommandParameter="{x:Reference sfEffectsView}">
<effectsView:SfEffectsView.Content>
<Button Text="Content"
WidthRequest="120"
HeightRequest="60"/>
</effectsView:SfEffectsView.Content>
</effectsView:SfEffectsView>
TouchUpEffects
Gets or sets the effects for touch up.
Declaration
public SfEffects TouchUpEffects { get; set; }
Property Value
Type | Description |
---|---|
SfEffects | One of the SfEffects enumeration that specifies the touch up effect of the effects view. The default value is None. |
Examples
The following example shows how to apply the touch up effect for the effects view.
<effectsView:SfEffectsView TouchUpEffects="Ripple">
<effectsView:SfEffectsView.Content>
<Button Text="Content"
WidthRequest="120"
HeightRequest="60"/>
</effectsView:SfEffectsView.Content>
</effectsView:SfEffectsView>
Methods
ApplyEffects(SfEffects, RippleStartPosition, Nullable<Point>, Boolean)
Used to trigger the invoke the effects.
Declaration
public void ApplyEffects(SfEffects effects, RippleStartPosition rippleStartPosition, Nullable<Point> rippleStartPoint = null, bool repeat = false)
Parameters
Type | Name | Description |
---|---|---|
SfEffects | effects | SfEffects that need to apply. |
RippleStartPosition | rippleStartPosition | Position at where the ripple animation start growing. By default, value ripple start from center. |
System.Nullable<System.Drawing.Point> | rippleStartPoint | Point at which the ripple animation start growing. By default, value is null. |
System.Boolean | repeat | To set whether to ripple animation need to repeat or not. |
Remarks
The effects applied using this method will not be removed automatically.
Examples
SfEffectsView effectsView = new SfEffectsView();
effectsView.ApplyEffects(SfEffects.Ripple, RippleStartPosition.Top, new System.Drawing.Point(50, 50), true);
Reset()
Removes the ripple and highlight effects.
Declaration
public void Reset()
Remarks
This method stops any ongoing animations and resets the view to its original state. It is useful when you want to clear all effects and start fresh.
Examples
SfEffectsView effectsView = new SfEffectsView();
effectsView.Reset();
Events
AnimationCompleted
The AnimationCompleted event occurs on direct interaction and when programmatically applied, it only occurs when touch-up is called on direct interaction and after the effects have been completed. It will not trigger the selection effect.
Declaration
public event EventHandler AnimationCompleted
Event Type
Type | Description |
---|---|
System.EventHandler | Occurs when animation is completed. |
LongPressed
Occurs when handling long press.
Declaration
public event EventHandler LongPressed
Event Type
Type | Description |
---|---|
System.EventHandler | Occurs when handling long press. |
SelectionChanged
The SelectionChanged event triggers both the rendering of Selection by direct interaction and the IsSelected property changed.
Declaration
public event EventHandler SelectionChanged
Event Type
Type | Description |
---|---|
System.EventHandler | Occurs when changing IsSelected property and setting selection effect. |
TouchDown
Occurs when handling touch down.
Declaration
public event EventHandler TouchDown
Event Type
Type | Description |
---|---|
System.EventHandler | Occurs when handling touch down. |
TouchUp
Occurs when handling touch up.
Declaration
public event EventHandler TouchUp
Event Type
Type | Description |
---|---|
System.EventHandler | Occurs when handling touch up. |