We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Custom Toolbar using built in SfImageEditor Buttons

Thread ID:

Created:

Updated:

Platform:

Replies:

149328 Nov 21,2019 10:14 PM UTC Nov 22,2019 12:00 PM UTC Xamarin.Forms 1
loading
Tags: SfImageEditor
Christian
Asked On November 21, 2019 10:14 PM UTC

I'm trying to figure out how to configure the toolbar for the image editor to use the build in toolbar items that are mentioned in the help page.  Is there a specific way that I can choose and add only certain ones? I'm looking to only have reset, flip, rotate, and save in my headertoolbar.

Thanks

Rachel A [Syncfusion]
Replied On November 22, 2019 12:00 PM UTC

Hi Christian, 
 
Greetings from Syncfusion. 
 
Query 1: How to hide toolbar items? 
 
We can hide or show the toolbar items by specifying their icon names and setting the boolean values to true or false in SetToolBarItemsVisibility method. 
 
Refer the below documentation link to know more information to hide/show toolbar items. 
 
 
Query 2: How to add rotate and flip in tool bar items? 
 
We can add the toolbar items for rotate and flip in HeaderToolbar and handled the actions in ToolbarItemSelected by calling Rotate() and Flip() methods of SfImageEditor. Please find the snippet from the below link. 
 
[XAML]: 
… 
<ContentPage.BindingContext> 
    <local:ImageModel/> 
</ContentPage.BindingContext> 
 
<ContentPage.Content> 
    <imageeditor:SfImageEditor x:Name="editor" Source="{Binding Image}"/> 
</ContentPage.Content> 
… 
 
[C#]: 
… 
public ImageEditorGettingStarted() 
{ 
    InitializeComponent(); 
    editor.ToolbarSettings.ToolbarItems.Add( 
        new HeaderToolbarItem 
        { 
            Name = "CustomFlip", 
            Text = "Flip", 
        }); 
 
    editor.ToolbarSettings.ToolbarItems.Add( 
        new HeaderToolbarItem 
        { 
            Name = "CustomRotate", 
            Text = "Rotate", 
        }); 
    editor.ToolbarSettings.ToolbarItemSelected += ToolbarSettings_ToolbarItemSelected; 
} 
 
protected override void OnAppearing() 
{ 
     base.OnAppearing(); 
     editor.SetToolbarItemVisibility("undo, redo,  text,path,  Shape, Transform, effects", false); 
} 
 
private void ToolbarSettings_ToolbarItemSelected(object sender, ToolbarItemSelectedEventArgs e) 
{ 
    string ItemName = e.ToolbarItem.Name; 
 
    if (ItemName == "CustomRotate") 
    { 
        editor.Rotate(); 
    } 
    else if (ItemName == "CustomFlip") 
    { 
        editor.Flip(FlipDirection.Horizontal); 
    } 
} 
… 
 
Output:
  
 
Please find the sample from the below location. 
 
Please refer the below User Guide documentation links for more information about  CustomToolbarItems. 
 
Regards, 
Rachel. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon