Z-Ordering in .NET MAUI Image Editor (SfImageEditor)

7 Jan 20254 minutes to read

The image editor control allows to change the position of annotations that are arranged over the editor. This can be achieved using the following methods:

  1. BringToFront
  2. SendToBack
  3. BringForward
  4. SendBackward

BringToFront

The BringToFront method is used to bring the selected annotation to the front of all the annotations over an image.

<Grid RowDefinitions="0.9*, 0.1*">
        <imageEditor:SfImageEditor x:Name="imageEditor"
                                   Source="image.jpeg" />
        <Button Grid.Row="1"
                Text = "BringToFront"  
                Clicked="OnBringToFrontClicked" />
    </Grid>
private void OnBringToFrontClicked(object sender, EventArgs e)
   {
      this.imageEditor.BringToFront();
   }

SendToBack

The SendToBack method is used to send the selected annotation to the back of all the annotations.

<Grid RowDefinitions="0.9*, 0.1*">
        <imageEditor:SfImageEditor x:Name="imageEditor"
                                   Source="image.jpeg" />
        <Button Grid.Row="1"
                Text = "SendToBack"  
                Clicked="OnSendToBackClicked" />
    </Grid>
private void OnSendToBackClicked(object sender, EventArgs e)
   {
      this.imageEditor.SendToBack();
   }

BringForward

The BringForward method is used to bring the selected annotation to one step forward over the image.

<Grid RowDefinitions="0.9*, 0.1*">
        <imageEditor:SfImageEditor x:Name="imageEditor"
                                   Source="image.jpeg" />
        <Button Grid.Row="1"
                Text = "BringForward"  
                Clicked="OnBringForwardClicked" />
    </Grid>
private void OnBringForwardClicked(object sender, EventArgs e)
   {
      this.imageEditor.BringForward();
   }

SendBackward

The SendBackward method is used to send the selected annotation one step backward over an image.

<Grid RowDefinitions="0.9*, 0.1*">
        <imageEditor:SfImageEditor x:Name="imageEditor"
                                   Source="image.jpeg" />
        <Button Grid.Row="1"
                Text = "SendBackward"  
                Clicked="OnSendBackwardClicked" />
    </Grid>
private void OnSendBackwardClicked(object sender, EventArgs e)
   {
      this.imageEditor.SendBackward();
   }

Z-Ordering in .NET MAUI Image Editor.