Skills
skills/syncfusion/wpf-ui-components-skills/syncfusion-wpf-toolbar

syncfusion-wpf-toolbar

SKILL.md

Implementing Syncfusion WPF ToolBarAdv

When to Use This Skill

Reference this skill when users need to:

  • Implement ToolBarAdv controls in WPF applications with Syncfusion.Shared.WPF assembly
  • Create command toolbars with buttons, separators, and custom controls
  • Handle overflow items when toolbar content exceeds available space
  • Implement floating toolbars that can detach and dock at different positions
  • Use ToolBarManager to organize toolbars at top, bottom, left, or right positions
  • Configure band positioning to control toolbar layout within ToolBarTrayAdv
  • Add/remove button functionality allowing users to show/hide toolbar items
  • Customize toolbar appearance with themes, icon templates, and styling
  • Manage toolbar states (Docked, Floating, Hidden) dynamically
  • Implement gripper controls for toolbar drag-and-drop repositioning

Component Overview

ToolBarAdv is a container control for grouping related commands or controls, typically consisting of buttons that invoke actions. It provides:

  • Flexible positioning with Band and BandIndex properties
  • Overflow panel for items that don't fit in visible space
  • Multiple states: Docked, Floating, or Hidden
  • ToolBarManager integration for multi-position docking
  • Gripper control for user-driven repositioning
  • Icon templates supporting path data and font icons
  • Add/Remove buttons for user-customizable item visibility
  • Theme support via SfSkinManager

Key Controls:

  • ToolBarAdv - Main toolbar container
  • ToolBarTrayAdv - Container for organizing multiple toolbars in bands
  • ToolBarManager - Layout manager for positioning toolbars at Top/Bottom/Left/Right
  • ToolBarItemSeparator - Visual separator between toolbar items

Assembly: Syncfusion.Shared.WPF
Namespace: Syncfusion.Windows.Tools.Controls

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

  • Assembly and NuGet package installation
  • Creating ToolBarAdv via XAML and C#
  • Basic structure (Gripper, Overflow button)
  • Adding buttons and controls to toolbar
  • Icon template setup with path data
  • Initial appearance and styling
  • License key registration (v16.2.0.x+)

Positioning and Layout

📄 Read: references/positioning-and-layout.md

  • Band and BandIndex properties for toolbar placement
  • Overflow handling (OverflowMode.Always, Never, AsNeeded)
  • Gripper visibility control
  • ToolBarTrayAdv orientation (Horizontal/Vertical)
  • Multiple toolbar arrangement in bands
  • Overflow panel behavior

Add/Remove Button Functionality

📄 Read: references/add-remove-buttons.md

  • EnableAddRemoveButton feature
  • Adding items with Icon and Label properties
  • Hiding toolbar items with IsAvailable attached property
  • ToolBarItemInfoCollection management
  • User-driven item visibility customization

Toolbar States and Behavior

📄 Read: references/toolbar-states.md

  • ToolBarState property (Docked, Floating, Hidden)
  • FloatingBarLocation configuration
  • Docking restrictions (CanDockAtTop/Bottom/Left/Right)
  • ToolBarStateChanged event handling
  • Floating toolbar lifecycle
  • State transitions and management

ToolBarManager Integration

📄 Read: references/toolbar-manager.md

  • TopToolBarTray, BottomToolBarTray, LeftToolBarTray, RightToolBarTray
  • Multi-position toolbar layout
  • Content placement in remaining space
  • IsLocked property to prevent repositioning
  • Floating toolbar requirements

Customization and Theming

📄 Read: references/customization-theming.md

  • FloatingToolBarStyle property
  • Foreground color customization
  • ControlsResourceDictionary for FrameworkElement styles
  • SfSkinManager theme application
  • ThemeStudio for custom themes
  • Built-in theme options

Quick Start Example

Basic ToolBarAdv with Buttons

XAML:

