How to customize the Shimmer using the ShimmerView class in the .NET MAUI Shimmer (SfShimmer)?

Syncfusion® .NET MAUI Shimmer (SfShimmer) supports the customization of shimmer using the ShimmerView class. This article explains how to customize the Shimmer using the ShimmerView class.

XAML

Initialize the Shimmer and CustomView property.

<shimmer:SfShimmer>
   <shimmer:SfShimmer.CustomView>
   </shimmer:SfShimmer.CustomView>
</shimmer:SfShimmer>

XAML

You can customize the Shimmer using the ShimmerView class within the CustomView. Here you can set the ShapeType property containing Rectangle, Rounded Rectangle, and Circle.

<shimmer:ShimmerView Grid.Row="0"
                    Grid.ColumnSpan="2"/>
<shimmer:ShimmerView Grid.Row="1"
                    Grid.ColumnSpan="2"/>
<shimmer:ShimmerView Grid.Row="2"
                    Grid.RowSpan="5"
                    ShapeType="Circle"/>
<shimmer:ShimmerView Grid.Row="3"
                    Grid.Column="1"
                    HeightRequest="10"
                    HorizontalOptions="Start"
                    VerticalOptions="Start"
                    WidthRequest="100"/>
<shimmer:ShimmerView Grid.Row="4"
                    Grid.Column="1"
                    HeightRequest="10"
                    ShapeType="Rectangle"
                    HorizontalOptions="Start"
                    VerticalOptions="Start"
                    WidthRequest="100"/>
<shimmer:ShimmerView Grid.Row="5"
                    Grid.Column="1"
                    ShapeType="Rectangle"
                    HeightRequest="10"
                    HorizontalOptions="Start"
                    VerticalOptions="Start"
                    WidthRequest="100"/>
<shimmer:ShimmerView Grid.Row="7"
                    Grid.ColumnSpan="2"
                    ShapeType="Rectangle"
                    HeightRequest="10"
                    HorizontalOptions="Start"
                    VerticalOptions="Start"
                    WidthRequest="200"/>
<shimmer:ShimmerView Grid.Row="8"
                    Grid.RowSpan="2"
                    Grid.ColumnSpan="2"
                    ShapeType="RoundedRectangle"
                    HeightRequest="20"
                    HorizontalOptions="Start"
                    VerticalOptions="Start"
                    WidthRequest="280"/> 

Download the complete sample on GitHub

Output:

Conclusion:

I hope you enjoyed learning how to customize the shimmer using the ShimmerView class in the .NET MAUI Shimmer (SfShimmer).

Refer to our .NET MAUI Shimmer’s feature tour page for its other groundbreaking feature representations. You can also explore our .NET MAUI Shimmer documentation to understand how to present and manipulate data.
For current customers, check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Shimmer and other .NET MAUI components.

Please let us know in the following comments section if you have any queries or require clarifications. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!