Come si sovrappongono i moduli Xamarin?

Question

Il concetto di z-index? L'immagine mostra che non c'è sovrapposizione. Come impostare z-index? la seconda casella di selezione personalizzata

<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" /> 

E tutto il resto. Grafico, dati, e.t.c

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

BoxSelector.xaml (vista contenuto), riutilizzabile contentView estende

<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> 

Answer 1

Z-Index è stabilita dalla ordinamento degli elementi bambino in un elemento contenitore. Il primo figlio si trova sul retro dello stack Z, il secondo figlio è posizionato sopra di esso e così via.

Il contenitore di layout in uso determinerà il posizionamento di ogni bambino. A StackLayout non consentirà sovrapposizioni. AbsoluteLayout e RelativeLayout consentiranno facilmente sovrapposizioni. A Grid consentirà la sovrapposizione di elementi che si estendono nella stessa riga e colonna. Nessuno di questi ha un aspetto proprio (pensate a loro come scatole trasparenti di default). Se vuoi che occludano i contenuti dietro di loro, dovrai assegnare un colore o un'immagine di sfondo, altrimenti verranno semplicemente disegnati sopra gli altri contenuti.