Loading...
Loading...
Implement Syncfusion WPF ToolBarAdv controls for customizable toolbar layouts. Use this when creating toolbars with custom positioning, handling overflow items, implementing floating or docked states, or integrating ToolBarManager for multi-position layouts. Covers band positioning, gripper controls, add/remove button functionality, and dynamic state management.
npx skill4agent add syncfusion/wpf-ui-components-skills syncfusion-wpf-toolbarToolBarAdvToolBarTrayAdvToolBarManagerToolBarItemSeparatorSyncfusion.Windows.Tools.Controls<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>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;<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><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><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><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><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>| Property | Description | Type | When to Use |
|---|---|---|---|
| Band index where toolbar should be placed | int | Position toolbar in specific row/column |
| Position within the band | int | Order multiple toolbars in same band |
| Display name for toolbar | string | Identify toolbar to users |
| Show/hide gripper handle | Visibility | Control user repositioning ability |
| Position for floating state | Point | Set custom floating position |
| Overflow popup open state | bool | Programmatically open/close overflow |
| Show add/remove menu | bool | Allow users to customize visible items |
| Property | Description | Type | When to Use |
|---|---|---|---|
| Toolbar tray at top | ToolBarTrayAdv | Position toolbars at top |
| Toolbar tray at bottom | ToolBarTrayAdv | Position toolbars at bottom |
| Toolbar tray at left | ToolBarTrayAdv | Position toolbars at left |
| Toolbar tray at right | ToolBarTrayAdv | Position toolbars at right |
| Allow docking at position | bool | Restrict docking positions |
| Main application content | UIElement | Content displayed in remaining space |
Never