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

21 Mar 20244 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.