How do overlap in Xamarin forms?

Does the concept of z-index? The picture shows that there is no overlap. enter image description here 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>

Best Answer

Answers

  • ZaryabRajputZaryabRajput PKMember ✭✭

    Are RaiseChild and LowerChild methods work in ios case?
    I am implementing these methods in Xamarin.forms but not work on windows then what should i do is there any way to achieve their functionalities.

  • JohnHardmanJohnHardman GBUniversity mod

    @GlebPatcia - Can you explain what effect you want to achieve?

  • QuantumPowerQuantumPower Member
    edited January 31

    The easiest way to overlap is this one. This is a login example:

    <StackLayout x:Name="mainLayout" HorizontalOptions="Center">
        <Label x:Name="loginDescription" TextColor="Black" FontSize="Large" HorizontalTextAlignment="Center"/>
        <Entry x:Name="username" HorizontalTextAlignment="Center"/>
        <Entry x:Name="password" IsPassword="True" HorizontalTextAlignment="Center"/>
        <AbsoluteLayout x:Name="RaiseLayout">
            <ImageButton BackgroundColor = "Transparent" AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds=".5,.5,-1,-1"/>
            <Label x:Name="buttonDescription" AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds=".5,.5,-1,-1"/>
        </AbsoluteLayout>
    </StackLayout>
    

    Now in C# you do the following:
    RaiseLayout.RaiseChild(buttonDescription);

    Now the Label is above your Button.

  • seanydaseanyda GBMember ✭✭✭✭✭

    @QuantumPower said:
    The easiest way to overlap is this one. This is a login example:

    <StackLayout x:Name="mainLayout" HorizontalOptions="Center">
      <Label x:Name="loginDescription" TextColor="Black" FontSize="Large" HorizontalTextAlignment="Center"/>
        <Entry x:Name="username" HorizontalTextAlignment="Center"/>
        <Entry x:Name="password" IsPassword="True" HorizontalTextAlignment="Center"/>
        <AbsoluteLayout x:Name="RaiseLayout">
            <ImageButton BackgroundColor = "Transparent" AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds=".5,.5,-1,-1"/>
            <Label x:Name="buttonDescription" AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds=".5,.5,-1,-1"/>
        </AbsoluteLayout>
    </StackLayout>
    

    Now in C# you do the following:
    RaiseLayout.RaiseChild(buttonDescription);

    Now the Label is above your Button.

    Not really. If you create a Grid and define each RowDefinition and ColumnDefinition you can layer each view on top of each other in the Grid.

Sign In or Register to comment.