关于 syncfusion-maui-smart-datagrid
面向 .NET MAUI 开发者的 Syncfusion Smart DataGrid 实现与定制技能,涵盖自然语言驱动的数据操作和 AI 服务配置。
主要功能
- 01自然语言排序、筛选、分组与高亮
- 02支持多列组合操作
- 03定制 AssistView 和提示词
- 04配置多种 AI 服务
- 05通过事件和方法管理操作
适用场景
- 01为 .NET MAUI 应用添加 AI 数据网格
- 02允许用户用文本命令筛选数据
- 03按应用样式定制助手视图
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ syncfusion/ maui-ui-components-skills --skill syncfusion-maui-smart-datagrid安装后在 Claude Code 中输入/syncfusion-maui-smart-datagrid确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
references/ai-powered-features.mdai-service-configuration.mdappearance-styling.mdclaude-service.mdconfigure-chat-client.mdcustom-ai-service.mdcustomization.mddeepseek-service.mdgemini-service.mdgetting-started.mdgroq-service.md详细介绍
实现 Syncfusion MAUI Smart DataGrid
一份全面的技能指南,介绍如何实现和自定义 Syncfusion .NET MAUI Smart DataGrid(SfSmartDataGrid)控件。Smart DataGrid 将传统的表格数据展示与 AI 驱动的自然语言功能相结合,使用户能够通过简单的文本命令执行排序、筛选、分组和突出显示等复杂操作。它以表格形式展示和处理数据,并提供对智能数据操作、AI 辅助功能、可自定义助手视图和事件驱动架构的高级支持。
何时使用此技能
在以下情况下使用此技能:
- 向需要 AI 辅助数据操作的 .NET MAUI 应用添加 Smart DataGrid
- 启用自然语言命令,让用户无需编写代码即可对数据进行排序、筛选、分组和突出显示
- 配置 Azure OpenAI 或其他 AI 提供商,为智能网格操作提供支持
- 使用模板和样式自定义 AssistView UI,调整其外观
- 实现 AI 驱动的功能,例如支持多列的智能排序和高级筛选
- 使用
GetResponseAsync()等方法和事件以编程方式管理网格操作 - 设置工具栏、按钮和助手视图的样式,以符合应用的设计要求
组件概述
SfSmartDataGrid(Syncfusion .NET MAUI Smart DataGrid)是一种高级数据网格控件,将传统的网格功能与 AI 驱动的自然语言处理相结合。用户无需手动浏览 UI,即可通过简单的文本命令与数据交互。
主要功能:
- AI 辅助操作: 使用自然语言提示对数据进行排序、筛选、分组和突出显示
- 多列操作: 在单个命令中应用复杂操作(例如,按多个列排序)
- 可自定义的 AssistView: 配置建议、提示词和初始命令
- 灵活的样式设置: 使用模板自定义工具栏、按钮和助手视图的外观
- 事件驱动架构: 处理 AI 操作的请求、打开和关闭事件
- AI 服务集成: 配置 Azure OpenAI、Gemini、DeepSeek 或 Groq 服务
文档和导航指南
入门
📄 阅读: references/getting-started.md
- 安装 Syncfusion.Maui.SmartDataGrid NuGet 包
- 在 MauiProgram.cs 中注册处理程序
- 使用凭据配置 Azure AI 服务
- 创建带有数据绑定的基本 Smart DataGrid
- 添加 OrderInfo 数据模型和存储库
- 启用 AI 辅助操作
- 运行并测试应用
AI 驱动的功能
📄 阅读: references/ai-powered-features.md
- 自然语言排序(单列和多列)
- 支持层次结构的智能分组
- 使用条件(AND/OR 逻辑)进行高级筛选
- 使用自定义颜色突出显示行和单元格
- 清除操作(排序、筛选、分组、突出显示)
- 示例提示词和实际用例
自定义和配置
📄 阅读: references/customization.md
- 设置 SuggestedPrompts 以提供预定义建议
- 配置 Prompt,以便在启动时自动执行
- 使用 EnableSmartActions 启用或禁用智能操作
- 使用 ShowAssistView() 以编程方式显示 AssistView
- 使用 GetResponseAsync() 动态应用 AI 操作
- 处理 AssistViewRequest 事件
- 管理 AssistViewOpening 和 AssistViewClosing 事件
外观和样式
📄 阅读: references/appearance-styling.md
- 设置工具栏的背景、描边和粗细
- 使用 ToolbarTemplate 创建自定义工具栏布局
- 配置 AssistButton 的外观和图标颜色
- 定义自定义 AssistButton 和图标模板
- 自定义 AssistView 弹出窗口、标题栏和颜色
- 创建 AssistView 标题栏、横幅和编辑器模板
- 设置 SmartAssistStyle 属性
AI 服务配置
📄 阅读: references/ai-service-configuration.md
- 配置 Azure OpenAI 服务设置
- 注册 ConfigureSyncfusionAIServices()
- 设置 API 密钥、终结点和部署名称
- AI 服务要求和先决条件
- 支持其他 AI 提供商
- 排查 AI 服务连接问题
配置聊天客户端
📄 阅读: references/configure-chat-client.md
- 配置兼容 Microsoft.Extensions.AI 的聊天客户端
- Azure OpenAI 设置和配置
- 通过模型选择集成 OpenAI API
- 可自托管的 Ollama 配置及其优势
- 使用 appsettings.json 进行特定环境的配置
- 使用环境变量设置凭据
- 排查身份验证和连接错误
自定义 AI 服务集成
📄 阅读: references/custom-ai-service.md
- 使用 IChatInferenceService 接口实现自定义 AI 服务
- 创建 AI 服务类和推理服务包装器
- 在 MauiProgram.cs 中注册自定义服务
- 完整的自定义实现示例
- 测试自定义集成
- 错误处理和日志记录的最佳实践
- 排查响应生成和性能问题
Claude AI 集成
📄 阅读: references/claude-service.md
- 创建 Anthropic Claude 账户并获取 API 密钥
- 实现 ClaudeAIService 和 ClaudeInferenceService
- 在 MauiProgram.cs 中注册 Claude 服务
- 可用的 Claude 模型及其功能
Google Gemini 集成
📄 阅读: references/gemini-service.md
- 获取 Gemini 的 Google AI Studio API 密钥
- 实现 GeminiService 和 GeminiInferenceService
- 配置 Gemini 模型和生成设置
- 在 MauiProgram.cs 中注册 Gemini 服务
Groq AI 集成
📄 阅读: references/groq-service.md
- 设置 Groq 控制台并获取 API 密钥
- 实现 GroqService 和 GroqInferenceService
- 使用兼容 OpenAI 的终结点配置 Groq 模型
- 在 MauiProgram.cs 中注册 Groq 服务
DeepSeek AI 集成
📄 阅读: references/deepseek-service.md
- 设置 DeepSeek 平台并获取 API 密钥
- 实现 DeepSeekAIService 和 DeepSeekInferenceService
- 配置 DeepSeek 模型和温度设置
- 在 MauiProgram.cs 中注册 DeepSeek 服务