ToolbarCustomization in UWP Image Editor (SfImageEditor)

You can change the default colors of the ColorPalette and visibility of the toolbar.

To customize the ColorPalette

The following code explains to change the colors of the ColorPalette.

<control:SfImageEditor.ColorPalette>

        <SolidColorBrush>Yellow</SolidColorBrush>
        <SolidColorBrush>Pink</SolidColorBrush>
        <SolidColorBrush>Violet</SolidColorBrush>

    </control:SfImageEditor.ColorPalette>
List<SolidColorBrush> CustomColorPalette = new List<SolidColorBrush>()
    {
            new SolidColorBrush(Colors.Yellow),
            new SolidColorBrush(Colors.Pink),
            new SolidColorBrush(Colors.Violet)
    };
     
    imageEditor.ColorPalette = CustomColorPalette;

To Hide/Visible the Toolbar

You can customize the toolbar as shown below,

<control:SfImageEditor.ToolbarSettings>
        <control:ToolbarSettings IsToolbarVisiblity="False"/>
    </control:SfImageEditor.ToolbarSettings>
imageEditor.ToolbarSettings.IsToolbarVisiblity = false;

Toolbar visibility

To Hide/Visible the toolbar Item

You can customize the toolbar items namely, text, path, shapes, transform, rectangle, circle, arrow, flip, crop, rotate, reset, undo, Redo and save as shown below,

  • c#
  • imageEditor.SetToolbarItemVisibility("text, save", false);

    Toolbar item visibility

    To hide or show the delete button

    You can show or hide the delete button, which employed in deleting the selected shapes added in image editor with the help of ShowDeleteButton property in ToolbarSettings.

    Setting false for this property will never show the delete button. On setting true, delete button will get enabled by selecting the shapes.

    <syncfusion:SfImageEditor.ToolbarSettings>
                    <syncfusion:ToolbarSettings ShowDeleteButton="False"></syncfusion:ToolbarSettings>
                </syncfusion:SfImageEditor.ToolbarSettings>
    ToolbarSettings settings = new ToolbarSettings();
                settings.ShowDeleteButton = false;
                editor.ToolbarSettings = settings;

    Delete button

    Toolbar color customization

    Border color of the toolbar can be customized with the help of BorderColor property in ToolbarSettings.

    <syncfusion:SfImageEditor.ToolbarSettings>
                    <syncfusion:ToolbarSettings BorderColor="Red"></syncfusion:ToolbarSettings>
                </syncfusion:SfImageEditor.ToolbarSettings>
    ToolbarSettings settings = new ToolbarSettings();
                settings.BorderColor = new SolidColorBrush(Colors.Red);
                editor.ToolbarSettings = settings;

    Border color