Class SfShimmer

Represents a loading indicator control that provides modern animations when data is being loaded.

Inheritance

System.Object

SfView

SfContentView

SfShimmer

Implements

IDrawableLayout

Microsoft.Maui.Graphics.IDrawable

Microsoft.Maui.IAbsoluteLayout

Microsoft.Maui.ILayout

Microsoft.Maui.IView

Microsoft.Maui.IElement

Microsoft.Maui.ITransform

Microsoft.Maui.IContainer

System.Collections.Generic.IList<Microsoft.Maui.IView>

System.Collections.Generic.ICollection<Microsoft.Maui.IView>

System.Collections.Generic.IEnumerable<Microsoft.Maui.IView>

System.Collections.IEnumerable

Microsoft.Maui.ISafeAreaView

Microsoft.Maui.IPadding

Microsoft.Maui.ICrossPlatformLayout

Microsoft.Maui.IVisualTreeElement

Inherited Members

SfContentView.Content

SfContentView.ContentProperty

SfView.Children

SfView.ClipToBounds

SfView.Padding

Namespace: Syncfusion.Maui.Toolkit.Shimmer

Assembly: Syncfusion.Maui.Toolkit.dll

Syntax

public class SfShimmer : SfContentView, IDrawableLayout, IDrawable, IAbsoluteLayout, ILayout, IView, IElement, ITransform, IContainer, IList<IView>, ICollection<IView>, IEnumerable<IView>, IEnumerable, ISafeAreaView, IPadding, ICrossPlatformLayout, IVisualTreeElement, ISemanticsProvider, IShimmer, IParentThemeElement, IThemeElement

Constructors

SfShimmer()

Initializes a new instance of the SfShimmer class.

Declaration

public SfShimmer()

Fields

AnimationDurationProperty

Identifies the AnimationDuration bindable property.

Declaration

public static readonly BindableProperty AnimationDurationProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The AnimationDuration property determines the duration of wave animation of the SfShimmer.

CustomViewProperty

Identifies the CustomView bindable property.

Declaration

public static readonly BindableProperty CustomViewProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The CustomView property is used to customize the view using framework elements. SfShimmer.

FillProperty

Identifies the Fill bindable property.

Declaration

public static readonly BindableProperty FillProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The Fill property determines the background color of the SfShimmer.

IsActiveProperty

Identifies the IsActive bindable property.

Declaration

public static readonly BindableProperty IsActiveProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The IsActive property determines whether to load the actual content of the SfShimmer.

RepeatCountProperty

Identifies the RepeatCount bindable property.

Declaration

public static readonly BindableProperty RepeatCountProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The RepeatCount property determines the number of times the built-in view animation is repeated in the SfShimmer.

TypeProperty

Identifies the Type bindable property.

Declaration

public static readonly BindableProperty TypeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The Type property determines view type of the SfShimmer.

WaveColorProperty

Identifies the WaveColor bindable property.

Declaration

public static readonly BindableProperty WaveColorProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The WaveColor property determines wave color in SfShimmer.

WaveDirectionProperty

Identifies the WaveDirection bindable property.

Declaration

public static readonly BindableProperty WaveDirectionProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The WaveDirection property determines the wave direction in SfShimmer.

WaveWidthProperty

Identifies the WaveWidth bindable property.

Declaration

public static readonly BindableProperty WaveWidthProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The WaveWidth property determines wave width in SfShimmer.

Properties

AnimationDuration

Gets or sets the duration of the wave animation in milliseconds.

Declaration

public double AnimationDuration { get; set; }

Property Value

Type	Description
System.Double	The default value of AnimationDuration is 1000 milliseconds.

Examples

The following code demonstrates how to use the AnimationDuration property in the SfShimmer.

XAML
C#

<shimmer:SfShimmer x:Name="Shimmer"
                   AnimationDuration="1500">
</shimmer:SfShimmer>

Shimmer.AnimationDuration = 1500;

CustomView

Gets or sets the custom view that is used for the loading view.

Declaration

