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.Core
Assembly: Syncfusion.Maui.Core.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 275d. |
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. |
ArrangeContent(Rect)
ArrangeContent method.
Declaration
protected override Size ArrangeContent(Rect bounds)
Parameters
Type | Name | Description |
---|---|---|
Microsoft.Maui.Graphics.Rect | bounds | The bounds. |
Returns
Type | Description |
---|---|
Microsoft.Maui.Graphics.Size | The size. |
Overrides
OnDraw(ICanvas, RectF)
The draw method
Declaration
protected override void OnDraw(ICanvas canvas, RectF dirtyRect)
Parameters
Type | Name | Description |
---|---|---|
Microsoft.Maui.Graphics.ICanvas | canvas | The Canvas |
Microsoft.Maui.Graphics.RectF | dirtyRect | The Rectangle |
Overrides
Reset()
Removes the ripple and highlight effects.
Declaration
public void 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. |