ImageEditor Custom Toolbar

The RadImageEditor Toolbar can be fully customized. You could populate the toolbar with the ToolbarItems needed for editing the image.

Toolbar Items

When you customize the toolbar you could include the following editing capabilities:

• For Image Transformations you could use the Toolbar Items listed above:
  • CropToolbarItem
  • ResizeToolbarItem
  • RotateLeftToolbarItem
  • RotateRightToolbarItem
  • FlipHorizontalToolbarItem
  • FlipVerticalToolbarItem

To group the transformations you could use the common ToolbarItem: TransformsToolbarItem. For more details please check the Image Transformations article.

• For applying Effects to the image use the following Toolbar Items:
  • HueToolbarItem
  • SaturationToolbarItem
  • BrightnessToolbarItem
  • ContrastToolbarItem
  • BlurToolbarItem
  • SharpenToolbarItem

To group the effects you could use the common ToolbarItem: EffectsToolbarItem. For more details please check the Effects article.

• For reversing and re-applying actions use the following items:
  • UndoToolbarItem
  • RedoToolbarItem
  • ResetToolbarItem

For more details please check the History article.

• For navigating back to the different levels/toolbar items use the BackToolbarITem.

  • When ImageEditroToolbar.IsMultiLine is False - nested levels of toolbar items are displayed on a single line in the toolbar. If you customize the toolbar item the option to navigate back to the different levels is using the BackToolbarItem.

• For applying Commands use the CommandToolbarItem which allows executing an arbitrary user-defined command from the toolbar. It exposes the following properties:

  • Command(ICommand): Specifies the command to execute.
  • CommandParameter(object): Specifies a parameter to be passed to the command upon execution.

Example

Here is an example how to customize the RadImageEditor Toolbar

Use the following snippet to define the RadImageEditor and RadImageEditor Toolbar:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <telerikImageEditor:RadImageEditor x:Name="imageEditor">
        <telerikImageEditor:RadImageEditor.Source>
            <OnPlatform x:TypeArguments="ImageSource" Default="cat4.jpeg">
                <On Platform="UWP">Assets\cat4.jpeg</On>
            </OnPlatform>
        </telerikImageEditor:RadImageEditor.Source>
    </telerikImageEditor:RadImageEditor>
    <telerikImageEditor:RadImageEditorToolbar Grid.Row="1" ImageEditor="{x:Reference imageEditor}" AutoGenerateItems="False">
        <telerikImageEditor:EffectsToolbarItem AutoGenerateItems="False">
            <telerikImageEditor:BackToolbarItem/>
            <telerikImageEditor:ContrastToolbarItem AutoGenerateItems="False">
                <telerikImageEditor:CancelToolbarItem HorizontalOptions="Start" />
                <telerikImageEditor:TemplateToolbarItem>
                    <telerikImageEditor:TemplateToolbarItem.Template>
                        <DataTemplate>
                            <Slider Maximum="2" Minimum="0" Value="{Binding Value}" />
                        </DataTemplate>
                    </telerikImageEditor:TemplateToolbarItem.Template>
                </telerikImageEditor:TemplateToolbarItem>
                <telerikImageEditor:ApplyToolbarItem HorizontalOptions="End" />
            </telerikImageEditor:ContrastToolbarItem>
        </telerikImageEditor:EffectsToolbarItem>
        <telerikImageEditor:CropToolbarItem/>
        <telerikImageEditor:RotateLeftToolbarItem/>
        <telerikImageEditor:RotateRightToolbarItem/>
        <telerikImageEditor:UndoToolbarItem/>
        <telerikImageEditor:RedoToolbarItem/>
    </telerikImageEditor:RadImageEditorToolbar>
</Grid>

In addition to this, you need to add the following namespace:

xmlns:telerikImageEditor="clr-namespace:Telerik.XamarinForms.ImageEditor;assembly=Telerik.XamarinForms.ImageEditor"

This is the result:

See Also

• Image Transformations
• Effects
• History
• ToolbarItems Styling