Implementing Toolbar in.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.
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
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
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
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
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
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
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
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
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)