ImageEditor Toolbar

The RadImageEditor control comes with various editing capabilities and with the help of the ImageEditorToolbar you can provide to the users easy and quick way to edit their images. The default toolbar include items for all the available image editing options, alternatively you could customize the shown editing options according to your needs.

By default the RadImageEditorToolbar Items are auto-populated. You could change this by setting the RadImageEditorToolbar boolean AutoGenerateItems to False. In this case you will need to manually define the available editing options, for more details check Custom Toolbar article.

In order to attach the ImageEditor control to the RadImageEditorToolbar control you need to set the ImageEditor(from type RadImageEditor) property. All toolbar items execute their actions against the specified image editor.

When the ImageEditorToolbarItems can not be fitted in the device screen, OverflowButton is shown in the toolbar. You could customize it through the following properties:

  • OverflowButtonText(String): Specifies the text of the overflow button.
  • OverflowButtonTextColor(Color): Specifies the text color of the overflow button, which is displayed when there are more buttons than currently visible.
  • OverflowButtonFontFamily(String): Specifies the font family of the overflow button, which is displayed when there are more buttons than currently visible.
  • OverflowButtonTemplate(DataTemplate): Specifies the template of the overflow button, which is displayed when there are more buttons than currently visible.

Example

Here is an example how to use the default RadImageEditor Toolbar and its properties:

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}" />
</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 Toolbar

See Also

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