<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <syncfusion:ToolBarTrayAdv>
        <syncfusion:ToolBarAdv ToolBarName="Standard" Height="40">
            <!-- New Document Button -->
            <Button Width="22" Height="22" ToolTip="New">
                <Image Source="Images/NewDocumentHS.png" Width="16" Height="16"/>
            </Button>
            
            <!-- Open Document Button -->
            <Button Width="22" Height="22" ToolTip="Open">
                <Image Source="Images/openHS.png" Width="16" Height="16"/>
            </Button>
            
            <!-- Separator -->
            <syncfusion:ToolBarItemSeparator />
            
            <!-- Save Button -->
            <Button Width="22" Height="22" ToolTip="Save">
                <Image Source="Images/saveHS.png" Width="16" Height="16"/>
            </Button>
        </syncfusion:ToolBarAdv>
    </syncfusion:ToolBarTrayAdv>
</Window>

C#:

using Syncfusion.Windows.Tools.Controls;

// Create toolbar
ToolBarAdv toolBar = new ToolBarAdv();
toolBar.ToolBarName = "Standard";
toolBar.Height = 40;

// Add New button
Button newButton = new Button
{
    Width = 22,
    Height = 22,
    ToolTip = "New",
    Content = new Image 
    { 
        Source = new BitmapImage(new Uri("Images/NewDocumentHS.png", UriKind.Relative)),
        Width = 16,
        Height = 16
    }
};
toolBar.Items.Add(newButton);

// Add to ToolBarTray
ToolBarTrayAdv tray = new ToolBarTrayAdv();
tray.ToolBars.Add(toolBar);

// Add to window
this.Content = tray;

ToolBarManager with Multiple Positions

XAML:

<syncfusion:ToolBarManager x:Name="toolBarManager">
    <!-- Top Toolbar -->
    <syncfusion:ToolBarManager.TopToolBarTray>
        <syncfusion:ToolBarTrayAdv>
            <syncfusion:ToolBarAdv ToolBarName="File">
                <Button Width="22" Height="22" ToolTip="New">
                    <Image Source="Images/NewDocumentHS.png" Width="16" Height="16"/>
                </Button>
            </syncfusion:ToolBarAdv>
        </syncfusion:ToolBarTrayAdv>
    </syncfusion:ToolBarManager.TopToolBarTray>
    
    <!-- Left Toolbar -->
    <syncfusion:ToolBarManager.LeftToolBarTray>
        <syncfusion:ToolBarTrayAdv Orientation="Vertical">
            <syncfusion:ToolBarAdv ToolBarName="Tools">
                <Button Width="22" Height="22" ToolTip="Cut">
                    <Image Source="Images/CutHS.png" Width="16" Height="16"/>
                </Button>
            </syncfusion:ToolBarAdv>
        </syncfusion:ToolBarTrayAdv>
    </syncfusion:ToolBarManager.LeftToolBarTray>
    
    <!-- Main Content -->
    <syncfusion:ToolBarManager.Content>
        <TextBox Text="Your application content here"/>
    </syncfusion:ToolBarManager.Content>
</syncfusion:ToolBarManager>

Common Patterns

Pattern 1: Band Positioning for Multiple Toolbars

<syncfusion:ToolBarTrayAdv>
    <!-- First toolbar on Band 0 -->
    <syncfusion:ToolBarAdv Band="0" BandIndex="0" ToolBarName="Standard">
        <Button Content="New"/>
        <Button Content="Open"/>
    </syncfusion:ToolBarAdv>
    
    <!-- Second toolbar on same band -->
    <syncfusion:ToolBarAdv Band="0" BandIndex="1" ToolBarName="Extras">
        <Button Content="Cut"/>
        <Button Content="Copy"/>
    </syncfusion:ToolBarAdv>
    
    <!-- Third toolbar on different band -->
    <syncfusion:ToolBarAdv Band="1" BandIndex="0" ToolBarName="Format">
        <Button Content="Bold"/>
        <Button Content="Italic"/>
    </syncfusion:ToolBarAdv>
</syncfusion:ToolBarTrayAdv>

Pattern 2: Overflow Mode Control

<syncfusion:ToolBarAdv>
    <!-- Always visible -->
    <Button syncfusion:ToolBarAdv.OverflowMode="Never"
            Content="Important"/>
    
    <!-- Can overflow when needed -->
    <Button syncfusion:ToolBarAdv.OverflowMode="AsNeeded"
            Content="Normal"/>
    
    <!-- Always in overflow -->
    <Button syncfusion:ToolBarAdv.OverflowMode="Always"
            Content="Advanced"/>
</syncfusion:ToolBarAdv>

Pattern 3: Add/Remove Buttons with Labels

