Elevate Your App’s User Experience with the New .NET MAUI Shimmer Control
Tags: netmaui, mobile, whatsnew, desktop
Published: 2023-04-19 15:10:25

---
title: Elevate Your App’s User Experience with the New .NET MAUI Shimmer Control
published: true
date: 2023-04-19 11:58:06 UTC
tags: netmaui, mobile, whatsnew, desktop
canonical_url: https://www.syncfusion.com/blogs/post/dotnet-maui-shimmer-control.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/siimxmo1uj47m0qs9hcu.png
---
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](https://www.syncfusion.com/forums/181344/essential-studio-2023-volume-1-main-release-v21-1-35-is-available-for-download "Essential Studio 2023 Volume 1") release, [Syncfusion](https://www.syncfusion.com/ "Syncfusion UI components") introduced a new loading indicator control in the [.NET MAUI](https://www.syncfusion.com/maui-controls ".NET MAUI controls") platform, the [Shimmer](https://www.syncfusion.com/maui-controls/maui-shimmer ".NET MAUI Shimmer control") 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.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/NET-MAUI-Shimmer-control-1.gif" alt=".NET MAUI Shimmer control" style="width:100%">

  <figcaption>.NET MAUI Shimmer control</figcaption>

</figure>

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](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Shimmer.SfShimmer.html#Syncfusion_Maui_Shimmer_SfShimmer_Type "Type property of .NET MAUI Shimmer control") 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.
<table>
<tbody>
<tr style="background: none;">
<td style="width: 50%; border: none !important;">
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Circle-persona-1.gif" alt="Circle persona" style="width:100%">

  <figcaption>Circle persona</figcaption>

</figure>
</td>
<td style="width: 50%; border: none !important;">
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Square-persona-1.gif" alt="Square persona" style="width:100%">

  <figcaption>Square persona</figcaption>

</figure>
</td>
</tr>
</tbody>
</table>
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Article-persona-1.gif" alt="Article persona" style="width:100%">

  <figcaption>Article persona</figcaption>

</figure>
<table>
<tbody>
<tr style="background: none;">
<td style="width: 50%; border: none !important;">
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Video-persona-1.gif" alt="Video persona" style="width:100%">

  <figcaption>Video persona</figcaption>

</figure>
</td>
<td style="width: 50%; border: none !important;">
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Feed-persona-1.gif" alt="Feed persona" style="width:100%">

  <figcaption>Feed persona</figcaption>

</figure>
</td>
</tr>
</tbody>
<tbody>
<tr style="background: none;">
<td style="width: 50%; border: none !important;">
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Shopping-persona-1.gif" alt="Shopping persona" style="width:100%">

  <figcaption>Shopping persona</figcaption>

</figure>
</td>
<td style="width: 50%; border: none !important;">
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Profile-persona-1.gif" alt="Profile persona" style="width:100%">

  <figcaption>Profile persona</figcaption>

</figure>
</td>
</tr>
</tbody>
</table>

## Custom shimmer effect view

You can also easily create and integrate a custom shimmer effect view. To do so, set the [CustomView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Shimmer.SfShimmer.html#Syncfusion_Maui_Shimmer_SfShimmer_CustomView "CustomView property of .NET MAUI Shimmer control") 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](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Shimmer.ShimmerView.html "ShimmerView class of .NET MAUI Shimmer control") class with different [ShapeTypes](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Shimmer.ShimmerView.html#Syncfusion_Maui_Shimmer_ShimmerView_ShapeType "ShapeType property of .NET MAUI Shimmer control"). It supports three shapes: rectangle, circle, and rounded rectangle. By default, the shape type is set to **rectangle**.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/NET-MAUI-Shimmer-control-with-custom-view-1.gif" alt=".NET MAUI Shimmer control with custom view" style="width:100%">

  <figcaption>.NET MAUI Shimmer control with custom view</figcaption>

</figure>

## Customizing the shimmer view and its effects

Customizing the .NET MAUI Shimmer control is easy. You can adjust the [color](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Shimmer.SfShimmer.html#Syncfusion_Maui_Shimmer_SfShimmer_Fill "Fill property of .NET MAUI Shimmer control"), [wave color](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Shimmer.SfShimmer.html#Syncfusion_Maui_Shimmer_SfShimmer_WaveColor "WaveColor property of .NET MAUI Shimmer control"), [wave width](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Shimmer.SfShimmer.html#Syncfusion_Maui_Shimmer_SfShimmer_WaveWidth "WaveWidth property of .NET MAUI Shimmer control"), [repeat count](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Shimmer.SfShimmer.html#Syncfusion_Maui_Shimmer_SfShimmer_RepeatCount "RepeatCount property of .NET MAUI Shimmer control"), [animation duration](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Shimmer.SfShimmer.html#Syncfusion_Maui_Shimmer_SfShimmer_AnimationDuration "AnimationDuration property of .NET MAUI Shimmer control"), and [wave direction](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Shimmer.SfShimmer.html#Syncfusion_Maui_Shimmer_SfShimmer_WaveDirection "WaveDirection property of .NET MAUI Shimmer control") 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.
<table>
<tbody>
<tr style="background: none;">
<td style="width: 50%; border: none !important;">
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Shimmer-effect-with-custom-fill-color-1.gif" alt="Shimmer effect with custom fill color" style="width:100%">

  <figcaption>Shimmer effect with custom fill color</figcaption>

</figure>
</td>
<td style="width: 50%; border: none !important;">
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Shimmer-effect-with-custom-wave-color-1.gif" alt="Shimmer effect with custom wave color" style="width:100%">

  <figcaption>Shimmer effect with custom wave color</figcaption>

</figure>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr style="background: none;">
<td style="width: 50%; border: none !important;">
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Shimmer-effect-with-custom-wave-width-1.gif" alt="Shimmer effect with custom wave width" style="width:100%">

  <figcaption>Shimmer effect with custom wave width</figcaption>

</figure>
</td>
<td style="width: 50%; border: none !important;">
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Shimmer-effect-with-custom-animation-duration-1.gif" alt="Shimmer effect with custom animation duration" style="width:100%">

  <figcaption>Shimmer effect with custom animation duration</figcaption>

</figure>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr style="background: none;">
<td style="width: 50%; border: none !important;">
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Shimmer-effect-with-custom-wave-direction-1.gif" alt="Shimmer effect with custom wave direction" style="width:100%">

  <figcaption>Shimmer effect with custom wave direction</figcaption>

</figure>
</td>
<td style="width: 50%; border: none !important;">
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Shimmer-effect-with-custom-repeat-count-1.gif" alt="Shimmer effect with custom repeat count" style="width:100%">

  <figcaption>Shimmer effect with custom repeat count</figcaption>

</figure>
</td>
</tr>
</tbody>
</table>
## Integrating .NET MAUI Shimmer control into your app

**Note:** Before proceeding, please refer to the [.NET MAUI Shimmer control getting started documentation](https://help.syncfusion.com/maui/shimmer/getting-started "Getting started with .NET MAUI Shimmer control").

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](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Shimmer.SfShimmer.html#Syncfusion_Maui_Shimmer_SfShimmer_IsActive "IsActive property of .NET MAUI Shimmer control") 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.

```xml
<ContentPage  
    . . .
 xmlns:shimmer="clr-namespace:Syncfusion.Maui.Shimmer;assembly=Syncfusion.Maui.Core">
 
 <shimmer:SfShimmer x:Name="Shimmer" Type="Article">
  <Grid>
    …
  </Grid>
 </shimmer:SfShimmer>
   
</ContentPage>

```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Integrating-the-Shimmer-control-in-a-.NET-MAUI-application.gif" alt="Integrating the Shimmer control in a .NET MAUI application" style="width:100%">

  <figcaption>Integrating the Shimmer control in a .NET MAUI application</figcaption>

</figure>
## Conclusion

Thanks for reading! The Syncfusion [.NET MAUI Shimmer](https://www.syncfusion.com/maui-controls/maui-shimmer ".NET MAUI Shimmer control") 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](https://www.syncfusion.com/forums/181344/essential-studio-2023-volume-1-main-release-v21-1-35-is-available-for-download "Essential Studio 2023 Volume 1") release. Check out our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v21.1.35 "Essential Studio Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew "Essential Studio What's New page") pages to see the other new updates in this release.

Also, try our .NET MAUI control [demos on GitHub](https://github.com/syncfusion/maui-demos "Syncfusion .NET MAUI controls 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](https://www.syncfusion.com/downloads "Free evaluation of the Essential Studio products") to see how our components can enhance your projects.

For questions, you can also reach us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/home "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Syncfusion Essential Studio 2023 Volume 1 Is Here!](https://www.syncfusion.com/blogs/post/essential-studio-2023-volume-1.aspx "Blog: Syncfusion Essential Studio 2023 Volume 1 Is Here!")
- [What’s New in 2023 Volume 1: .NET MAUI Charts](https://www.syncfusion.com/blogs/post/2023-volume-1-dotnet-maui-charts.aspx "Blog: What’s New in 2023 Volume 1: .NET MAUI Charts")
- [Introducing the 7th Set of .NET MAUI Controls and Features](https://www.syncfusion.com/blogs/post/7th-set-of-dotnet-maui-controls.aspx "Blog: Introducing the 7th Set of .NET MAUI Controls and Features")
- [Streamline MAUI Projects with the Syncfusion .NET MAUI Template Studio](https://www.syncfusion.com/blogs/post/dotnet-maui-template-studio.aspx "Blog: Streamline MAUI Projects with the Syncfusion .NET MAUI Template Studio")