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 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: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:

ImageEditor Custom Toolbar

See Also

In this article
Not finding the help you need? Improve this article