Category / Section
How to re-order the default toolbar items in Xamarin.Forms SfImageEditor
1 min read
This article explains how to re-order the default toolbar items in Syncfusion Xamarin.Forms SfImageEditor control.
Before re-ordering the items, by default it displays as follows.
After re-ordering the items, it will be displayed as follows.
This can be achieved by clearing the default toolbar items in the SfImageEditor control and add the toolbar items based on the index as per your desired order as shown in the following code sample.
[XAML]
Define the SfImageEditor with binding the desired image.
…
<ContentPage.BindingContext>
<local:ViewModel/>
</ContentPage.BindingContext>
<ContentPage.Content>
<Grid Margin="10">
<imageeditor:SfImageEditor Source="{Binding Image}" x:Name="editor" />
</Grid>
</ContentPage.Content>
…
[C#]
Clear the default toolbar items and arrange the toolbar as per your desired order.
…
public MainPage()
{
InitializeComponent();
var toolbarCollection = new ObservableCollection<Syncfusion.SfImageEditor.XForms.ToolbarItem>(editor.ToolbarSettings.ToolbarItems);
editor.ToolbarSettings.ToolbarItems.Clear();
editor.ToolbarSettings.ToolbarItems.Add(toolbarCollection[2]);
editor.ToolbarSettings.ToolbarItems.Add(toolbarCollection[4]);
editor.ToolbarSettings.ToolbarItems.Add(toolbarCollection[0]);
editor.ToolbarSettings.ToolbarItems.Add(toolbarCollection[3]);
editor.ToolbarSettings.ToolbarItems.Add(toolbarCollection[1]);
editor.ToolbarSettings.ToolbarItems.Add(toolbarCollection[8]);
editor.ToolbarSettings.ToolbarItems.Add(toolbarCollection[6]);
editor.ToolbarSettings.ToolbarItems.Add(toolbarCollection[7]);
editor.ToolbarSettings.ToolbarItems.Add(toolbarCollection[5]);
}
…
See also
How to customize the toolbar items in SfImageEditor
How to show or hide the toolbar in SfImageEditor
Did not find the solution
Contact Support
