Clear all annotations (Text, Shapes, Paths, etc) from Image Editor

18 Dec 20212 minutes to read

By invoking the ClearAnnotations method of SfImageEditor, you can clear all the annotations (Text, Shapes, Path, and CustomView) added in the image editor without resetting the other edits (Rotation, Flip, Crop, Effects, etc).

The following code sample demonstrates this.

XAML

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <imageEditor:SfImageEditor x:Name="ImageEditor"
                               ImageSource="Assets/Buldingimage.jpeg"/>

    <StackPanel Grid.Row="1"
                Orientation="Horizontal">
        <Button x:Name="clearAnnotations"
                Width="500"
                Content="Clear Annotations"
                Click="clearAnnotations_Click" />
    </StackPanel>
</Grid>

C#

public MainPage()
{
    this.InitializeComponent();
    this.ImageEditor.ToolbarSettings.ToolbarItemSelected += this.ToolbarSettings_ToolbarItemSelected;
    this.ImageEditor.ToolbarSettings.ToolbarItems.Add(new FooterToolbarItem()
    {
        Text = "Custom View"
    });
}

private void clearAnnotations_Click(object sender, RoutedEventArgs e)
{
    this.ImageEditor.ClearAnnotations();
}

private void ToolbarSettings_ToolbarItemSelected(object sender, ToolbarItemSelectedEventArgs e)
{
    if (e.ToolbarItem.Text == "Custom View")
    {
        Image customImage = new Image() { Height = 100, Width = 100 };
        customImage.Source = new BitmapImage(new Uri("ms-appx:///Assets/Buldingimage.jpeg"));
        this.ImageEditor.AddCustomView(customImage, new CustomViewSettings());
    }
}