Getting Started with WPF ToolBar control

15 Mar 202313 minutes to read

Important
Starting with v16.2.0.x, if you refer to Syncfusion assemblies from trial setup or from the NuGet feed, include a license key in your projects. Refer to this link to learn about registering Syncfusion license key in your WPF application to use our components.

This section explains how to add the WPF ToolBar (ToolBarAdv) control to an application and its structure.

Adding ToolBarAdv to a WPF Application

ToolBarAdv can be added to an application in a following way.

Create the ToolBarAdv Control to an application by using XAML:

The following ways explains how to add ToolBarAdv control using XAML code:

Create a WPF project in Visual Studio and refer “Syncfusion.Shared.Wpf” assembly to the project.

Include an XML namespace for the above assemblies to the Main window.

XAML
<Window x:Class="Application_New.MainWindow"
  
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  
xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
  
Title="MainWindow" Height="350" Width="525">

Now add the WPF ToolBar (ToolBarAdv) control with a required optimal name using the namespace

XAML
<syncfusion:ToolBarAdv Height="100" HorizontalAlignment="Left" Margin="92,90,0,0" Name="toolBarAdv1" VerticalAlignment="Top" Width="200" />

Create the ToolBarAdv control to an application by C#:

C#
ToolBarAdv tool = new ToolBarAdv();

tool.Name = "toolBarAdv1";

tool.Width = 100;

tool.Height = 50;

Appearance and Structure of the Control

Appearance and Structure

The Overflow button is a toggle button that displays on clicking the Overflow panel.
The Gripper is used to drag the ToolBarAdv to change its Band. The state of the ToolBarAdv can be changed to float and dock by clicking the gripper and dragging the ToolBarAdv, when the ToolBarAdv is hosted in ToolBarManager.

Setting icon template

The IconTemplate supports adding any type of images such as path data, font icons, etc. as template in ToolBar. The icon will automatically resize the template content according to its size provided in the data template.

