Xamarin Elements z-index

Question

Hi!

I have this code:

<?xml version="1.0" encoding="UTF-8" ?>  
<ContentPage  
    x:Class="Components.TestPage"  
    xmlns="http://xamarin.com/schemas/2014/forms"  
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">  
    <StackLayout  
        HorizontalOptions="Center"  
        Orientation="Horizontal"  
        Spacing="0">  
  
        <BoxView  
            Margin="-5,0"  
            CornerRadius="50"  
            HeightRequest="100"  
            VerticalOptions="Start"  
            WidthRequest="100"  
            Color="Red" />  
  
        <BoxView  
            Margin="-5,0"  
            CornerRadius="50"  
            HeightRequest="100"  
            VerticalOptions="Start"  
            WidthRequest="100"  
            Color="Green" />  
  
        <BoxView  
            Margin="-5,0"  
            CornerRadius="50"  
            HeightRequest="100"  
            VerticalOptions="Start"  
            WidthRequest="100"  
            Color="Blue" />  
  
    </StackLayout>  
</ContentPage>  

With that code i get this

What i want is to get the green circle to the front, so the green one is gonna cover the blue one and the red one. But i don't to change the position i just want to get the green one to the front, like how set it a greater z-index than red and blue

Answer 1

Hello,​

Please do not use <StackLayout> to achieve covered result. <StackLayout> cannot bring the green circle to the front, you can use <RelativeLayout> to achieve this result.

Firstly, I notice you set Margin="-5,0", you want to move left 5 pix to achieve covered result, I put the Red BoxView to (0,0) postion, then set Blue BoxView (0,190) postion(Move 190 to the right relative to the x-axis of the redbox). If you want to use green BoxView to the top layer, you need to set it in the end(Move 95 to the right relative to the x-axis of the redbox),

   <RelativeLayout>  
               <BoxView  
                   x:Name="redBox"  
                    CornerRadius="50"  
                    HeightRequest="100"  
                    VerticalOptions="Start"  
                    WidthRequest="100"  
                    Color="Red"   
                    RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}"  
                    RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}" />  
          
               <BoxView     
                    CornerRadius="50"  
                    HeightRequest="100"  
                    VerticalOptions="Start"  
                    WidthRequest="100"  
                    Color="Blue"  
                    RelativeLayout.XConstraint="{ConstraintExpression  Type=RelativeToView, ElementName=redBox,Property=X,  Constant=190}"  
                    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=redBox,Property=Y}" />  
               <BoxView   
                     Color="Green"  
                    HeightRequest="100"  
                    CornerRadius="50"  
                    VerticalOptions="Start"  
                    WidthRequest="100"  
                    RelativeLayout.XConstraint="{ConstraintExpression  Type=RelativeToView, ElementName=redBox,Property=X,  Constant=95}"  
                    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=redBox,Property=Y}" />  
           </RelativeLayout>  

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.