mcpField
S
syncfusion-maui-effects-view

syncfusion-maui-effects-view

github.com/syncfusion设计与 UI61205 次安装2 周前更新
代码仓库

关于 syncfusion-maui-effects-view

面向 .NET MAUI 开发者的交互效果控件技能，介绍如何用 SfEffectsView 为任意视图添加触摸动画、状态反馈及事件处理。

主要功能

  1. 01支持波纹、高亮、选择、缩放和旋转效果
  2. 02处理按下、抬起和长按交互
  3. 03自定义动画时长、颜色和变换参数
  4. 04组合多种效果并响应事件
  5. 05支持 MVVM 命令和代码触发

适用场景

  1. 01为按钮、卡片和列表项添加波纹反馈
  2. 02为自定义视图创建按钮式交互
  3. 03为列表项实现带视觉反馈的选择
  4. 04为长按操作添加上下文交互

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/syncfusion/maui-ui-components-skills --skill syncfusion-maui-effects-view

安装后在 Claude Code 中输入/syncfusion-maui-effects-view确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
commands-and-methods.md
customization.md
events.md
features.md
getting-started.md
interaction-and-effects.md
use-cases-and-patterns.md

详细介绍

.NET MAUI 效果视图（SfEffectsView）

一个容器控件，可为触摸交互提供现代视觉效果，包括波纹、高亮、选择、缩放和旋转动画。将任意 MAUI 视图包装起来，即可添加专业的触摸反馈，提升用户体验。

何时使用此技能

需要执行以下操作时，请始终使用此技能：

  • 为按钮、卡片或列表项添加波纹效果
  • 实现触摸／按压时的高亮覆盖层
  • 创建带有视觉反馈的选择指示器
  • 在交互时添加缩放动画（放大／缩小）
  • 为交互元素实现旋转效果
  • 为任何 MAUI 视图（Image、Label、Grid 等）提供触摸反馈
  • 通过视觉反馈处理触摸事件（点击、长按、触摸抬起／按下）
  • 用交互效果包装现有 UI 元素
  • 为自定义视图创建类似按钮的行为
  • 通过 Material Design 风格的波纹效果提升 UX

组件概述

SfEffectsView 是一个包装控件，可根据触摸交互呈现视觉效果：

主要功能：

  • 5 种效果类型： 波纹、高亮、选择、缩放、旋转
  • 3 种触摸交互： TouchDown、TouchUp、LongPress
  • 可自定义： 动画时长、颜色、缩放比例、旋转角度
  • 可组合： 同时应用多种效果
  • 事件驱动： AnimationCompleted、SelectionChanged、触摸事件
  • 支持 MVVM： 为 LongPressed、TouchDown、TouchUp 绑定命令
  • 可通过代码控制： 使用 ApplyEffects() 和 Reset() 方法触发效果

文档与导航指南

入门指南

📄 阅读： references/getting-started.md

  • 安装 NuGet 包（Syncfusion.Maui.Core）
  • 在 MauiProgram.cs 中注册 Handler
  • 使用 XAML 和 C# 实现基本的 SfEffectsView
  • 为 SfEffectsView 添加内容（包装视图）
  • 第一个波纹效果示例
触摸交互与效果类型

📄 阅读： references/interaction-and-effects.md

  • 触摸交互类型（TouchDownEffects、TouchUpEffects、LongPressEffects）
  • 波纹效果：可扩展的圆形动画
  • 高亮效果：纯色覆盖层
  • 选择效果：持久的选择状态
  • 缩放效果：放大／缩小动画
  • 旋转效果：交互时旋转视图
  • 组合多种效果
  • 效果的生命周期与行为
自定义与样式设置

📄 阅读： references/customization.md

  • RippleAnimationDuration：自定义波纹动画时长
  • ScaleAnimationDuration：控制缩放速度
  • RotationAnimationDuration：调整旋转时长
  • InitialRippleFactor：设置波纹的初始大小
  • ScaleFactor：控制缩放级别（0.0-1.0+）
  • HighlightBackground：更改高亮颜色
  • RippleBackground：自定义波纹颜色
  • SelectionBackground：设置选择颜色
  • Angle：旋转角度（0-360）
功能与配置

📄 阅读： references/features.md

  • FadeOutRipple：波纹扩展时逐渐淡出
  • IsSelected：通过代码设置选择状态
  • ShouldIgnoreTouches：禁用直接交互
  • AutoResetEffects：触摸抬起时自动移除效果（Android/UWP）
  • 特定平台的行为
事件与处理程序

📄 阅读： references/events.md

  • AnimationCompleted：效果完成时触发
  • SelectionChanged：选择状态改变时触发
  • LongPressed：长按手势时触发
  • TouchDown：触摸开始时触发
  • TouchUp：触摸结束时触发
  • 事件时序与生命周期
命令与方法

📄 阅读： references/commands-and-methods.md

  • MVVM 命令支持：LongPressedCommand、TouchDownCommand、TouchUpCommand
  • 用于传递数据的命令参数
  • ApplyEffects 方法：通过代码触发效果
  • Reset 方法：移除已应用的效果
  • 重复波纹动画
  • 波纹起始位置与自定义点
使用场景和模式

📄 阅读： references/use-cases-and-patterns.md

  • 自定义视图的按钮式交互
  • 带涟漪反馈的列表项选择
  • 仪表板中的卡片交互
  • 长按操作和上下文菜单
  • 带触摸效果的图片库
  • 组合多种效果，实现丰富的交互
  • 无障碍设计注意事项
  • 性能优化技巧

评论

支持 Markdown