Skip to main content

DevExpress Shimmer View for MAUI

  • 2 minutes to read

The DevExpress.Maui.Controls.ShimmerView control allows you to add a shimmer effect when loading data in your mobile app.

DevExpress Shimmer View for MAUI

View Example

Add a Shimmer View to the Page

Download and install the DevExpress.Maui.Controls package to obtain the ShimmerView component.

Refer to the following help topics for more information:

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. Once IsLoading switches to false, the ShimmerView 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.

DevExpress Shimmer for MAUI - Custom loading view

<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
Explains how to create a custom skeleton screen.
Custom Appearance
Describes how to customize shimmer wave appearance settings.

The following examples show how to use the ShimmerView control in your .NET MAUI App: