Toolbar Customization

3 Sep 20205 minutes to read



Toolbar can be made visible or hidden using the IsToolbarVisiblity property in the ToolbarSettings.

        <editor:ToolbarSettings IsToolbarVisiblity="True" />
editor.ToolbarSettings.IsToolbarVisibility = true;

Add a item

You can add additional items to the toolbar and can perform your own operation. To add an additional item, specify the toolbar item, and add it in the ToolbarItems collection as demonstrated in following code snippet. You can specify your own template using the IconTemplate property in ToolbarItem.

            <DataTemplate x:Key="template">
                <TextBlock Text="New Item"></TextBlock>
editor.ToolbarSettings.ToolbarItems.Add(new ToolbarItem() { IconTemplate = grid.Resources["template"] as DataTemplate });


You can change the Background and BorderColor of the toolbar. Also, you can change the height of the main toolbar using the HeaderToolbarHeight property, and the height of the sub toolbar can be changed using the SubItemToolbarHeight property, and the footer toolbar height can be changed using the FooterToolbarHeight.

This can be done as in the following code snippet.

                <editor:ToolbarSettings IsToolbarVisibility="True" HeaderToolbarHeight="36" 
                                        FooterToolbarHeight="36"  Background="#DEDEDE" BorderColor="Black"
editor.ToolbarSettings.Background= (SolidColorBrush)new BrushConverter().ConvertFromString("#DEDEDE");
            editor.ToolbarSettings.BorderColor = new SolidColorBrush(Colors.Black);
            editor.ToolbarSettings.HeaderToolbarHeight = 36;
            editor.ToolbarSettings.FooterToolbarHeight = 36;
            editor.ToolbarSettings.IsToolbarVisibility = true;

Custom Item



This event occurs when an item in the toolbar is selected. ToolbarItemSelectedEventArgs is the parameter. You can control the selected item operation by setting the Cancel property to true. You can also get the information about the ToolbarItem.

private void ToolbarSettings_ToolbarItemSelected(object sender, ToolbarItemSelectedEventArgs e)
           e.Cancel = true;

Custom Item

Image picker support

You can browse images in a local folder and load them in the Image Editor using the toolbar item browse icon.

Image picker support in WPF


Invoke commands from the custom toolbar to customize toolbar items of the image editor. Must set the CommandTarget while using the Command.




Browses the local folder to pick and load the image to an image editor.


Saves the edited image.


Reverses the last performed action.


Restores the actions carried out by Undo.


Clears all the editing done on the image and brings to an initial state.


Resets the zooming applied to the image.


Zoom In the image by increasing the zoom level from its current state.


Zoom Out the image by decreasing the zoom level from its current state.


Used to select the items such as Shapes, Text, Custom view added on the image.


Used to Pan the image when it is in zoomed state.

This can be done as in the below code snippet.

            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="200"/>
        <editor:SfImageEditor Grid.Column="0" x:Name="imageEditor" ImageSource="Assets\RoadView.jpeg">
                <editor:ToolbarSettings IsToolbarVisiblity="False"></editor:ToolbarSettings>
          <Button  Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" Background="White"
                    Width="Auto" CommandTarget="{Binding ElementName=imageEditor}"
                    Content="Save" Command="{x:Static editor:ImageEditorCommands.Save}"></Button>

Custom Item