DevExpress Shimmer View for MAUI
- 2 minutes to read
In This Article
The ShimmerView control allows you to add a shimmer effect when loading data in your mobile app.
#Add a Shimmer View to the Page
Download and install the DevExpress.Maui.Controls package from the DevExpress NuGet Gallery to obtain the ShimmerView component. For more information on how to build your first .NET MAUI app, refer to the following help topic: Get Started.
To show the predefined skeleton screen (a gray rectangle with shimmer effects) above primary content, follow the steps below:
- Add a
ShimmerView
to the page. - Populate ShimmerView.Content with UI elements that appear once the loading operation ends. The
ShimmerView.Content
property is a content property. You can skip the<Content>
tag in your markup. - Set the ShimmerView.IsLoading property to
true
to show shimmer animation. OnceIsLoading
switches tofalse
, theShimmerView
replaces the animation with the UI elements you specified. - Additionally, you can set the ShimmerView.WaveDuration property to speed up or slow down animation speed.
<ContentPage
xmlns:dx="http://schemas.devexpress.com/maui">
<VerticalStackLayout>
<Switch x:Name="switch" IsToggled="True" HorizontalOptions="Start" />
<dx:ShimmerView IsLoading="{Binding Source={x:Reference switch}, Path=IsToggled, Mode=TwoWay}"
HeightRequest="500" WaveDuration="00:00:02.00">
<Image Source="devexpress_logo_extra_large_color" WidthRequest="200" HeightRequest="200"/>
</dx:ShimmerView>
</VerticalStackLayout>
</ContentPage>
#Next Steps
- Layout
- This topic explains how to create a custom skeleton screen.
- Custom Appearance
- This topic explains how to customize shimmer wave appearance settings.
#Related Examples
The following examples show how to use the ShimmerView
control in your .NET MAUI App: