DEV Community

Cover image for Elevate Your App’s User Experience with the New .NET MAUI Shimmer Control
Jollen Moyani for Syncfusion, Inc.

Posted on • Originally published at syncfusion.com on

Elevate Your App’s User Experience with the New .NET MAUI Shimmer Control

The user experience of an application begins from the moment it is launched until the user exits, and it plays a vital role in engaging the user. Therefore, ensuring an exemplary user interface is essential for any app.

Showing an empty screen while loading data in the background can mess up the user experience. Loading indicators help us make the app look responsive instead. In the Essential Studio 2023 Volume 1 release, Syncfusion introduced a new loading indicator control in the .NET MAUI platform, the Shimmer control.

The new .NET MAUI Shimmer control provides a seamless user experience while the app fetches data from either local or remote sources. It works by showing a preview of the actual view displayed on the app rather than a loading animation. This helps us easily understand the loaded content while providing a more visually appealing user experience.

.NET MAUI Shimmer control

.NET MAUI Shimmer control

In this blog, we’ll see the key features of the .NET MAUI Shimmer control and the steps to get started with it.

Built-in shimmer effect views

The .NET MAUI Shimmer control supports seven built-in shimmer effect views that can be assigned using the Type property. These shimmer types are: circle, square, profile, article, video, feed, and shopping. By default, the circle persona view is assigned to the control.

Each view has its unique shimmer effect, allowing developers to choose the one that best fits their app’s UI design. The flexibility of customizing the shimmer view according to specific requirements can help developers enhance their app’s overall user experience.

Circle persona
Circle persona
Square persona
Square persona

Article persona

Article persona

Video persona
Video persona
Feed persona
Feed persona
Shopping persona
Shopping persona
Profile persona
Profile persona

Custom shimmer effect view

You can also easily create and integrate a custom shimmer effect view. To do so, set the CustomView property to the desired view, and then the shimmer effect will be applied. This will provide a more personalized and engaging user experience.

To customize the shape of the custom view, you can use the ShimmerView class with different ShapeTypes. It supports three shapes: rectangle, circle, and rounded rectangle. By default, the shape type is set to rectangle.

.NET MAUI Shimmer control with custom view

.NET MAUI Shimmer control with custom view

Customizing the shimmer view and its effects

Customizing the .NET MAUI Shimmer control is easy. You can adjust the color, wave color, wave width, repeat count, animation duration, and wave direction properties to create a shimmer effect that matches your app’s design.

For instance, you can set the repeat count to determine how often the shimmer effect should be rendered or change the wave direction to make the shimmer move horizontally or vertically. By experimenting with different combinations of properties, you can achieve a unique and eye-catching shimmer effect.

Shimmer effect with custom fill color
Shimmer effect with custom fill color
Shimmer effect with custom wave color
Shimmer effect with custom wave color
Shimmer effect with custom wave width
Shimmer effect with custom wave width
Shimmer effect with custom animation duration
Shimmer effect with custom animation duration
Shimmer effect with custom wave direction
Shimmer effect with custom wave direction
Shimmer effect with custom repeat count
Shimmer effect with custom repeat count

Integrating .NET MAUI Shimmer control into your app

Note: Before proceeding, please refer to the .NET MAUI Shimmer control getting started documentation.

The .NET MAUI Shimmer is a content view that accepts any layout and shows it with a shimmer effect. The shimmer animation effect will be displayed if the IsActive property value is set to true , and either built-in or custom views can be used to define the shimmer animation view.

Refer to the following code example. In it, we have used the Article shimmer effect type.

<ContentPage  
    . . .
 xmlns:shimmer="clr-namespace:Syncfusion.Maui.Shimmer;assembly=Syncfusion.Maui.Core">

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

</ContentPage>

Enter fullscreen mode Exit fullscreen mode

Integrating the Shimmer control in a .NET MAUI application

Integrating the Shimmer control in a .NET MAUI application

Conclusion

Thanks for reading! The Syncfusion .NET MAUI Shimmer is a powerful tool for enhancing your app’s user experience. By using its built-in views or creating custom views, you can add a shimmer effect to any view and make it more visually appealing. With its various customization options, you can tailor the shimmer effect to fit your specific design needs.

This control is available in our 2023 Volume 1 release. Check out our Release Notes and What’s New pages to see the other new updates in this release.

Also, try our .NET MAUI control demos on GitHub and share your feedback or ask questions in the comments section below. If you are not a Syncfusion customer, try our 30-day free trial to see how our components can enhance your projects.

For questions, you can also reach us through our support forum, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Top comments (0)