Làm thế nào để chồng lên nhau trong các hình thức Xamarin?

Question

Khái niệm chỉ số z? Hình ảnh cho thấy không có chồng chéo. Cách đặt chỉ mục z? hai hộp chọn tùy chỉnh hàng đầu

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

Và mọi thứ còn lại. Biểu đồ, dữ liệu, e.t.c

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

BoxSelector.xaml (nội dung xem), Reusable contentView mở rộng

<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 được thành lập bởi thứ tự của các yếu tố trẻ em trong một phần tử chứa. Đứa trẻ đầu tiên nằm ở phía sau ngăn xếp Z, đứa thứ hai được đặt phía trên nó, và cứ thế.

Thùng chứa bố cục bạn đang sử dụng sẽ ra lệnh cho mỗi đứa trẻ được định vị như thế nào. A StackLayout sẽ không cho phép chồng chéo. AbsoluteLayout và RelativeLayout sẽ cho phép chồng chéo dễ dàng. Một Grid sẽ cho phép chồng lên nhau cho các phần tử mở rộng vào cùng hàng và cột. Không ai trong số này có một sự xuất hiện của riêng mình (nghĩ về chúng như hộp trong suốt theo mặc định). Nếu bạn muốn họ để che giấu nội dung đằng sau họ, sau đó bạn sẽ cần phải chỉ định một màu nền hoặc hình ảnh, nếu không họ sẽ chỉ được vẽ ngay trên đầu trang của các nội dung khác.