Back to Details

syncfusion-maui-toolbar

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Implementing Toolbar in .NET MAUI

在.NET MAUI中实现工具栏

Guide users on implementing the Syncfusion .NET MAUI Toolbar (SfToolbar) control - a customizable UI component that provides quick access to actions or commands through buttons, icons, or menus.
本指南将指导用户实现Syncfusion .NET MAUI Toolbar（SfToolbar）控件——这是一个可自定义的UI组件，通过按钮、图标或菜单为用户提供快速访问操作或命令的途径。

When to Use This Skill

何时使用本技能

Use this skill when users need to:
  • Add a toolbar to their .NET MAUI application for quick access to commands
  • Configure toolbar items with icons, text, or custom views
  • Implement text formatting toolbars (bold, italic, underline, alignment)
  • Create document editing toolbars with overflow handling
  • Add navigation toolbars with horizontal or vertical layouts
  • Configure selection modes (single, multiple, toggle)
  • Handle toolbar events (taps, selections, interactions)
  • Customize toolbar appearance (colors, styles, corner radius)
  • Implement overlay toolbars for contextual actions
  • Apply modern glass effects to toolbars
  • Support keyboard navigation in toolbars
  • Add tooltips to toolbar items
当用户需要以下操作时，可使用本技能：
  • 为.NET MAUI应用添加工具栏，以便快速访问命令
  • 配置工具栏项，支持图标、文本或自定义视图
  • 实现文本格式工具栏（粗体、斜体、下划线、对齐方式）
  • 创建带溢出处理的文档编辑工具栏
  • 添加支持水平或垂直布局的导航工具栏
  • 配置选择模式（单选、多选、切换）
  • 处理工具栏事件（点击、选择、交互）
  • 自定义工具栏外观（颜色、样式、圆角）
  • 实现上下文操作的覆盖式工具栏
  • 为工具栏应用现代玻璃效果
  • 支持工具栏中的键盘导航
  • 为工具栏项添加工具提示

Component Overview

组件概述

The Syncfusion .NET MAUI Toolbar (SfToolbar) is a feature-rich control that offers:
  • Flexible item display: Icons, text, or custom views
  • Multiple orientations: Horizontal and vertical layouts
  • Overflow handling: Scroll, navigation buttons, more button, multi-row, extended row
  • Selection modes: Single, single deselect, multiple selection
  • Rich customization: Colors, styles, fonts, corner radius
  • Event support: Taps, long press, touch interactions, selection changes
  • Overlay toolbars: Contextual toolbars that appear on demand
  • Modern effects: Liquid glass effect for sleek UI
  • Accessibility: Tooltips, keyboard navigation, ARIA support
Syncfusion .NET MAUI Toolbar（SfToolbar）是一个功能丰富的控件，具备以下特性：
  • 灵活的项展示：支持图标、文本或自定义视图
  • 多种布局方向：水平和垂直布局
  • 溢出处理：滚动、导航按钮、更多按钮、多行、扩展行
  • 选择模式：单选、单选取消、多选
  • 丰富的自定义选项：颜色、样式、字体、圆角
  • 事件支持：点击、长按、触摸交互、选择变更
  • 覆盖式工具栏：按需显示的上下文工具栏
  • 现代效果：流畅的液态玻璃UI效果
  • 可访问性：工具提示、键盘导航、ARIA支持

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md
When to read: Installation, first-time setup, basic toolbar implementation
Topics covered:
  • Installing Syncfusion.Maui.Toolbar NuGet package
  • Registering Syncfusion core handler in MauiProgram.cs
  • Creating your first toolbar with XAML and C#
  • Adding basic toolbar items
  • Configuring icons with FontImageSource
  • Material icons font setup
📄 阅读： references/getting-started.md
阅读时机： 安装、首次设置、基础工具栏实现
涵盖主题：
  • 安装Syncfusion.Maui.Toolbar NuGet包
  • 在MauiProgram.cs中注册Syncfusion核心处理器
  • 使用XAML和C#创建首个工具栏
  • 添加基础工具栏项
  • 使用FontImageSource配置图标
  • Material图标字体设置

Toolbar Items and Display

工具栏项与展示

📄 Read: references/toolbar-items.md
When to read: Configuring toolbar items, icons, text, custom views, separators, alignment
Topics covered:
  • Icon-only toolbar items
  • Text-only toolbar items
  • Icon with text combinations
  • Icon sizing and text positioning
  • Custom item views (buttons, checkboxes, entries)
  • Separator items for visual organization
  • Item sizing and spacing
  • Leading, trailing, and center alignment
  • Equal spacing configuration
  • Clear selection programmatically
  • Item naming for identification
📄 阅读： references/toolbar-items.md
阅读时机： 配置工具栏项、图标、文本、自定义视图、分隔符、对齐方式
涵盖主题：
  • 仅图标工具栏项
  • 仅文本工具栏项
  • 图标与文本组合
  • 图标尺寸与文本定位
  • 自定义项视图（按钮、复选框、输入框）
  • 用于视觉区分的分隔符项
  • 项尺寸与间距
  • 居左、居右和居中对齐
  • 等间距配置
  • 以编程方式清除选择
  • 为项命名以便识别

Layout and Overflow

布局与溢出

