ContextQMD
Back to Devexpress

DevExpress Shimmer View for MAUI

maui-404458-shimmer-view-overview.md

latest3.2 KB
Original Source

DevExpress Shimmer View for MAUI

  • Jun 25, 2024
  • 2 minutes to read

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

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.

xaml
<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

LayoutThis topic explains how to create a custom skeleton screen.Custom AppearanceThis topic explains how to customize shimmer wave appearance settings.

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