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:
Once you completed general setup steps outlined in the article above, declare the DevExpress.Maui.Editors
namespace in your markup:
<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. 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.
<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:
<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.
- WaveAngle
Sets the shimmer wave rotation angle in degrees (clockwise). Use a numeric value to specify the angle.
- WaveOpacity
- Specifies wave opacity. A value from 0 to 1.
- WaveBackgroundOpacity
- Specifies the wave’s background opacity. A value from 0 to 1.
<dxco:ShimmerView ...
WaveWidth="0.2"
WaveAngle="30"
WaveOpacity="0.8"
WaveBackgroundOpacity="0.5" >