public View CustomView { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.View	The default value of CustomView is null.

Examples

The following code demonstrates how to use the CustomView property in the SfShimmer.

XAML
C#

 <shimmer:SfShimmer x:Name="Shimmer">
     <shimmer:SfShimmer.CustomView>
         <Grid HeightRequest="50" WidthRequest="200">
             <Grid.RowDefinitions>
                 <RowDefinition/>
                 <RowDefinition/>
             </Grid.RowDefinitions>
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="0.25*"/>
                 <ColumnDefinition Width="0.75*"/>
             </Grid.ColumnDefinitions>

             <shimmer:ShimmerView ShapeType="Circle" Grid.RowSpan="2"/>
             <shimmer:ShimmerView Grid.Column="1" Margin="5"/>
             <shimmer:ShimmerView ShapeType="RoundedRectangle" Grid.Row="1" Grid.Column="1" Margin="5"/>
         </Grid>
     </shimmer:SfShimmer.CustomView>
 </shimmer:SfShimmer>

Grid grid = new Grid
{
    HeightRequest = 50, 
    WidthRequest = 200,
    RowDefinitions =
    {
        new RowDefinition(),
        new RowDefinition(),
    },
    ColumnDefinitions =
    {
        new ColumnDefinition { Width = new GridLength(0.25, GridUnitType.Star) },
        new ColumnDefinition { Width = new GridLength(0.75, GridUnitType.Star) }
    }
};

ShimmerView circleView = new ShimmerView() { ShapeType = ShimmerShapeType.Circle};
grid.SetRowSpan(circleView, 2);
grid.Add(circleView);
grid.Add(new ShimmerView { Margin = 5 }, 1);
grid.Add(new ShimmerView { Margin = 5, ShapeType = ShimmerShapeType.RoundedRectangle }, 1, 1);
Shimmer.CustomView = grid;

Fill

Gets or sets the background color of the shimmer view.

Declaration

public Brush Fill { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.Brush	The default value of Fill is "#F3EDF6".

Remarks

If the brush is a gradient brush, it only applies the first color.

Examples

The following code demonstrates how to use the Fill property in the Shimmer.

XAML
C#

<shimmer:SfShimmer x:Name="Shimmer" 
                   Fill="AliceBlue">
</shimmer:SfShimmer>

Shimmer.Fill = Brush.AliceBlue;

IsActive

Gets or sets a value indicating whether to load the actual content of the SfShimmer.

Declaration

public bool IsActive { get; set; }

Property Value

Type	Description
System.Boolean	The default value of IsActive is true.

Examples

The following code demonstrates how to use the IsActive property in the SfShimmer.

XAML
C#

<shimmer:SfShimmer x:Name="Shimmer"
                   IsActive="True">
</shimmer:SfShimmer>

Shimmer.IsActive = true;

RepeatCount

Gets or sets the number of times the built-in view should be repeated.

Declaration

public int RepeatCount { get; set; }

Property Value

Type	Description
System.Int32	The default value of RepeatCount is 1.

Remarks

The repeat count is applicable only to the built-in views and not to custom views.

Examples

The following code demonstrates how to use the RepeatCount property in the SfShimmer.

XAML
C#

<shimmer:SfShimmer x:Name="Shimmer"
                   RepeatCount="2">
</shimmer:SfShimmer>

Shimmer.RepeatCount = 2;

Type

Gets or sets the built-in shimmer view type.

Declaration

public ShimmerType Type { get; set; }

Property Value

Type	Description
ShimmerType	The default value of Type is CirclePersona.

Examples

The following code demonstrates how to use the Type property in the SfShimmer.

XAML
C#

<shimmer:SfShimmer x:Name="Shimmer"
                   Type="Article">
</shimmer:SfShimmer>

Shimmer.Type = ShimmerType.Article;

WaveColor

Gets or sets the shimmer wave color.

Declaration

public Color WaveColor { get; set; }

Property Value

Type	Description
Microsoft.Maui.Graphics.Color	The default value of WaveColor is "#FFFBFE".

Examples

The following code demonstrates how to use the WaveColor property in the SfShimmer.

XAML
C#

<shimmer:SfShimmer x:Name="Shimmer"
                   WaveColor="AliceBlue">
</shimmer:SfShimmer>

Shimmer.WaveColor = Colors.AliceBlue;

WaveDirection

Gets or sets the animation direction for Shimmer.

Declaration

public ShimmerWaveDirection WaveDirection { get; set; }

Property Value

Type	Description
ShimmerWaveDirection	The default value of WaveDirection is Default.

Examples

The following code demonstrates how to use the WaveDirection property in the SfShimmer.

XAML
C#

<shimmer:SfShimmer x:Name="Shimmer" 
                   WaveDirection="RightToLeft">
</shimmer:SfShimmer>

Shimmer.WaveDirection = ShimmerWaveDirection.RightToLeft;

WaveWidth

Gets or sets the width of the wave.

Declaration

public double WaveWidth { get; set; }

Property Value

Type	Description
System.Double	The default value of WaveWidth is 200.

Examples

The following code demonstrates how to use the WaveWidth property in the SfShimmer.

XAML
C#

<shimmer:SfShimmer x:Name="Shimmer"
                   WaveWidth="150">
</shimmer:SfShimmer>

Shimmer.WaveWidth = 150;

Implements

IDrawableLayout

Microsoft.Maui.Graphics.IDrawable

Microsoft.Maui.IAbsoluteLayout

Microsoft.Maui.ILayout

Microsoft.Maui.IView

Microsoft.Maui.IElement

Microsoft.Maui.ITransform

Microsoft.Maui.IContainer

System.Collections.Generic.IList<>

System.Collections.Generic.ICollection<>

System.Collections.Generic.IEnumerable<>

System.Collections.IEnumerable

Microsoft.Maui.ISafeAreaView

Microsoft.Maui.IPadding

Microsoft.Maui.ICrossPlatformLayout

Microsoft.Maui.IVisualTreeElement