Implementing .NET MAUI Shimmer (SfShimmer)
SfShimmer displays an animated shimmer placeholder while content loads in the background, improving perceived app responsiveness. It supports 7 built-in layout types, fully custom views using ShimmerView shapes, and extensive wave animation customization.
When to Use This Skill
Use this skill when users need to:
- Add a loading placeholder before data or content is fetched
- Show a skeleton screen while an API call completes
- Replace a spinner with a content-shaped loading animation
- Customize shimmer colors, wave direction, or animation speed
- Build a custom shimmer layout that mirrors your actual UI
Component Overview
The SfShimmer control provides:
- Built-in Layout Types: 7 pre-designed shimmer patterns (CirclePersona, SquarePersona, Profile, Article, Video, Feed, Shopping)
- Custom View Support: Build custom shimmer layouts using ShimmerView with Circle, Rectangle, and RoundedRectangle shapes
- Wave Animation Control: Configurable wave direction (5 options), width, and animation duration
- Color Customization: Independent Fill (background) and WaveColor (highlight) properties
- Repeat Patterns: RepeatCount property for vertical stacking of shimmer layouts
- Content Toggle: IsActive property for seamless switching between shimmer and loaded content
- Flexible Integration: Works with any .NET MAUI View as child content
- Performance Optimized: Lightweight animation that improves perceived app responsiveness
Documentation and Navigation Guide
Getting Started
📄 Read: references/getting-started.md
- Installing
Syncfusion.Maui.Core NuGet package
- Registering the handler in
MauiProgram.cs
- Adding
SfShimmer in XAML and C#
- Toggling between shimmer and content with
IsActive
Built-in View Types
📄 Read: references/built-in-views.md
- 7 built-in
ShimmerType values: CirclePersona, SquarePersona, Profile, Article, Video, Feed, Shopping
- Setting the
Type property in XAML and C#
- Default type and when to choose each layout
Custom Views
📄 Read: references/custom-views.md
- Building a custom shimmer layout with
CustomView and BoxView
- Using
ShimmerView with ShapeType (Circle, Rectangle, RoundedRectangle)
- Full XAML and C# examples for complex custom layouts
Customization & Animation
📄 Read: references/customization.md
Fill — shimmer background colorWaveColor — shimmer highlight colorWaveWidth — width of the wave highlightWaveDirection — 5 directions (Default, LeftToRight, RightToLeft, TopToBottom, BottomToTop)RepeatCount — repeat the shimmer pattern verticallyAnimationDuration — control animation speed in milliseconds
1---
2name: syncfusion-maui-shimmer
3description: Implements Syncfusion .NET MAUI Shimmer (SfShimmer) loading placeholder effects. Use when implementing shimmer or skeleton loading animations, loading placeholders, or content loading indicators in .NET MAUI apps. Covers shimmer types (CirclePersona, Article, Feed, Shopping), custom shimmer views, wave animation, and customization.
4metadata:
5 author: "Syncfusion Inc"
6 version: "34.1.29"
7---
8
9# Implementing .NET MAUI Shimmer (SfShimmer)
10
11`SfShimmer` displays an animated shimmer placeholder while content loads in the background, improving perceived app responsiveness. It supports 7 built-in layout types, fully custom views using `ShimmerView` shapes, and extensive wave animation customization.
12
13## When to Use This Skill
14
15Use this skill when users need to:
16- **Add a loading placeholder** before data or content is fetched
17- **Show a skeleton screen** while an API call completes
18- **Replace a spinner** with a content-shaped loading animation
19- **Customize shimmer colors**, wave direction, or animation speed
20- **Build a custom shimmer layout** that mirrors your actual UI
21
22## Component Overview
23
24The **SfShimmer** control provides:
25- **Built-in Layout Types**: 7 pre-designed shimmer patterns (CirclePersona, SquarePersona, Profile, Article, Video, Feed, Shopping)
26- **Custom View Support**: Build custom shimmer layouts using ShimmerView with Circle, Rectangle, and RoundedRectangle shapes
27- **Wave Animation Control**: Configurable wave direction (5 options), width, and animation duration
28- **Color Customization**: Independent Fill (background) and WaveColor (highlight) properties
29- **Repeat Patterns**: RepeatCount property for vertical stacking of shimmer layouts
30- **Content Toggle**: IsActive property for seamless switching between shimmer and loaded content
31- **Flexible Integration**: Works with any .NET MAUI View as child content
32- **Performance Optimized**: Lightweight animation that improves perceived app responsiveness
33
34## Documentation and Navigation Guide
35
36### Getting Started
37📄 **Read:** [references/getting-started.md](references/getting-started.md)
38- Installing `Syncfusion.Maui.Core` NuGet package
39- Registering the handler in `MauiProgram.cs`
40- Adding `SfShimmer` in XAML and C#
41- Toggling between shimmer and content with `IsActive`
42
43### Built-in View Types
44📄 **Read:** [references/built-in-views.md](references/built-in-views.md)
45- 7 built-in `ShimmerType` values: CirclePersona, SquarePersona, Profile, Article, Video, Feed, Shopping
46- Setting the `Type` property in XAML and C#
47- Default type and when to choose each layout
48
49### Custom Views
50📄 **Read:** [references/custom-views.md](references/custom-views.md)
51- Building a custom shimmer layout with `CustomView` and `BoxView`
52- Using `ShimmerView` with `ShapeType` (Circle, Rectangle, RoundedRectangle)
53- Full XAML and C# examples for complex custom layouts
54
55### Customization & Animation
56📄 **Read:** [references/customization.md](references/customization.md)
57- `Fill` — shimmer background color
58- `WaveColor` — shimmer highlight color
59- `WaveWidth` — width of the wave highlight
60- `WaveDirection` — 5 directions (Default, LeftToRight, RightToLeft, TopToBottom, BottomToTop)
61- `RepeatCount` — repeat the shimmer pattern vertically
62- `AnimationDuration` — control animation speed in milliseconds
63
gabrielmoreira