mcpField
S
syncfusion-maui-picker

syncfusion-maui-picker

github.com/syncfusion开发61215 次安装2 周前更新
代码仓库

关于 syncfusion-maui-picker

面向 .NET MAUI 开发者的 Syncfusion SfPicker 实现指南,涵盖单列与多列选择器的配置和定制,适用于日期、时间、颜色等选择界面。

主要功能

  1. 01配置 Default、Dialog 和 RelativeDialog 模式
  2. 02绑定单列或多列数据
  3. 03自定义标题、页脚与选中视图
  4. 04处理选择事件和命令
  5. 05配置无障碍与本地化
  6. 06使用循环滚动和项目模板

适用场景

  1. 01在 .NET MAUI 应用中实现日期或时间选择器
  2. 02为复杂数据配置多列选择界面
  3. 03定制弹窗位置与选择器外观

安装

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

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

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

包含的文件

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

references/
accessibility.md
advanced-features.md
column-headers.md
columns.md
customization.md
events-commands.md
getting-started.md
header-footer-selection.md
localization.md
picker-modes.md
populating-items.md

详细介绍

实现 .NET MAUI Picker (SfPicker)

Syncfusion .NET MAUI Picker (SfPicker) 控件允许用户通过可自定义的 Picker 界面选择项目,并支持多列、不同显示模式和丰富的自定义选项。它非常适合用于实现日期选择器、时间选择器、颜色选择器、国家/地区选择器,以及任何需要从可滚动列表中选择项目的场景。

何时使用此技能

在以下情况下使用此技能:

  • 在 .NET MAUI 应用中实现项目选择界面,使用 Syncfusion Picker
  • 创建自定义 Picker,例如日期选择器、时间选择器、颜色选择器或国家/地区选择器
  • 以 Default、Dialog 或 RelativeDialog 模式显示 Picker 控件
  • 为复杂的数据选择场景配置多列 Picker
  • 自定义 Picker 外观,包括标题、页脚、选择视图和列标题
  • 使用 ItemsSource 和 ObservableCollection 为 Picker 列绑定数据
  • 处理 Picker 事件,例如 SelectionChanged、OkButtonClicked 或 CancelButtonClicked
  • 为 Picker 控件实现无障碍功能
  • 本地化 Picker 内容,以支持多语言
  • 应用高级功能,例如循环滚动、项目模板或液态玻璃效果

组件概述

.NET MAUI Picker (SfPicker) 提供:

  • 多种显示模式:Default(内嵌)、Dialog(弹出窗口)和 RelativeDialog(定位弹出窗口)
  • 多列支持:显示多个列,每列使用独立的数据源
  • 可自定义视图:标题、页脚、选择视图和列标题
  • 丰富的数据绑定:支持简单集合和复杂对象
  • 事件驱动架构:为用户交互提供事件和命令
  • 无障碍支持:符合 WCAG 标准并兼容屏幕阅读器
  • 本地化:支持多语言和特定区域性的格式
  • 高级自定义:项目模板、样式和视觉效果

文档和导航指南

入门

📄 阅读: references/getting-started.md

当用户需要:

  • 安装并设置 Syncfusion .NET MAUI Picker
  • 添加 NuGet 包(Syncfusion.Maui.Picker)
  • 注册 Syncfusion 处理程序(ConfigureSyncfusionCore)
  • 使用 XAML 或 C# 创建基本的 Picker 实现
  • 设置初始高度和宽度属性
Picker 模式和显示

📄 阅读: references/picker-modes.md

当用户需要:

  • 在 Default、Dialog 或 RelativeDialog 模式之间进行选择
  • 将 Picker 显示为弹出对话框
  • 将 Picker 相对于特定 UI 元素定位
  • 配置 RelativePosition 选项(AlignTop、AlignTopLeft、AlignBottomRight 等)
  • 设置 RelativeView 以进行自定义定位
  • 使用 PopupWidth 和 PopupHeight 控制弹出窗口大小
  • 使用 IsOpen 属性以编程方式打开或关闭 Picker
列配置

📄 阅读: references/columns.md

当用户需要:

  • 向 Picker 添加单列或多列
  • 使用 DisplayMemberPath 显示特定对象属性
  • 自定义列宽
  • 设置 SelectedIndex 和 SelectedItem 属性
  • 将 ItemsSource 绑定到数据集合
  • 为多列 Picker 配置列分隔线颜色
  • 管理列的动态添加和移除
标题、页脚和选择视图

📄 阅读: references/header-footer-selection.md

当用户需要:

  • 添加并自定义标题视图(PickerHeaderView)
  • 设置标题文本和高度
  • 配置带有“确定”和“取消”按钮的页脚视图
  • 启用/禁用 ShowOkButton 属性
  • 自定义页脚按钮文本(OkButtonText、CancelButtonText)
  • 设置选择视图的样式
  • 使用 IsSelectionImmediate 立即更新选择
列标题

📄 阅读: references/column-headers.md

当用户需要:

  • 添加列标题视图(PickerColumnHeaderView)
  • 为单个列设置 HeaderText 属性
  • 配置列标题高度
  • 自定义列标题样式
  • 实现多列标题布局
填充项目和数据绑定

📄 阅读: references/populating-items.md

当用户需要:

  • 将 ItemsSource 绑定到 ObservableCollection
  • 创建并填充数据源
  • 在 XAML 和 C# 中配置绑定上下文
  • 使用自定义属性绑定复杂对象
  • 处理动态数据更新和刷新
  • 实现 MVVM 数据绑定模式
事件和命令

📄 阅读: references/events-commands.md

当用户需要:

  • 处理 Opened、Closing 和 Closed 事件
  • 响应 SelectionChanged 事件
  • 处理 OkButtonClicked 和 CancelButtonClicked 事件
  • 在 MVVM 中使用 SelectionChangedCommand
  • 实现 AcceptCommand 和 DeclineCommand
  • 访问事件参数和参数
  • 使用 Closing 事件取消选择器关闭
自定义和样式

📄 阅读: references/customization.md

当用户需要:

  • 应用项目模板以自定义项目外观
  • 自定义视觉样式(颜色、字体、背景)
  • 配置文本样式和格式
  • 实现视觉状态
  • 应用自定义主题和样式
无障碍访问

📄 阅读: references/accessibility.md

当用户需要:

  • 确保符合 WCAG 标准
  • 实现键盘导航支持
  • 配置屏幕阅读器兼容性
  • 添加 ARIA 无障碍属性
  • 管理焦点行为
  • 遵循无障碍访问最佳实践
本地化

📄 阅读: references/localization.md

当用户需要:

  • 实现多语言支持
  • 设置本地化资源文件
  • 配置特定区域性的格式
  • 处理从右到左(RTL)语言
高级功能

📄 阅读: references/advanced-features.md

当用户需要:

  • 启用循环(循环滚动)
  • 配置选择器文本显示模式
  • 实现数据模板选择器
  • 应用液态玻璃效果
  • 优化选择器性能
  • 处理复杂的自定义场景
  • 排查边缘情况

评论

支持 Markdown