📄 Read: references/layout-and-overflow.md
When to read: Setting toolbar orientation, handling overflow items, configuring scroll/navigation modes
Topics covered:
  • Horizontal toolbar layout
  • Vertical toolbar layout
  • Scroll mode for overflow items
  • Navigation buttons for stepping through items
  • More button with dropdown menu
  • More button positioning (auto, left, right, top, bottom)
  • Multi-row support for wrapping items
  • Extended row with expand/collapse button
  • Canceling default dropdown view
  • Width and height considerations
📄 阅读： references/layout-and-overflow.md
阅读时机： 设置工具栏方向、处理溢出项、配置滚动/导航模式
涵盖主题：
  • 水平工具栏布局
  • 垂直工具栏布局
  • 溢出项的滚动模式
  • 用于遍历项的导航按钮
  • 带下拉菜单的更多按钮
  • 更多按钮定位（自动、左、右、上、下）
  • 支持项换行的多行布局
  • 带展开/折叠按钮的扩展行
  • 取消默认下拉视图
  • 宽度与高度考量

Selection and Interaction

选择与交互

📄 Read: references/selection-and-interaction.md
When to read: Configuring selection behavior, enabling tooltips, handling user interactions
Topics covered:
  • Single selection mode
  • Single deselect mode (toggle selection)
  • Multiple selection mode
  • Enabling and disabling toolbar items
  • Tooltip text configuration
  • Tooltip customization (background, text style, position)
  • Keyboard navigation support
  • IsEnabled state management
  • User interaction patterns
📄 阅读： references/selection-and-interaction.md
阅读时机： 配置选择行为、启用工具提示、处理用户交互
涵盖主题：
  • 单选模式
  • 单选取消模式（切换选择）
  • 多选模式
  • 启用和禁用工具栏项
  • 工具提示文本配置
  • 工具提示自定义（背景、文本样式、位置）
  • 键盘导航支持
  • IsEnabled状态管理
  • 用户交互模式

Events and Commands

事件与命令

📄 Read: references/events-and-commands.md
When to read: Handling toolbar events, implementing MVVM commands, responding to user actions
Topics covered:
  • Tapped event and TappedCommand
  • ItemTouchInteraction event for pointer actions
  • ItemLongPressed event for long press gestures
  • MoreButtonTapped event for overflow button
  • MoreItemsChanged event for overflow items
  • SelectionChanged event for selection tracking
  • MVVM command patterns with ViewModel integration
  • Event arguments and parameters
  • Command execution and CanExecute
📄 阅读： references/events-and-commands.md
阅读时机： 处理工具栏事件、实现MVVM命令、响应用户操作
涵盖主题：
  • Tapped事件与TappedCommand
  • 用于指针操作的ItemTouchInteraction事件
  • 用于长按手势的ItemLongPressed事件
  • 溢出按钮的MoreButtonTapped事件
  • 溢出项变更的MoreItemsChanged事件
  • 跟踪选择的SelectionChanged事件
  • 集成ViewModel的MVVM命令模式
  • 事件参数与参数
  • 命令执行与CanExecute

Customization

自定义

📄 Read: references/customization.md
When to read: Styling toolbar items, customizing buttons, changing colors, applying corner radius
Topics covered:
  • Toolbar item customization (IsEnabled, TextStyle, Color)
  • SelectionHighlightColor for selected items
  • Separator customization (stroke color, thickness)
  • Navigation button customization (colors, backgrounds)
  • Navigation button DataTemplate customization
  • More button customization (icon color, background)
  • Divider line customization
  • Toolbar corner radius
  • Selection corner radius for selected items
  • Theme integration
📄 阅读： references/customization.md
阅读时机： 设置工具栏项样式、自定义按钮、更改颜色、应用圆角
涵盖主题：
  • 工具栏项自定义（IsEnabled、TextStyle、Color）
  • 选中项的SelectionHighlightColor
  • 分隔符自定义（描边颜色、厚度）
  • 导航按钮自定义（颜色、背景）
  • 导航按钮DataTemplate自定义
  • 更多按钮自定义（图标颜色、背景）
  • 分割线自定义
  • 工具栏圆角
  • 选中项的选择圆角
  • 主题集成

Advanced Features

高级特性

📄 Read: references/advanced-features.md
When to read: Implementing overlay toolbars, applying glass effects, advanced styling
Topics covered:
  • Overlay toolbar implementation
  • Back icon customization in overlay
  • BackIconAlignment (Start/End positioning)
  • BackIconTemplate for custom back icons
  • BackIconToolTipText configuration
  • Liquid glass effect setup
  • Transparent background for glass effect
  • Toolbar grouping layout with glass effect
  • Group spacing with separator stroke thickness
  • Platform support (macOS 26+, iOS 26+, .NET 10)
📄 阅读： references/advanced-features.md
阅读时机： 实现覆盖式工具栏、应用玻璃效果、高级样式设置
涵盖主题：
  • 覆盖式工具栏实现
  • 覆盖层中的返回图标自定义
  • BackIconAlignment（起始/结束位置）
  • 自定义返回图标的BackIconTemplate
  • BackIconToolTipText配置
  • 液态玻璃效果设置
  • 玻璃效果的透明背景
  • 带玻璃效果的工具栏分组布局
  • 带分隔符描边厚度的组间距
  • 平台支持（macOS 26+、iOS 26+、.NET 10）