syncfusion-winui-shimmer

实现 WinUI Shimmer

何时使用此技能

用户需要以下功能时，请使用此技能：

• 在内容加载期间显示骨架屏
• 使用闪烁效果作为加载占位符
• 提升数据获取期间的感知性能
• 为列表、个人资料、文章或视频创建加载动画
• 在异步内容加载期间提供视觉反馈
• 实现现代加载 UX 模式（骨架加载器）

始终在用户提及以下内容时应用此技能： WinUI 应用中的闪烁效果、骨架屏、加载占位符、内容加载动画、闪烁加载器或骨架 UI。

组件概览

SfShimmer 是一个 Syncfusion WinUI 控件，可在加载操作期间显示动画占位内容（骨架屏）。它提供 7 种内置闪烁类型，并支持自定义布局，以适配任何内容结构。

命名空间： Syncfusion.UI.Xaml.Core
NuGet 包： Syncfusion.Core.WinUI
平台： WinUI 3 Desktop（.NET 5+、Windows App SDK 1.0+）

主要优势： 在数据加载时显示内容结构，从而提升感知性能，减少用户在等待期间的挫败感。

文档与导航指南

入门

📄 阅读： references/getting-started.md

• 安装和 NuGet 包设置
• 命名空间导入和基本初始化
• 默认闪烁类型（CirclePersona）
• 许可证注册要求
• 首个完整示例

内置闪烁类型

📄 阅读： references/built-in-types.md

• 7 种内置闪烁类型（CirclePersona、SquarePersona、Profile、Article、Video、Feed、Shopping）
• Type 属性的用法
• 视觉说明和对比
• 为内容选择合适的类型
• 在不同类型间切换

自定义布局

📄 阅读： references/custom-layouts.md

• 使用 CustomLayout 属性创建自定义闪烁设计
• 使用 Grid、StackPanel、Rectangle 元素
• 复杂布局示例
• 让闪烁效果与实际内容结构匹配
• 最佳实践和性能

自定义选项

📄 阅读： references/customization.md

• Fill 属性（背景色）
• WaveColor 属性（动画颜色）
• WaveWidth 属性（波浪宽度控制）
• WaveDuration 属性（动画速度）
• RepeatCount 属性（重复视图）
• 组合使用自定义选项

快速入门示例

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

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

// Create and configure Shimmer
SfShimmer shimmer = new SfShimmer
{
    Type = ShimmerType.Article,
    Fill = Colors.LightGray,
    WaveColor = Colors.White,
    RepeatCount = 3
};

// Add to UI
this.Content = shimmer;

常见模式

1. 简单的个人资料加载闪烁效果

<syncfusion:SfShimmer Type="Profile"/>

适用场景： 用户个人资料页面、账户屏幕、联系人详情加载。

2. 使用重复显示的文章／博客加载效果

<Grid>
    <syncfusion:SfShimmer 
        Type="Article"
        RepeatCount="5"
        Fill="#F5F5F5"
        WaveColor="#E0E0E0"/>
</Grid>

适用场景： 博客动态、新闻文章、文本密集型内容加载。

3. 购物／产品网格闪烁效果

<syncfusion:SfShimmer 
    Type="Shopping"
    RepeatCount="6"
    WaveDuration="1500"/>

适用场景： 电商产品网格、购物目录、商品图库。

4. 视频／媒体动态闪烁效果

<syncfusion:SfShimmer 
    Type="Video"
    RepeatCount="4"
    Fill="#000000"
    WaveColor="#333333"/>

适用场景： 视频流媒体应用、媒体图库、类似 YouTube 的动态。

5. 条件式闪烁显示

<Grid>
    
    <syncfusion:SfShimmer 
        x:Name="shimmer"
        Type="Feed"
        Visibility="{x:Bind IsLoading, Mode=OneWay}"/>
    
    
    <ListView 
        x:Name="contentListView"
        Visibility="{x:Bind IsLoaded, Mode=OneWay}"
        ItemsSource="{x:Bind Items}"/>
</Grid>

private bool isLoading = true;
public bool IsLoading
{
    get => isLoading;
    set
    {
        isLoading = value;
        OnPropertyChanged();
    }
}

public bool IsLoaded => !IsLoading;

private async void LoadContentAsync()
{
    IsLoading = true;
    
    try
    {
        var data = await FetchDataAsync();
        contentListView.ItemsSource = data;
    }
    finally
    {
        IsLoading = false;
    }
}

适用场景： 根据加载状态，在闪烁效果和实际内容之间切换。

6. 针对特定 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	自定义布局，用于创建符合特定内容结构的 shimmer 设计。
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、自定义布局

实现提示

1. 让 Shimmer 与内容匹配： 设计与实际内容结构相似的 shimmer 布局，实现无缝过渡。

2. 在列表中使用 RepeatCount： 将 RepeatCount 设为与视口中预期可见的项目数相符的值。

3. 时机：

   • 加载开始时立即显示 shimmer
   • 内容准备好显示时隐藏 shimmer
   • shimmer 的典型持续时间：500ms - 3000ms

4. 颜色主题：

   • 浅色主题：Fill = #F6F6F6，WaveColor = White
   • 深色主题：Fill = #2C2C2C，WaveColor = #3C3C3C

5. 性能： Shimmer 动画由 GPU 加速。多个 shimmer 可以同时运行，不会导致性能问题。

6. 无障碍性： Shimmer 仅用于视觉呈现。请使用实时区域或状态消息，确保屏幕阅读器能单独播报加载状态。

7. 波纹速度：

   • 快速加载（<2s）：WaveDuration = 800-1000ms
   • 正常加载（2-5s）：WaveDuration = 1000-1500ms
   • 慢速加载（>5s）：WaveDuration = 1500-2000ms

8. 自定义布局： 使用带圆角（RadiusX/RadiusY）的 Rectangle 元素，以及 Ellipse 来创建圆形占位符。

Shimmer 与其他加载模式的比较

在以下情况下使用 Shimmer：

• 内容结构事先已知
• 加载时间为 500ms - 5 秒
• 显示基于列表或结构化的内容
• 现代应用注重感知性能

在以下情况下使用 BusyIndicator：

• 内容结构未知
• 需要通用的加载指示
• 模态／阻塞操作
• 非常快（<500ms）或非常慢（>10s）的操作

在以下情况下使用 ProgressBar：

• 可以显示确定的进度
• 文件上传／下载
• 有可用的进度百分比
• 可衡量进度的顺序操作

相关文档

• 内置类型： 查看 references/built-in-types.md，了解全部 7 种 shimmer 类型的详细比较
• 自定义布局： 查看 references/custom-layouts.md，了解如何创建自定义 shimmer 设计
• 自定义设置： 查看 references/customization.md，了解外观和动画选项