syncfusion-winui-shimmer

用途

SfShimmer 用于在内容加载过程中显示动画化的占位内容（骨架屏），以改善用户等待数据时的感知性能。适用于列表、个人资料、文章、视频等异步加载场景，也用于实现现代加载 UX 模式。当用户提到 shimmer 效果、骨架屏、加载占位、内容加载动画、shimmer loader 或 WinUI 应用中的骨架 UI 时，均可使用本技能。

主要能力

内置布局类型：提供 7 种内置 shimmer 类型——CirclePersona、SquarePersona、Profile、Article、Video、Feed、Shopping，通过 Type 属性切换。
自定义布局：通过 CustomLayout 属性，使用 Grid、StackPanel、Rectangle、Ellipse 等元素构建与特定内容结构匹配的自定义 shimmer 设计。
外观与动画定制：Fill（背景/占位颜色）、WaveColor（波动画颜色）、WaveWidth（波宽度，像素）、WaveDuration（动画时长，毫秒）、RepeatCount（内置视图垂直重复次数，适合列表）。

使用方式

命名空间：Syncfusion.UI.Xaml.Core；NuGet 包：Syncfusion.Core.WinUI；平台：WinUI 3 Desktop（.NET 5+、Windows App SDK 1.0+）。需要完成许可证注册。

XAML 快速开始示例：

<Page
    xmlns:syncfusion="using:Syncfusion.UI.Xaml.Core">
    <Grid>
        <syncfusion:SfShimmer 
            x:Name="shimmer"
            Type="Article"
            Fill="#F6F6F6"
            WaveColor="#E0E0E0"
            RepeatCount="3"/>
    </Grid>
</Page>

C# 示例：

using Syncfusion.UI.Xaml.Core;
using Microsoft.UI;

SfShimmer shimmer = new SfShimmer
{
    Type = ShimmerType.Article,
    Fill = Colors.LightGray,
    WaveColor = Colors.White,
    RepeatCount = 3
};

this.Content = shimmer;

常用模式包括：简单个人资料加载、带 RepeatCount 的文章/博客加载、商品栅格 shimmer、视频/媒体信息流 shimmer、基于加载状态的条件显示（加载时显示 Shimmer、加载完成后切换为 ListView 等真实内容），以及为特定 UI 定义自定义布局。

自定义布局示例：

<syncfusion:SfShimmer>
    <syncfusion:SfShimmer.CustomLayout>
        <Grid RowSpacing="10" ColumnSpacing="15">
            <Grid.RowDefinitions>
                <RowDefinition Height="60"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="60"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            
            <Ellipse Grid.Row="0" Grid.RowSpan="2" Width="60" Height="60"/>
            
            <Rectangle Grid.Row="0" Grid.Column="1" 
                      Height="15" RadiusX="3" RadiusY="3"
                      HorizontalAlignment="Left" Width="200"/>
            
            <Rectangle Grid.Row="1" Grid.Column="1" 
                      Height="12" RadiusX="3" RadiusY="3"
                      HorizontalAlignment="Left" Width="250"/>
            
            <Rectangle Grid.Row="2" Grid.ColumnSpan="2" 
                      Height="100" RadiusX="5" RadiusY="5"/>
        </Grid>
    </syncfusion:SfShimmer.CustomLayout>
</syncfusion:SfShimmer>

关键属性

属性	类型	默认值	说明
Type	ShimmerType	CirclePersona	内置 shimmer 布局类型。可选：CirclePersona、SquarePersona、Profile、Article、Video、Feed、Shopping。
CustomLayout	UIElement	null	与特定内容结构匹配的自定义布局。
Fill	Brush	#F6F6F6	shimmer 视图背景色（占位颜色）。
WaveColor	Brush	White	扫过 shimmer 的动画波颜色。
WaveWidth	double	200	动画波宽度（像素）。
WaveDuration	int	1000	波动画时长（毫秒）。
RepeatCount	int	1	内置 shimmer 视图垂直重复次数，用于列表。

适用场景

列表/信息流加载：社交信息流、新闻文章列表、商品目录、评论区、搜索结果。推荐类型：Feed、Article、Shopping。
个人资料/用户加载：用户资料、联系人卡片、账户详情、团队成员展示、关于页面。推荐类型：Profile、CirclePersona、SquarePersona。
媒体加载：视频缩略图、图片画廊、媒体播放器、流媒体内容、相册。推荐类型：Video 或含图片占位的自定义布局。
电商：商品栅格、购物车、商品详情、分类页、收藏列表。推荐类型：Shopping 或自定义布局。

实现提示（资料中提供）

让 shimmer 布局尽量接近真实内容结构，以便平滑过渡。
使用 RepeatCount 匹配视口内预期可见的条目数。
加载开始时立即显示 shimmer，内容就绪后隐藏；典型持续时间为 500ms–3000ms。
主题配色参考：浅色主题 Fill = #F6F6F6、WaveColor = White；深色主题 Fill = #2C2C2C、WaveColor = #3C3C3C。
动画为 GPU 加速，可同时运行多个 shimmer。
shimmer 为纯视觉效果，需另行通过 live regions 或状态消息向屏幕阅读器播报加载状态。
波速参考：快速加载（<2s）WaveDuration = 800–1000ms；正常（2–5s）= 1000–1500ms；慢速（>5s）= 1500–2000ms。
自定义布局中可用带圆角的 Rectangle（RadiusX/RadiusY）与 Ellipse 表示圆形占位。

与其他加载模式的取舍

使用 Shimmer：内容结构已知、加载时间约 500ms–5s、列表或结构化内容、强调感知性能的现代应用。
使用 BusyIndicator：内容结构未知、需要通用加载指示、模态/阻塞操作、极快（<500ms）或极长（>10s）的操作。
使用 ProgressBar：可显示确定性进度、文件上传/下载、可获取进度百分比、可测量进度的顺序操作。

限制

资料中未提供关于收费、价格、并发上限、具体性能基准、具体平台版本兼容性细节以外的限制，以及许可证注册的具体步骤与价格说明，相关内容暂未提供。