2016-06-01 20 views
7

Ist das Konzept des Z-Index? Das Bild zeigt, dass es keine Überlappung gibt. enter image description here Wie setze ich den Z-Index? den oberen zwei benutzerdefinierte AuswahlboxWie überlappen sich Xamarin-Formen?

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

Und alles übrige. Chart, Daten, e.t.c

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

BoxSelector.xaml (Seiten) erstreckt Wiederverwendbare InhaltAlle

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

Ich fürchte, ich verstehe deine Frage nicht. Sie sagen, dass das Bild keine Überlappung zeigt, aber "Überlappung" bedeutet, dass eine Sache über eine andere gezeichnet ist, was das Bild deutlich zeigt. Versuchen Sie, die darunter liegende Ebene zu verbergen? –

+0

Ja, nach dem Klick – bleggleb

+1

Es sieht für mich wie das einzige Stück aus, das Sie verpassen, ist ein undurchsichtiger Hintergrund auf Ihrer obersten Ebene - Elemente wie '' haben keine Hintergrundfarbe und daher standardmäßig auf transparent. Also, welches Element auch immer Ihre "oberste Ebene" ist, braucht nur ein "BacgkroundColor =" # f9f9f9 "', um den gewünschten Effekt zu erzielen. – Joe

Antwort

15

Z-Index durch die Reihenfolge der Child-Elemente in einem Containerelement hergestellt wird. Das erste Kind befindet sich auf der Rückseite des Z-Stapels, das zweite Kind befindet sich darüber und so weiter.

Der Layout-Container, den Sie verwenden, legt fest, wie jedes Kind positioniert wird. A StackLayout lässt keine Überlappungen zu. AbsoluteLayout und RelativeLayout erlauben Überlappungen leicht. A Grid ermöglicht Überlappungen für Elemente, die sich in dieselbe Zeile und Spalte erstrecken. Keiner von diesen hat ein eigenes Aussehen (denken Sie an sie als transparente Boxen standardmäßig). Wenn Sie möchten, dass sie den dahinter liegenden Inhalt verdecken, müssen Sie eine Hintergrundfarbe oder ein Bild zuweisen, ansonsten werden sie direkt über dem anderen Inhalt angezeigt.

+1

Alles in XF? – Shimmy

Verwandte Themen