关于 syncfusion-maui-picker
面向 .NET MAUI 开发者的 Syncfusion SfPicker 实现指南,涵盖单列与多列选择器的配置和定制,适用于日期、时间、颜色等选择界面。
主要功能
- 01配置 Default、Dialog 和 RelativeDialog 模式
- 02绑定单列或多列数据
- 03自定义标题、页脚与选中视图
- 04处理选择事件和命令
- 05配置无障碍与本地化
- 06使用循环滚动和项目模板
适用场景
- 01在 .NET MAUI 应用中实现日期或时间选择器
- 02为复杂数据配置多列选择界面
- 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.mdadvanced-features.mdcolumn-headers.mdcolumns.mdcustomization.mdevents-commands.mdgetting-started.mdheader-footer-selection.mdlocalization.mdpicker-modes.mdpopulating-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
当用户需要:
- 启用循环(循环滚动)
- 配置选择器文本显示模式
- 实现数据模板选择器
- 应用液态玻璃效果
- 优化选择器性能
- 处理复杂的自定义场景
- 排查边缘情况