Open a listview below button over another view in xamarin forms

Question

I'm working on a Xamarin Forms project where I need to have a drop down list like html drop down as in image.

I have taken a StackLayout for button and Listview (initially hidden) and when clicked on button will change the visibility to true. The list should open above other buttons but when the list get open, all other stackLayout moved below as in image.

I want the list view to be open above other views. The code for the screen is as below. Could any one help what changed do I need to make in the below code.

 <StackLayout Orientation="Vertical">

    <StackLayout Orientation="Horizontal" WidthRequest="400">
         <Label Text="Label 1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> </Label>
         <StackLayout x:Name="addList" WidthRequest="200"  HorizontalOptions="Start">
            <Button Clicked="onBtnClicked" Text="Button 1" WidthRequest="200"></Button>
            <ListView WidthRequest="200" HeightRequest="300" IsVisible="False"></ListView>
         </StackLayout>
   </StackLayout>

    <StackLayout Orientation="Horizontal" WidthRequest="400">
        <Label Text="Label 2" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Label>
        <StackLayout x:Name="addList" WidthRequest="200"  HorizontalOptions="Start">
            <Button Clicked="onBtnClicked" Text="Button 2" WidthRequest="200"></Button>
            <ListView WidthRequest="200" HeightRequest="300" IsVisible="False"></ListView>
        </StackLayout>
    </StackLayout>

   <StackLayout Orientation="Horizontal" WidthRequest="400">
        <Label Text="Label 3" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Label>
        <StackLayout x:Name="addList" WidthRequest="200"  HorizontalOptions="Start">
            <Button Clicked="onBtnClicked" Text="Button 3" WidthRequest="200"></Button>
            <ListView WidthRequest="200" HeightRequest="300" IsVisible="False"></ListView>
        </StackLayout>
    </StackLayout>

</StackLayout>

Edited:

This is my actual XAML

   <StackLayout BackgroundColor="#FFFFFF" Padding="20,20,200,20" Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

    <StackLayout x:Name="PreferencesBodyLayout" Padding="10,10,10,10" Orientation="Vertical">



        <StackLayout x:Name="LanguageLayout" Orientation="Horizontal" HeightRequest="50" HorizontalOptions="FillAndExpand"  >
            <Label Text="Change Language"   Font="Large" TextColor="Black" HorizontalOptions="StartAndExpand" />

            <RelativeLayout x:Name="LanguageSelectionRelativeLayout" HorizontalOptions="EndAndExpand">
                <StackLayout  Padding="2" Spacing="0" BackgroundColor="#EFEFEF" WidthRequest="150"  >
                    <StackLayout x:Name="LanguageDropDown" Padding="0" Spacing="0"  Orientation="Horizontal" BackgroundColor="White"  VerticalOptions="FillAndExpand">
                        <StackLayout HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand" Orientation="Horizontal">
                            <Label x:Name="SelectedLanguageLabel" StyleId="Settings_ChangeLanguage_Label" Margin="5" Text="{Binding SelectedLanguageLabelText}" TextColor="Black" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Font="Medium"/>
                        </StackLayout>
                        <StackLayout  HorizontalOptions="End">
                            <Image Source="ge_arrow_down.png" HeightRequest="20" WidthRequest="20" VerticalOptions="CenterAndExpand" >
                            </Image>
                        </StackLayout>
                    </StackLayout>

                    <ListView x:Name="LanguageList"  IsVisible="{Binding ShowLanguagePopup}"  BackgroundColor="Gray" VerticalOptions = "FillAndExpand"

                          RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
        ElementName=LanguageDropDown, Property=Y,Factor=1,Constant=40}"         
                          RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
        ElementName=LanguageDropDown,Property=X,Factor=1,Constant=0}"      
                          RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView,
        ElementName=LanguageDropDown,Property=Width,Factor=1,Constant=0}"        
                          RelativeLayout.HeightConstraint="{ConstraintExpression
        Type=RelativeToView,
        ElementName=LanguageDropDown,Property=Height,Factor=1,Constant=10}"
        />

                </StackLayout>
            </RelativeLayout>
            <StackLayout.GestureRecognizers>
                <TapGestureRecognizer
                    Command="{Binding ChangeLanguageCommand}" />
            </StackLayout.GestureRecognizers>
        </StackLayout>

        <StackLayout   Orientation="Horizontal" HeightRequest="50">
            <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand"  >
                <Label Text="Label 1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" />
            </StackLayout>
            <Image Source="ArrowButton.png" HeightRequest="15" WidthRequest="15" >
            </Image>
        </StackLayout>

        <StackLayout >
            <BoxView  BackgroundColor="#EFEFEF" HorizontalOptions="FillAndExpand" HeightRequest="1"></BoxView>
        </StackLayout>

        <StackLayout   Orientation="Horizontal" HeightRequest="50">
            <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand"  >
                <Label Text="Label 1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" />
            </StackLayout>
            <Image Source="ArrowButton.png" HeightRequest="15" WidthRequest="15" >
            </Image>
        </StackLayout>

        <StackLayout >
            <BoxView  BackgroundColor="#EFEFEF" HorizontalOptions="FillAndExpand" HeightRequest="1"></BoxView>
        </StackLayout>

        <StackLayout   Orientation="Horizontal" HeightRequest="50">
            <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand"  >
                <Label Text="Label 1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" />
            </StackLayout>
            <Image Source="ArrowButton.png" HeightRequest="15" WidthRequest="15" >
            </Image>
        </StackLayout>

        <StackLayout >
            <BoxView  BackgroundColor="#EFEFEF" HorizontalOptions="FillAndExpand" HeightRequest="1"></BoxView>
        </StackLayout>

        <StackLayout   Orientation="Horizontal" HeightRequest="50">
            <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand"  >
                <Label Text="Label 1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" />
            </StackLayout>
            <Image Source="ArrowButton.png" HeightRequest="15" WidthRequest="15" >
            </Image>
        </StackLayout>

        <StackLayout >
            <BoxView  BackgroundColor="#EFEFEF" HorizontalOptions="FillAndExpand" HeightRequest="1"></BoxView>
        </StackLayout>

    </StackLayout>

</StackLayout>

Alessandro Caliaro Alessandro Caliaro · Accepted Answer · 2017-03-06T10:22:41

I have never used it but I think you can try with a RelativeLayout. This is a little demo: 2 buttons and a ListView. ListView has some Constraints to RedButton. You can try to show / hide it and take a look if Green Button (that has Constraints to RedButton too) does not move

<StackLayout VerticalOptions = "FillAndExpand">

<RelativeLayout>
    <Button BackgroundColor="Red" x:Name="button" Text = "Button"
        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
            Property=Height,Factor=.15,Constant=0}" />
    <Button BackgroundColor="Green" x:Name="buttonGreen" Text = "Button"
        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
            Property=Height,Factor=.15,Constant=100}" />
    <ListView BackgroundColor="Blue" VerticalOptions = "FillAndExpand"
        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
            ElementName=button,Property=Y,Factor=1,Constant=60}"
        RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
            ElementName=button,Property=X,Factor=1,Constant=20}"
        RelativeLayout.WidthConstraint="{ConstraintExpression
            Type=RelativeToParent,Property=Width,Factor=.5,Constant=0}"
        RelativeLayout.HeightConstraint="{ConstraintExpression
            Type=RelativeToParent,Property=Height,Factor=.5,Constant=0}"
            />


</RelativeLayout>
</StackLayout>

Open a listview below button over another view in xamarin forms

1 Answers