How do overlap in Xamarin forms?

Question

Does the concept of z-index? The picture shows that there is no overlap. How to set z-index? the top two custom select box

<AbsoluteLayout Padding="10,10,10,10" VerticalOptions="FillAndExpand">

    <ui:BoxSelector x:Name="selectorExchangs"
                    AbsoluteLayout.LayoutBounds="0,0,0.5,0.3"
                    AbsoluteLayout.LayoutFlags="All"
                    BackgroundColor="Transparent"
                    CommandAfterChanged="{Binding ExchangesAfterChangedCommand}"
                    Items="{Binding ExchangesList}"
                    LabelPath="Name"
                    PanelColor="#f9f9f9"
                    SelectedItem="{Binding SelectedExchange}"
                    SelectorLabel="EXCHANGE" />

    <ui:BoxSelector AbsoluteLayout.LayoutBounds="1,0,0.5,0.3"
                    AbsoluteLayout.LayoutFlags="All"
                    BackgroundColor="Transparent"
                    CommandAfterChanged="{Binding TradingPairAfterChangedCommand}"
                    Items="{Binding AvailableTradinPairsList}"
                    LabelPath="PriceCurrencyName"
                    PanelColor="#f9f9f9"
                    SelectedItem="{Binding SelectedTraingPair}"
                    SelectorLabel="CURRENCY" />

And all the rest. Chart, data, e.t.c

    <StackLayout AbsoluteLayout.LayoutBounds="1,1,1,0.9" AbsoluteLayout.LayoutFlags="All">...</StackLayout>

BoxSelector.xaml(content view), Reusable ContentView extends

<ContentView.Resources>
    <ResourceDictionary x:Name="AppDictionary">
        <Color x:Key="BackgroundColor">#f9f9f9</Color>
        <Color x:Key="BorderColor">#e2e2e2</Color>
        <Style x:Key="InternalViewStyle" TargetType="ContentView">
            <Setter Property="BackgroundColor" Value="{StaticResource BackgroundColor}" />
            <Setter Property="VerticalOptions" Value="Fill" />
            <Setter Property="Padding" Value="5,5,5,5" />
        </Style>
        <Style x:Key="BorderStyle" TargetType="ContentView">
            <Setter Property="BackgroundColor" Value="{StaticResource BorderColor}" />
            <Setter Property="Padding" Value="1,1,1,1" />
        </Style>
    </ResourceDictionary>
</ContentView.Resources>

<StackLayout BindingContext="{x:Reference Name=ContentView}" HorizontalOptions="FillAndExpand">
    <ContentView BackgroundColor="#f5f5f5" HorizontalOptions="FillAndExpand">
        <StackLayout>
            <ContentView Style="{StaticResource BorderStyle}">
                <ContentView Style="{StaticResource InternalViewStyle}">
                    <StackLayout Orientation="Horizontal">
                        <StackLayout x:Name="selectorBox"
                                     BackgroundColor="{Binding PanelColor}"
                                     HorizontalOptions="FillAndExpand"
                                     Orientation="Horizontal">
                            <StackLayout HorizontalOptions="StartAndExpand" Orientation="Horizontal">
                                <Label FontSize="12"
                                       HorizontalOptions="FillAndExpand"
                                       Text="{Binding SelectorLabel}"
                                       TextColor="#cccccc" />
                                <Label x:Name="valueLabe"
                                       BackgroundColor="{Binding PanelColor}"
                                       FontSize="13"
                                       HorizontalOptions="FillAndExpand"
                                       Text="Choose"
                                       TextColor="#313131" />
                            </StackLayout>
                            <StackLayout HorizontalOptions="EndAndExpand">
                                <Label Text="+" TextColor="#313131" />
                            </StackLayout>
                        </StackLayout>
                    </StackLayout>
                </ContentView>
            </ContentView>

            <Grid x:Name="boxSelectorGrid"
                  BackgroundColor="#f5f5f5"
                  Padding="10,10,10,10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
            </Grid>

        </StackLayout>
    </ContentView>
</StackLayout>

I'm afraid I don't understand your question. You say that the picture shows no overlap, but "overlap" means that one thing is drawn over another, which the picture clearly shows. Are you trying to hide the underlying layer? — Andy Hopper, Jun 01 '16 at 14:36
It looks to me like the only piece you are missing is a opaque background on your top layer - elements like `` do not have a background color set and therefore default to transparent. So whatever element is your "top layer", only needs a `BacgkroundColor="#f9f9f9"` to achieve the effect you want. — Joe, Jun 01 '16 at 16:00

score 46 · Accepted Answer · answered Jun 01 '16 at 22:23

46

Z-Index is established by the ordering of the Child elements in a container element. The first child is at the back of the Z stack, the second child is placed above it, and so on.

The layout container you are using will dictate how each child is positioned. A StackLayout will not allow overlaps. AbsoluteLayout and RelativeLayout will allow overlaps easily. A Grid will allow overlap for elements that extend into the same row and column. None of these have an appearance of their own (think of them as transparent boxes by default). If you want them to occlude the content behind them, then you will need to assign a background color or image, else they will just be painted right on top of the other content.

answered Jun 01 '16 at 22:23

Keith Rome

3,208
19
15

1

Anything in XF? – Shimmy Weitzhandler Jul 27 '17 at 00:35
6

Some details about changing z-order: To bring a child element to the front, search for *event binding*. In XAML, bind the `Focused` event to a C# method. In that method, call [Layout.RaiseChild(theChildElement)](https://learn.microsoft.com/en-us/dotnet/api/Xamarin.Forms.Layout.RaiseChild?view=xamarin-forms). Sorry, I don't know the exact details, but those concepts should help you get started. – ToolmakerSteve May 14 '18 at 15:51
But say that I am developing a custom control that needs to be displayed on top. Will the ones using it have to restructure their page layout to use `AbsoluteLayout`, `RelativeLayout`, `Grid` for it to display on top. – lolelo Jun 10 '19 at 13:41
@ToolmakerSteve I was looking for this solution but it dosent help I added Label to the Stacklayour or Absolute the result are the same. Then i added a Frame. If i do like this the Lable will apear in the background., But it i put it after the lable will be in front but so hard to handel so its nerly impossiable becound the text i the frame is dynamic and i cant put the margin with - so the lable hit the borderline. How do i put the lable first and then the frame and still have the lable in fornt. I ahve tryed RaiseChild with no sucess – Jonas Mar 13 '21 at 19:29
1

@Jonas - Im not clear what you mean. please start a new question and describe in more detail. Put link to that question here, with @ toolmakersteve so I get notified. – ToolmakerSteve Mar 13 '21 at 21:59
@ToolmakerSteve https://stackoverflow.com/questions/66590601/what-to-use-when-i-need-a-box-with-a-border-and-some-different-text-with-differe – Jonas Mar 15 '21 at 10:21

How do overlap in Xamarin forms?

1 Answers1

Linked