XAML
<syncfusion:ToolBarManager x:Name="toolBarManager" Grid.Row="1" CanDockAtLeft="{Binding IsChecked, ElementName=canDockAtLeft}"
                               CanDockAtTop="{Binding IsChecked, ElementName=canDockAtTop}" CanDockAtRight="{Binding IsChecked, ElementName=canDockAtRight}"
                               CanDockAtBottom="{Binding IsChecked, ElementName=canDockAtBottom}">

    <syncfusion:ToolBarManager.Resources>
        <DataTemplate x:Key="NewDataTemplate">
            <Path x:Name="New_Folder" Data="M7,1.7070007 L7,5 10.292999,5 z M1,1 L1,15 11,15 11,6 6,6 6,1 z M0,0 L6.7070007,0 12,5.2929993 12,16 0,16 z" 
                    Fill="{Binding Foreground, ElementName=button1}" HorizontalAlignment="Center" Stretch="Fill" Width="14" Height="14" VerticalAlignment="Center" />
        </DataTemplate>
        <DataTemplate x:Key="OpenDataTemplate">
            <Path x:Name="Open" Data="M5.162991,5.0009986 L1.7839907,10.979999 4.3081884,10.984653 5.0009999,10.984999 5.0009999,10.98593 12.088991,10.999 14.480014,5.0009986 z M0,0 L5.7069998,0 6.7069998,1 13,1 13,3.9999998 12,3.9999998 12,1.9999998 6.2930002,1.9999998 5.2930002,1 0.99999994,1 0.99999994,10.335325 4.5790062,4.0009986 15.954991,4.0009986 12.765994,12.000998 4.552258,11.98482 0,11.982999 z" 
                    Fill="{Binding Foreground, ElementName=button1}" HorizontalAlignment="Center" Stretch="Fill" Width="14" Height="14" VerticalAlignment="Center"/>
        </DataTemplate>
        <DataTemplate x:Key="SaveDataTemplate">
            <Path x:Name="Print" Data="M5.0000019,11 L5.0000019,15 11.000002,15 11.000002,11 z M4.0000019,1 L4.0000019,6 12.000002,6 12.000002,1 z M1,1 L1,13.174 2.7160001,15 4.0000019,15 4.0000019,10 12.000002,10 12.000002,15 15,15 15,1 13.000002,1 13.000002,7 3.0000019,7 3.0000019,1 z M0,0 L3.0000019,0 13.000002,0 16,0 16,16 12.000002,16 4.0000019,16 2.2840004,16 0,13.57 z" 
                    Fill="{Binding Foreground, ElementName=button1}" HorizontalAlignment="Center" Stretch="Fill" Width="16" Height="14" VerticalAlignment="Center"/>
        </DataTemplate>
        <DataTemplate x:Key="SaveAllDataTemplate">
            <Path Data="M5.0000019,11 L5.0000019,15 11.000002,15 11.000002,11 z M4.0000019,1 L4.0000019,6 12.000002,6 12.000002,1 z M1,1 L1,13.174 2.7160001,15 4.0000019,15 4.0000019,10 12.000002,10 12.000002,15 15,15 15,1 13.000002,1 13.000002,7 3.0000019,7 3.0000019,1 z M0,0 L3.0000019,0 13.000002,0 16,0 16,16 12.000002,16 4.0000019,16 2.2840004,16 0,13.57 z" 
                    Fill="{Binding Foreground, ElementName=button1}" HorizontalAlignment="Center" Stretch="Fill" Width="10" Height="10" VerticalAlignment="Center"/>
        </DataTemplate>
        <DataTemplate x:Key="PrintDataTemplate">
            <Path Data="M5,11 L5,15 8.6761963,15 8.63936,14.971036 C7.6388242,14.144945 7,12.895562 7,11.5 7,11.344937 7.0078866,11.19168 7.0232801,11.040607 L7.0279369,11 z M13.145977,10.145986 L13.853984,10.853022 10.999985,13.706986 9.1459842,11.85303 9.8539908,11.145993 10.999985,12.293035 z M11.5,8 C9.5699999,8 7.9999999,9.5699999 8,11.5 7.9999999,13.43 9.5699999,15 11.5,15 13.43,15 15,13.43 15,11.5 15,9.5699999 13.43,8 11.5,8 z M2,7 L3,7 3,8 2,8 z M1,6 L1,11 4,11 4,10 7.2574663,10 7.2735391,9.954464 C7.9054199,8.2322998 9.5617187,7 11.5,7 12.895562,7 14.144945,7.6388242 14.971036,8.6393602 L15,8.6761966 15,6 12,6 4,6 z M5,1 L5,5 11,5 11,1 z M4,0 L12,0 12,5 16,5 16,11.5 C16,13.981 13.981,16 11.5,16 L4,16 4,12 0,12 0,5 4,5 z" 
                    Fill="{Binding Foreground, ElementName=button1}" HorizontalAlignment="Center" Stretch="Fill" Width="10" Height="10" VerticalAlignment="Center"/>
        </DataTemplate>
    </syncfsuion:ToolBarManager.Resources>
    <syncfusion:ToolBarManager.TopToolBarTray>
        <syncfusion:ToolBarTrayAdv VerticalAlignment="Top"  IsLocked="{Binding IsChecked, ElementName=lockTop}">
                    <syncfusion:ToolBarAdv x:Name="toolBar" ToolBarName="Standard" EnableAddRemoveButton="True">
                <Button
                    x:Name="newFile"
                    Width="22"
                    Height="22"
                    Command="{Binding ButtonCommand}"
                    CommandParameter="{Binding ElementName=newFile}"
                    ToolTip="New" 
                    Content="{StaticResource NewFile}">
                </Button>
                <Button
                    x:Name="openFile"
                    Width="22"
                    Height="22"
                    Command="{Binding ButtonCommand}"
                    CommandParameter="{Binding ElementName=openFile}"
                    ToolTip="Open"
                    Content="{StaticResource OpenFile}">
                </Button>
                <Button
                    x:Name="saveFile"
                    Width="22"
                    Height="22"
                    Command="{Binding ButtonCommand}"
                    CommandParameter="{Binding ElementName=saveFile}"
                    ToolTip="Save"
                    Content="{StaticResource SaveFile}">
                </Button>
                <Button
                    x:Name="saveAllFile"
                    Width="22"
                    Height="22"
                    Command="{Binding ButtonCommand}"
                    CommandParameter="{Binding ElementName=saveAllFile}"
                    ToolTip="SaveAll"
                    Content="{StaticResource SaveAll}">
                </Button>
                <syncfusion:ToolBarItemSeparator />
                <Button
                    x:Name="printFile"
                    Width="22"
                    Height="22"
                    Command="{Binding ButtonCommand}"
                    CommandParameter="{Binding ElementName=printFile}"
                    ToolTip="Print"
                    Content="{StaticResource PrintFile}">
                </Button>
            </syncfusion:ToolBarAdv>
        </syncfusion:ToolBarTrayAdv>
                
    </syncfusion:ToolBarManager.TopToolBarTray>
           
    <syncfusion:ToolBarManager.RightToolBarTray>
        <syncfusion:ToolBarTrayAdv IsLocked="{Binding IsChecked, ElementName=lockRight}">
                   
        </syncfusion:ToolBarTrayAdv>
    </syncfusion:ToolBarManager.RightToolBarTray>
    <syncfusion:ToolBarManager.BottomToolBarTray>
        <syncfusion:ToolBarTrayAdv IsLocked="{Binding IsChecked, ElementName=lockBottom}"/>
    </syncfusion:ToolBarManager.BottomToolBarTray>

