Ordering elements with ZIndex in .NET MAUI

Preview 12 of .NET MAUI introduced the ZIndex property on all elements that inherits from the IView interface. That means you can practically order all view elements on the Z-axis as you want. This is useful if you want to f.ex. have a background image and have text on top of that.

If you wanted to achieve this in Xamarin.Forms you would have to use a Grid and add elements to the same row or column. The order of your XAML would dictate the order of your elements, with the last element being the one painted on top. With ZIndex you can arrange the elements as you like!

This can be done with both the Grid-layout and the AbsoluteLayout. Let’s see first how we can do it using a Grid.

ZIndex with Grid

In the following example I’m creating a background image, an image on top of that and a label on top of that again. Using the ZIndex I can set the order with the highest number being the one drawn at the very top:

That would look like this:

ZIndex with AbsoluteLayout

If you like to use AbsoluteLayout, you can achieve the same with this. Here is an example with an image and a label that I want to show behind the image. If you don’t care about the order of your elements other than that you want one specific element to be in the background, you can put the ZIndex to -1. See the example below:

The result:

You can read more about the ZIndex at the link provided at the top and the details of the .NET MAUI Preview 12 here. I’ve also provided a sample on GitHub with both these types of layouts. Check it out and let me know if there are other layouts you know this could be useful with!