Undo Redo in .NET MAUI Image Editor (SfImageEditor)

14 Nov 20232 minutes to read

One of the important features of the image editor control is to perform the Undo and Redo to revert the edited changes.

Undo

The Undo method is used to revert the changes done previously over an image.

MainPage.xaml

<Grid RowDefinitions="0.9*, 0.1*">
        <imageEditor:SfImageEditor x:Name="imageEditor"
                                   Source="image.jpeg" />
        <Button Grid.Row="1"
                Text="Save"
                Clicked="OnUndoClicked" />
    </Grid>

MainPage.xaml.cs

private void OnUndoClicked(object sender, EventArgs e)
    {
        this.imageEditor.Undo();
    }

Redo

The Redo method is used to redo the changes that are reverted by undo operation.

MainPage.xaml

<Grid RowDefinitions="0.9*, 0.1*">
        <imageEditor:SfImageEditor x:Name="imageEditor"
                                   Source="image.jpeg" />
        <Button Grid.Row="1"
                Text="Save"
                Clicked="OnRedoClicked" />
    </Grid>

MainPage.xaml.cs

private void OnRedoClicked(object sender, EventArgs e)
    {
        this.imageEditor.Redo();
    }

NOTE

Performing any new action after using the Undo function will clear the Redo history. This means that if you’ve undone several actions and then start adding something new, you won’t be able to use Redo to bring back the actions you previously undid.