Friday, May 24, 2024
HomeC#Elevate Your App's Consumer Expertise with the New .NET MAUI Shimmer Management

Elevate Your App’s Consumer Expertise with the New .NET MAUI Shimmer Management


The person expertise of an software begins from the second it’s launched till the person exits, and it performs a significant function in participating the person. Subsequently, guaranteeing an exemplary person interface is important for any app.

Exhibiting an empty display whereas loading information within the background can mess up the person expertise. Loading indicators assist us make the app look responsive as a substitute. Within the Important Studio 2023 Quantity 1 launch, Syncfusion launched a brand new loading indicator management within the .NET MAUI platform, the Shimmer management.

The brand new .NET MAUI Shimmer management gives a seamless person expertise whereas the app fetches information from both native or distant sources. It really works by exhibiting a preview of the particular view displayed on the app moderately than a loading animation. This helps us simply perceive the loaded content material whereas offering a extra visually interesting person expertise.

.NET MAUI Shimmer control
.NET MAUI Shimmer management

On this weblog, we’ll see the important thing options of the .NET MAUI Shimmer management and the steps to get began with it.

Constructed-in shimmer impact views

The .NET MAUI Shimmer management helps seven built-in shimmer impact views that may be assigned utilizing the Kind property. These shimmer sorts are: circle, sq., profile, article, video, feed, and procuring. By default, the circle persona view is assigned to the management.

Every view has its distinctive shimmer impact, permitting builders to decide on the one that most closely fits their app’s UI design. The flexibleness of customizing the shimmer view in keeping with particular necessities may help builders improve their app’s general person expertise.

Circle persona
Circle persona
Square persona
Sq. persona
Article persona
Article persona

Customized shimmer impact view

You too can simply create and combine a customized shimmer impact view. To take action, set the CustomView property to the specified view, after which the shimmer impact will likely be utilized. This may present a extra customized and interesting person expertise.

To customise the form of the customized view, you need to use the ShimmerView class with totally different ShapeTypes. It helps three shapes: rectangle, circle, and rounded rectangle. By default, the form kind is about to rectangle.

.NET MAUI Shimmer control with custom view
.NET MAUI Shimmer management with customized view

Customizing the shimmer view and its results

Customizing the .NET MAUI Shimmer management is straightforward. You may alter the colour, wave colour, wave width, repeat rely, animation period, and wave route properties to create a shimmer impact that matches your app’s design.

As an example, you possibly can set the repeat rely to find out how typically the shimmer impact ought to be rendered or change the wave route to make the shimmer transfer horizontally or vertically. By experimenting with totally different mixtures of properties, you possibly can obtain a novel and attention-grabbing shimmer impact.

Shimmer effect with custom fill color
Shimmer impact with customized fill colour
Shimmer effect with custom wave color
Shimmer impact with customized wave colour
Shimmer effect with custom wave width
Shimmer impact with customized wave width
Shimmer effect with custom animation duration
Shimmer impact with customized animation period
Shimmer effect with custom wave direction
Shimmer impact with customized wave route
Shimmer effect with custom repeat count
Shimmer impact with customized repeat rely

Integrating .NET MAUI Shimmer management into your app

Word: Earlier than continuing, please consult with the .NET MAUI Shimmer management getting began documentation.

The .NET MAUI Shimmer is a content material view that accepts any structure and reveals it with a shimmer impact. The shimmer animation impact will likely be displayed if the IsActive property worth is about to true, and both built-in or customized views can be utilized to outline the shimmer animation view.

Consult with the next code instance. In it, we have now used the Article shimmer impact kind.

<ContentPage  
    . . .
 xmlns:shimmer="clr-namespace:Syncfusion.Maui.Shimmer;meeting=Syncfusion.Maui.Core">
 
 <shimmer:SfShimmer x:Identify="Shimmer" Kind="Article">
  <Grid>
    …
  </Grid>
 </shimmer:SfShimmer>
   
</ContentPage>
Integrating the Shimmer control in a .NET MAUI application
Integrating the Shimmer management in a .NET MAUI software

Conclusion

Thanks for studying! The Syncfusion .NET MAUI Shimmer is a strong device for enhancing your app’s person expertise. By utilizing its built-in views or creating customized views, you possibly can add a shimmer impact to any view and make it extra visually interesting. With its varied customization choices, you possibly can tailor the shimmer impact to suit your particular design wants.

This management is on the market in our 2023 Quantity 1 launch. Try our Launch Notes and What’s New pages to see the opposite new updates on this launch.

Additionally, attempt our .NET MAUI management demos on GitHub and share your suggestions or ask questions within the feedback part beneath. If you’re not a Syncfusion buyer, attempt our 30-day free trial to see how our elements can improve your tasks.

For questions, you may also attain us by way of our help discussion board, help portal, or suggestions portal. We’re at all times completely happy to help you!

Associated blogs

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments