title: Open a listview below button over another view in xamarin forms
body: <p>I'm working on a Xamarin Forms project where I need to have a drop down list like html drop down as in image.<a href="https://i.stack.imgur.com/wM3FO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wM3FO.png" alt="enter image description here"></a></p>
  
  <p>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.<a href="https://i.stack.imgur.com/YaKB6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YaKB6.png" alt="enter image description here"></a></p>
  
  <p><strong>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.</strong></p>
  
  <pre><code> &lt;StackLayout Orientation="Vertical"&gt;
  
      &lt;StackLayout Orientation="Horizontal" WidthRequest="400"&gt;
           &lt;Label Text="Label 1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"&gt; &lt;/Label&gt;
           &lt;StackLayout x:Name="addList" WidthRequest="200"  HorizontalOptions="Start"&gt;
              &lt;Button Clicked="onBtnClicked" Text="Button 1" WidthRequest="200"&gt;&lt;/Button&gt;
              &lt;ListView WidthRequest="200" HeightRequest="300" IsVisible="False"&gt;&lt;/ListView&gt;
           &lt;/StackLayout&gt;
     &lt;/StackLayout&gt;
  
      &lt;StackLayout Orientation="Horizontal" WidthRequest="400"&gt;
          &lt;Label Text="Label 2" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"&gt;&lt;/Label&gt;
          &lt;StackLayout x:Name="addList" WidthRequest="200"  HorizontalOptions="Start"&gt;
              &lt;Button Clicked="onBtnClicked" Text="Button 2" WidthRequest="200"&gt;&lt;/Button&gt;
              &lt;ListView WidthRequest="200" HeightRequest="300" IsVisible="False"&gt;&lt;/ListView&gt;
          &lt;/StackLayout&gt;
      &lt;/StackLayout&gt;
  
     &lt;StackLayout Orientation="Horizontal" WidthRequest="400"&gt;
          &lt;Label Text="Label 3" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"&gt;&lt;/Label&gt;
          &lt;StackLayout x:Name="addList" WidthRequest="200"  HorizontalOptions="Start"&gt;
              &lt;Button Clicked="onBtnClicked" Text="Button 3" WidthRequest="200"&gt;&lt;/Button&gt;
              &lt;ListView WidthRequest="200" HeightRequest="300" IsVisible="False"&gt;&lt;/ListView&gt;
          &lt;/StackLayout&gt;
      &lt;/StackLayout&gt;
  
  &lt;/StackLayout&gt;
  </code></pre>
  
  <p>Edited:</p>
  
  <p>This is my actual XAML</p>
  
  <pre><code>   &lt;StackLayout BackgroundColor="#FFFFFF" Padding="20,20,200,20" Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"&gt;
  
      &lt;StackLayout x:Name="PreferencesBodyLayout" Padding="10,10,10,10" Orientation="Vertical"&gt;
  
  
  
          &lt;StackLayout x:Name="LanguageLayout" Orientation="Horizontal" HeightRequest="50" HorizontalOptions="FillAndExpand"  &gt;
              &lt;Label Text="Change Language"   Font="Large" TextColor="Black" HorizontalOptions="StartAndExpand" /&gt;
  
              &lt;RelativeLayout x:Name="LanguageSelectionRelativeLayout" HorizontalOptions="EndAndExpand"&gt;
                  &lt;StackLayout  Padding="2" Spacing="0" BackgroundColor="#EFEFEF" WidthRequest="150"  &gt;
                      &lt;StackLayout x:Name="LanguageDropDown" Padding="0" Spacing="0"  Orientation="Horizontal" BackgroundColor="White"  VerticalOptions="FillAndExpand"&gt;
                          &lt;StackLayout HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand" Orientation="Horizontal"&gt;
                              &lt;Label x:Name="SelectedLanguageLabel" StyleId="Settings_ChangeLanguage_Label" Margin="5" Text="{Binding SelectedLanguageLabelText}" TextColor="Black" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Font="Medium"/&gt;
                          &lt;/StackLayout&gt;
                          &lt;StackLayout  HorizontalOptions="End"&gt;
                              &lt;Image Source="ge_arrow_down.png" HeightRequest="20" WidthRequest="20" VerticalOptions="CenterAndExpand" &gt;
                              &lt;/Image&gt;
                          &lt;/StackLayout&gt;
                      &lt;/StackLayout&gt;
  
                      &lt;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}"
          /&gt;
  
                  &lt;/StackLayout&gt;
              &lt;/RelativeLayout&gt;
              &lt;StackLayout.GestureRecognizers&gt;
                  &lt;TapGestureRecognizer
                      Command="{Binding ChangeLanguageCommand}" /&gt;
              &lt;/StackLayout.GestureRecognizers&gt;
          &lt;/StackLayout&gt;
  
          &lt;StackLayout   Orientation="Horizontal" HeightRequest="50"&gt;
              &lt;StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand"  &gt;
                  &lt;Label Text="Label 1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" /&gt;
              &lt;/StackLayout&gt;
              &lt;Image Source="ArrowButton.png" HeightRequest="15" WidthRequest="15" &gt;
              &lt;/Image&gt;
          &lt;/StackLayout&gt;
  
          &lt;StackLayout &gt;
              &lt;BoxView  BackgroundColor="#EFEFEF" HorizontalOptions="FillAndExpand" HeightRequest="1"&gt;&lt;/BoxView&gt;
          &lt;/StackLayout&gt;
  
          &lt;StackLayout   Orientation="Horizontal" HeightRequest="50"&gt;
              &lt;StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand"  &gt;
                  &lt;Label Text="Label 1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" /&gt;
              &lt;/StackLayout&gt;
              &lt;Image Source="ArrowButton.png" HeightRequest="15" WidthRequest="15" &gt;
              &lt;/Image&gt;
          &lt;/StackLayout&gt;
  
          &lt;StackLayout &gt;
              &lt;BoxView  BackgroundColor="#EFEFEF" HorizontalOptions="FillAndExpand" HeightRequest="1"&gt;&lt;/BoxView&gt;
          &lt;/StackLayout&gt;
  
          &lt;StackLayout   Orientation="Horizontal" HeightRequest="50"&gt;
              &lt;StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand"  &gt;
                  &lt;Label Text="Label 1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" /&gt;
              &lt;/StackLayout&gt;
              &lt;Image Source="ArrowButton.png" HeightRequest="15" WidthRequest="15" &gt;
              &lt;/Image&gt;
          &lt;/StackLayout&gt;
  
          &lt;StackLayout &gt;
              &lt;BoxView  BackgroundColor="#EFEFEF" HorizontalOptions="FillAndExpand" HeightRequest="1"&gt;&lt;/BoxView&gt;
          &lt;/StackLayout&gt;
  
          &lt;StackLayout   Orientation="Horizontal" HeightRequest="50"&gt;
              &lt;StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand"  &gt;
                  &lt;Label Text="Label 1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" /&gt;
              &lt;/StackLayout&gt;
              &lt;Image Source="ArrowButton.png" HeightRequest="15" WidthRequest="15" &gt;
              &lt;/Image&gt;
          &lt;/StackLayout&gt;
  
          &lt;StackLayout &gt;
              &lt;BoxView  BackgroundColor="#EFEFEF" HorizontalOptions="FillAndExpand" HeightRequest="1"&gt;&lt;/BoxView&gt;
          &lt;/StackLayout&gt;
  
      &lt;/StackLayout&gt;
  
  &lt;/StackLayout&gt;
  </code></pre>