</syncfusion:ToolBarManager>

Setting Icon Template

Properties

Properties of ToolBarAdv

Property	Description	Type	Data Type
Band	Gets or sets a value indicating where the ToolBarAdv should be placed in the ToolBarTrayAdv.	Dependency Property	Int
BandIndex	Gets or sets the band index number indicating the position of the ToolBarAdv on the band.	Dependency Property	Int
ToolBarName	Gets or sets the name of the ToolBarAdv.	Dependency Property	String
GripperVisibility	Gets or sets a value indicating whether gripper can be visible.	Dependency Property	Bool
FloatingBarLocation	Gets or sets the location for the floating ToolBarAdv.	Dependency Property	Point
ControlsResourceDictionary	Gets or sets resource dictionary in which ToolBarAdv will look up for Framework element’s styles.	Dependency Property	Resource Dictionary
IsOverflowOpen	Gets or sets a value indicating whether overflow popup is open.	Dependency Property	Bool
ToolBarItemInfoCollection	Gets or sets the items to be displayed in the Add or Remove Buttons popup.	Dependency Property	ObservableCollection
IsOverflowItem	Gets or sets a value indicating whether an item can be displayed in overflow panel.	Attached Property	Bool
OverflowMode	Gets or sets an overflow mode for a specified item.	Attached Property	OverflowMode
Icon	Gets or sets an icon for specified item to be displayed in the Add or Remove Buttons menu.	Attached Property	ImageSource
Label	Gets or sets a label for specified item to be displayed in the Add or Remove Buttons menu.	Attached Property	String
IsAvailable	Gets or sets a value indicating whether a specified item should be hidden.	Attached Property	Boolean

Properties of ToolBarManager

Property	Description	Type	Data Type
IsLocked	Gets or Sets a value indicating whether ToolBarTrayAdv is locked.	Dependency property	bool
Orientation	Gets or Sets the orientation of the ToolBarAdv.	Dependency property	Orientation
ToolBars	Gets or sets toolbars.	Dependency property	ObservableCollection
TopToolBarTray	Gets or sets ToolBarTrayAdv which has to be displayed at the Top of ToolBarManager.	Dependency Property	ToolBarTrayAdv
BottomToolBarTray	Gets or sets ToolBarTrayAdv which has to be displayed at the bottom of ToolBarManager.	Dependency Property	ToolBarTrayAdv
LeftToolBarTray	Gets or sets ToolBarTrayAdv which has to be displayed at the left of ToolBarManager.	Dependency Property	ToolBarTrayAdv
RightToolBarTray	Gets or sets ToolBarTrayAdv which has to be displayed at the right of ToolBarManager.	Dependency Property	ToolBarTrayAdv
CanDockAtTop	Gets or sets a value indicating whether toolbar can be docked at the top.	Dependency Property	bool
CanDockAtBottom	Gets or sets a value indicating whether toolbar can be docked at the bottom.	Dependency Property	bool
CanDockAtLeft	Gets or sets a value indicating whether toolbar can be docked at the left.	Dependency Property	bool
CanDockAtRight	Gets or sets a value indicating whether toolbar can be docked at the right.	Dependency Property	bool
Content	Gets or sets the content of the ToolBarManager.	Dependency Property	UIElement
FloatingToolBarStyle	Gets or sets a style of floating tool bar	Dependency Property	Style
ToolBarState	Gets or sets the state of the toolbar.	Attached Property	ToolBarState	</table> ## Theme ToolBarAdv supports various built-in themes. Refer to the below links to apply themes for the ToolBarAdv, * [Apply theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager) * [Create a custom theme using ThemeStudio](https://help.syncfusion.com/wpf/themes/theme-studio#creating-custom-theme) ![Setting theme to WPF ToolBarAdv](Getting-Started-images/Theme.png)

Getting Started with WPF ToolBar (ToolBarAdv)