Skip to main content

DevExpress v24.1 Update — Your Feedback Matters

Our What's New in v24.1 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DevExpress Shimmer View for MAUI

  • 2 minutes to read

The 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 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. 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
This topic explains how to create a custom skeleton screen.
Custom Appearance
This topic explains how to customize shimmer wave appearance settings.

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