ShimmerView Class

A view that shows placeholders instead of UI elements. Shimmer effects indicate that a loading operation is in progress.

Namespace: DevExpress.Maui.Controls

Assembly: DevExpress.Maui.Controls.dll

NuGet Package: DevExpress.Maui.Controls

Declaration

[ContentProperty("Content")]
public class ShimmerView :
    View,
    IDXViewController,
    IAppearanceOwner,
    IVisualTreeElement

Remarks

Show a Shimmer

Before you proceed, read the following topic:

Get Started with DevExpress Controls for .NET Multi-platform App UI (.NET MAUI)

Once you completed general setup steps outlined in the article above, declare the DevExpress.Maui.Editors namespace in your markup:

XAML

<ContentPage
    xmlns:dxco="clr-namespace:DevExpress.Maui.Controls;assembly=DevExpress.Maui.Controls">
    <!--...-->
</ContentPage>

To show the predefined skeleton screen (a gray rectangle with shimmer effects) above the 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

XAML

<VerticalStackLayout>
    <Switch x:Name="switch" IsToggled="True" HorizontalOptions="Start" />
    <dxco: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"/>
    </dxco:ShimmerView>
</VerticalStackLayout>

Configure Loading View Content

You can show a custom shimmer layout during a loading operation (IsLoading is True). To do this, specify the ShimmerView.LoadingView property. The ShimmerView draws the component shapes you add to the LoadingView. For example, use Ellipse or Rectangle objects to draw circles and rectangles:

XAML

<dxco:ShimmerView .../>
    <!--...-->
    <dxco:ShimmerView.LoadingView>
        <Grid RowDefinitions="40,100,400,180" ColumnDefinitions="*,*,*" Padding="10">
            <Label Text="Content is being loaded..." Grid.Row="0" Grid.ColumnSpan="3" FontSize="16"/>
            <Ellipse Grid.Row="1" Grid.Column="0" Fill="LightGray" HeightRequest="80" WidthRequest="80"/>
            <Ellipse Grid.Row="1" Grid.Column="1" Fill="LightGray" HeightRequest="80" WidthRequest="80"/>
            <Ellipse Grid.Row="1" Grid.Column="2" Fill="LightGray" HeightRequest="80" WidthRequest="80"/>
            <Rectangle Grid.Row="2" Grid.ColumnSpan="3" Fill="LightGray" HeightRequest="380"/>
            <Rectangle Grid.Row="3" Grid.ColumnSpan="3" Fill="LightGray" HeightRequest="150"/>
        </Grid>
    </dxco:ShimmerView.LoadingView>
</dxco:ShimmerView>

Limitation

Content placed in the Loading View does not support Behaviors.

Customize Appearance

This section lists properties that configure shimmer appearance:

WaveWidth

Specifies the shimmer wave width as a fraction of the content width. A value from 0 to 1.

DevExpress Shimmer for MAUI - Wave width

WaveAngle

Sets the shimmer wave rotation angle in degrees (clockwise). Use a numeric value to specify the angle.

DevExpress Shimmer for MAUI - Wave angle

WaveOpacity

Specifies wave opacity. A value from 0 to 1.

WaveBackgroundOpacity

Specifies the wave’s background opacity. A value from 0 to 1.

XAML

<dxco:ShimmerView ...
                  WaveWidth="0.2" 
                  WaveAngle="30" 
                  WaveOpacity="0.8"
                  WaveBackgroundOpacity="0.5" >