<syncfusion:ToolBarAdv EnableAddRemoveButton="True">
    <Button syncfusion:ToolBarAdv.Label="New Document"
            syncfusion:ToolBarAdv.Icon="Images/NewDocumentHS.png">
        <Image Source="Images/NewDocumentHS.png" Width="16" Height="16"/>
    </Button>
    
    <Button syncfusion:ToolBarAdv.Label="Open Document"
            syncfusion:ToolBarAdv.Icon="Images/openHS.png">
        <Image Source="Images/openHS.png" Width="16" Height="16"/>
    </Button>
</syncfusion:ToolBarAdv>

Pattern 4: Floating Toolbar Configuration

<syncfusion:ToolBarManager>
    <syncfusion:ToolBarManager.TopToolBarTray>
        <syncfusion:ToolBarTrayAdv>
            <syncfusion:ToolBarAdv 
                ToolBarName="FloatingTools"
                syncfusion:ToolBarManager.ToolBarState="Floating"
                FloatingBarLocation="500,300">
                <Button Content="Tool 1"/>
                <Button Content="Tool 2"/>
            </syncfusion:ToolBarAdv>
        </syncfusion:ToolBarTrayAdv>
    </syncfusion:ToolBarManager.TopToolBarTray>
</syncfusion:ToolBarManager>

Key Properties

ToolBarAdv Properties

Property Description Type When to Use
Band Band index where toolbar should be placed int Position toolbar in specific row/column
BandIndex Position within the band int Order multiple toolbars in same band
ToolBarName Display name for toolbar string Identify toolbar to users
GripperVisibility Show/hide gripper handle Visibility Control user repositioning ability
FloatingBarLocation Position for floating state Point Set custom floating position
IsOverflowOpen Overflow popup open state bool Programmatically open/close overflow
EnableAddRemoveButton Show add/remove menu bool Allow users to customize visible items

ToolBarManager Properties

Property Description Type When to Use
TopToolBarTray Toolbar tray at top ToolBarTrayAdv Position toolbars at top
BottomToolBarTray Toolbar tray at bottom ToolBarTrayAdv Position toolbars at bottom
LeftToolBarTray Toolbar tray at left ToolBarTrayAdv Position toolbars at left
RightToolBarTray Toolbar tray at right ToolBarTrayAdv Position toolbars at right
CanDockAtTop/Bottom/Left/Right Allow docking at position bool Restrict docking positions
Content Main application content UIElement Content displayed in remaining space

Common Use Cases

Use Case 1: Application Menu Bar

Create standard application toolbar with File, Edit, Format commands positioned at top.

When: Building document editors, IDEs, or productivity applications
Read: references/getting-started.md, references/toolbar-manager.md

Use Case 2: Contextual Toolbars

Multiple toolbars organized in bands, showing/hiding based on current context or selection.

When: Complex applications with mode-specific commands
Read: references/positioning-and-layout.md, references/add-remove-buttons.md

Use Case 3: Floating Tool Palettes

Detachable toolbars that users can position anywhere on screen.

When: Graphics editors, design tools, or applications with detachable panels
Read: references/toolbar-states.md, references/toolbar-manager.md

Use Case 4: User-Customizable Toolbars

Allow users to show/hide toolbar items based on their preferences.

When: Applications with power users who want to customize their workspace
Read: references/add-remove-buttons.md

Best Practices

  1. Use ToolBarManager when you need toolbars at multiple positions (top/bottom/left/right)
  2. Set ToolBarName for all toolbars to help users identify them
  3. Configure OverflowMode strategically - keep critical buttons visible with Never
  4. Enable Add/Remove buttons for power user scenarios with many optional commands
  5. Use Icon and Label attached properties when EnableAddRemoveButton is true
  6. Set meaningful FloatingBarLocation to ensure floating toolbars appear in useful positions
  7. Apply themes consistently using SfSkinManager for professional appearance
  8. Use IconTemplate for scalable vector icons instead of raster images
  9. Group related commands in the same toolbar with separators
  10. Test toolbar behavior at different window sizes to ensure overflow works correctly
Weekly Installs
4
Repository
syncfusion/wpf-…s-skills
First Seen
Today
Security Audits
Gen Agent Trust HubPass
SocketPass
SnykPass
Installed on
opencode4
gemini-cli4
deepagents4
antigravity4
claude-code4
github-copilot4