mcpField
S
syncfusion-maui-toolbar

syncfusion-maui-toolbar

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

关于 syncfusion-maui-toolbar

为 .NET MAUI 应用实现 Syncfusion SfToolbar 控件的文档技能，介绍工具栏项目、布局、选择、事件、定制和高级效果。

主要功能

  1. 01图标、文本和自定义视图项目
  2. 02水平和垂直布局
  3. 03溢出项目与多行处理
  4. 04选择模式和键盘导航
  5. 05事件、命令与外观定制

适用场景

  1. 01在 MAUI 应用中添加快捷命令
  2. 02创建格式或文档编辑工具栏
  3. 03构建带溢出项目的导航工具栏
  4. 04通过覆盖工具栏展示上下文操作

安装

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

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

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

包含的文件

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

references/
advanced-features.md
customization.md
events-and-commands.md
getting-started.md
layout-and-overflow.md
selection-and-interaction.md
toolbar-items.md

详细介绍

在 .NET MAUI 中实现工具栏

指导用户实现 Syncfusion .NET MAUI Toolbar（SfToolbar）控件——一种可自定义的 UI 组件，可通过按钮、图标或菜单快速访问操作或命令。

何时使用此技能

在用户需要以下操作时使用此技能：

  • 添加工具栏，以便在其 .NET MAUI 应用程序中快速访问命令
  • 配置工具栏项，包括图标、文本或自定义视图
  • 实现文本格式工具栏（粗体、斜体、下划线、对齐）
  • 创建文档编辑工具栏并处理溢出
  • 添加导航工具栏，采用水平或垂直布局
  • 配置选择模式（单选、多选、切换）
  • 处理工具栏事件（点击、选择、交互）
  • 自定义工具栏外观（颜色、样式、圆角）
  • 实现叠加工具栏，用于上下文操作
  • 为工具栏应用现代玻璃效果
  • 支持工具栏键盘导航
  • 为工具栏项添加工具提示

组件概述

Syncfusion .NET MAUI Toolbar（SfToolbar）是一款功能丰富的控件，提供：

  • 灵活的项显示方式：图标、文本或自定义视图
  • 多种方向：水平和垂直布局
  • 溢出处理：滚动、导航按钮、更多按钮、多行、扩展行
  • 选择模式：单选、单选并取消、多选
  • 丰富的自定义选项：颜色、样式、字体、圆角
  • 事件支持：点击、长按、触摸交互、选择更改
  • 叠加工具栏：按需显示的上下文工具栏
  • 现代效果：简洁 UI 的液态玻璃效果
  • 无障碍功能：工具提示、键盘导航、ARIA 支持

文档与导航指南

入门

📄 阅读： references/getting-started.md

何时阅读： 安装、首次设置、基本工具栏实现

涵盖主题：

  • 安装 Syncfusion.Maui.Toolbar NuGet 包
  • 在 MauiProgram.cs 中注册 Syncfusion 核心处理程序
  • 使用 XAML 和 C# 创建第一个工具栏
  • 添加基本工具栏项
  • 使用 FontImageSource 配置图标
  • 设置 Material 图标字体
工具栏项与显示

📄 阅读： references/toolbar-items.md

何时阅读： 配置工具栏项、图标、文本、自定义视图、分隔符和对齐方式

涵盖主题：

  • 仅包含图标的工具栏项
  • 仅包含文本的工具栏项
  • 图标与文本的组合
  • 图标大小和文本位置
  • 自定义项视图（按钮、复选框、输入框）
  • 用于视觉组织的分隔符项
  • 项大小和间距
  • 前置、后置和居中对齐
  • 配置等间距
  • 以编程方式清除选择
  • 为项命名以便识别
布局与溢出

📄 阅读： references/layout-and-overflow.md

何时阅读： 设置工具栏方向、处理溢出项、配置滚动或导航模式

涵盖主题：

  • 水平工具栏布局
  • 垂直工具栏布局
  • 溢出项的滚动模式
  • 用于逐项浏览的导航按钮
  • 带下拉菜单的更多按钮
  • 更多按钮的位置（自动、左侧、右侧、顶部、底部）
  • 支持多行以换行显示项
  • 带展开/折叠按钮的扩展行
  • 取消默认下拉视图
  • 宽度和高度注意事项
选择与交互

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

何时阅读： 配置选择行为、启用工具提示、处理用户交互

涵盖主题：

  • 单选模式
  • 单选并取消模式（切换选择）
  • 多选模式
  • 启用和禁用工具栏项
  • 配置工具提示文本
  • 自定义工具提示（背景、文本样式、位置）
  • 键盘导航支持
  • IsEnabled 状态管理
  • 用户交互模式
事件和命令

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

阅读时机： 处理工具栏事件、实现 MVVM 命令、响应用户操作

涵盖主题：

  • Tapped 事件和 TappedCommand
  • 用于指针操作的 ItemTouchInteraction 事件
  • 用于长按手势的 ItemLongPressed 事件
  • 用于溢出按钮的 MoreButtonTapped 事件
  • 用于溢出项的 MoreItemsChanged 事件
  • 用于跟踪选择状态的 SelectionChanged 事件
  • 与 ViewModel 集成的 MVVM 命令模式
  • 事件参数和参数
  • 命令执行和 CanExecute
自定义

📄 阅读： references/customization.md

阅读时机： 设置工具栏项样式、自定义按钮、更改颜色、应用圆角半径

涵盖主题：

  • 工具栏项自定义（IsEnabled、TextStyle、Color）
  • 用于选中项的 SelectionHighlightColor
  • 分隔符自定义（描边颜色、粗细）
  • 导航按钮自定义（颜色、背景）
  • 导航按钮 DataTemplate 自定义
  • 更多按钮自定义（图标颜色、背景）
  • 分隔线自定义
  • 工具栏圆角半径
  • 选中项的选择圆角半径
  • 主题集成
高级功能

📄 阅读： references/advanced-features.md

阅读时机： 实现浮层工具栏、应用玻璃效果、设置高级样式

涵盖主题：

  • 浮层工具栏实现
  • 浮层中的返回图标自定义
  • BackIconAlignment（Start/End 位置）
  • 用于自定义返回图标的 BackIconTemplate
  • BackIconToolTipText 配置
  • 液态玻璃效果设置
  • 玻璃效果的透明背景
  • 玻璃效果下的工具栏分组布局
  • 使用分隔符描边粗细设置分组间距
  • 平台支持（macOS 26+、iOS 26+、.NET 10）

评论

支持 Markdown