Customization of .NET MAUI Shimmer (SfShimmer)

19 Sep 20248 minutes to read

The SfShimmer control provides the following properties to customize the shimmer,

• Fill - To customize the background color of Shimmer view.
• WaveColor - To customize the Shimmer wave color.
• WaveWidth - To customize the Shimmer wave width.
• WaveDirection - To customize the Shimmer wave direction.
• RepeatCount - To customize the repeat count for the Shimmer.
• AnimationDuration - To customize the animation duration of the wave.

This section explains how to customize the Shimmer control.

Fill

The background of the SfShimmer view can be customized by using the Fill property. The default value of the Fill property is #F3EDF7.

XAML

<shimmer:SfShimmer x:Name="shimmer" VerticalOptions="FillAndExpand" Type="CirclePersona"
                   Fill="#89CFF0">
   <StackLayout>
      <Label 
         Text="Content is loaded!!">
      </Label>
   </StackLayout>
</shimmer:SfShimmer>

C#

SfShimmer Shimmer = new SfShimmer()
{
      Type = ShimmerType.CirclePersona,
      Fill = Color.FromRgba("#89CFF0"),
      Content = new Label
      {
         Text = "Content is loaded!"              
      }
};

this.Content = Shimmer;

WaveColor

The wave color in the SfShimmer view can be customized using the WaveColor property. The default value of WaveColor is the #FFFBFE Color.

XAML

<shimmer:SfShimmer x:Name="shimmer" VerticalOptions="FillAndExpand" Type="CirclePersona"
                   WaveColor="#89CFF0">
   <StackLayout>
      <Label 
         Text="Content is loaded!!">
      </Label>
   </StackLayout>
</shimmer:SfShimmer>

C#

SfShimmer Shimmer = new SfShimmer()
{
      Type = ShimmerType.CirclePersona,
      WaveColor = Color.FromRgba("#89CFF0"),
      Content = new Label
      {
         Text = "Content is loaded!"              
      }
};

this.Content = Shimmer;

WaveWidth

The width of the wave in the SfShimmer view can be customized using the WaveWidth property. The default value of WaveWidth is 200.

XAML

<shimmer:SfShimmer x:Name="shimmer" VerticalOptions="FillAndExpand" Type="CirclePersona"
                   WaveColor="#89CFF0"  
                   WaveWidth="50">
   <StackLayout>
      <Label 
         Text="Content is loaded!!">
      </Label>
   </StackLayout>
</shimmer:SfShimmer>

C#

SfShimmer Shimmer = new SfShimmer()
{
      Type = ShimmerType.CirclePersona,
      WaveColor = Color.FromRgba("#89CFF0"),
      WaveWidth = 50,
      Content = new Label
      {
         Text = "Content is loaded!"              
      }
};

this.Content = Shimmer;

WaveDirection

The direction of the wave in the SfShimmer view can be customized by using the WaveDirection property. By default, wave direction is rendered by the Default wave. The following wave directions are available in SfShimmer:

• Default - Default enum of the animation direction allows the animation from left top to right bottom.
• LeftToRight - LeftToRight enum of the animation direction allows the animation from left to right.
• RightToLeft - RightToLeft enum of the animation direction allows the animation from right to left.
• TopToBottom - TopToBottom enum of the animation direction allows the animation from top to bottom.
• BottomToTop - BottomToTop enum of the animation direction allows the animation from bottom to top.

XAML

<shimmer:SfShimmer x:Name="shimmer" VerticalOptions="FillAndExpand" Type="CirclePersona" 
                   WaveDirection="RightToLeft">
   <StackLayout>
      <Label 
         Text="Content is loaded!!">
      </Label>
   </StackLayout>
</shimmer:SfShimmer>

C#

SfShimmer Shimmer = new SfShimmer()
{
      Type = ShimmerType.CirclePersona,
      WaveDirection = ShimmerWaveDirection.RightToLeft,
      Content = new Label
      {
         Text = "Content is loaded!"              
      }
};

this.Content = Shimmer;

RepeatCount

The RepeatCount of the shimmer defines the number of the times the shimmer shape needed to render in the SfShimmer view. The default value of RepeatCount is 1.

XAML

<shimmer:SfShimmer x:Name="shimmer" VerticalOptions="FillAndExpand" Type="CirclePersona" 
                   RepeatCount="3">
   <StackLayout>
      <Label 
         Text="Content is loaded!!">
      </Label>
   </StackLayout>
</shimmer:SfShimmer>

C#

SfShimmer Shimmer = new SfShimmer()
{
      Type = ShimmerType.CirclePersona,
      RepeatCount = 3,
      Content = new Label
      {
         Text = "Content is loaded!"              
      }
};

this.Content = Shimmer;

AnimationDuration

The duration of the animation in the SfShimmer view can be customized using the AnimationDuration property. The default value of AnimationDuration is 1000 ms.

XAML

<shimmer:SfShimmer x:Name="shimmer" VerticalOptions="FillAndExpand" Type="CirclePersona" 
                   AnimationDuration="3000">
   <StackLayout>
      <Label 
         Text="Content is loaded!!">
      </Label>
   </StackLayout>
</shimmer:SfShimmer>

C#

SfShimmer Shimmer = new SfShimmer()
{
      Type = ShimmerType.CirclePersona,
      AnimationDuration = 3000,
      Content = new Label
      {
         Text = "Content is loaded!"              
      }
};

this.Content = Shimmer;