Forum Xamarin.Forms

Have a control stick out from its container?

ShimmyWeitzhandlerShimmyWeitzhandler USMember ✭✭✭
edited May 2017 in Xamarin.Forms


I'm making an AutoCompleteBox, and I'm stacking a SearchBar, and ListView on on the other.
I have two questions:
1) How do I shrink the ListView's height to expand only what's necessary for its items to display, but no more than a certain size?
2) I want the view's size to be as the size of the SearchBar, but I want it to stick out from the bottom and cover the elements coming afterwards. I think I want to use either RelativeLayout or AbsoluteLayout.

I looked at the examples of AbsoluteLayout, but all of them is in a case where the layout takes up the whole screen.
In this image (from the example), the layout (red border) is sized according the SearchBar, and the ListView (orange) has its width set to the SearchBar, but sticks outside downwards covering elements behind it.

Here's my experiment:

_Container = (AbsoluteLayout)_Container;
_ListView.HeightRequest = 150; //shouldn't exceed, am I wrong? How to set max height?
_ListView.VerticalOptions = LayoutOptions.Start;

_Container.VerticalOptions = LayoutOptions.Start;

AbsoluteLayout.SetLayoutFlags(SearchBar, AbsoluteLayoutFlags.PositionProportional);
AbsoluteLayout.SetLayoutBounds(SearchBar, new Rectangle(.5, 1, SearchBar.Height, SearchBar.Width));

AbsoluteLayout.SetLayoutFlags(_ListView, AbsoluteLayoutFlags.WidthProportional);
AbsoluteLayout.SetLayoutBounds(_ListView, new Rectangle(0, 0, SearchBar.Width, _ListView.Height));

Is a RelativeLayout a better solution?


  • VarunBabuSVarunBabuS INMember ✭✭✭

    hi @ShimmyWeitzhandler With regard to AutoComplete textbox ,Please have a look at It is very nice , We are using same in our customer project

  • ShimmyWeitzhandlerShimmyWeitzhandler USMember ✭✭✭
    edited May 2017

    Thanks for your response, but I found no RelativeLayout/AbsoluteLayout in there, nor are there any samples/screenshots.
    Does the ListView stick out and covers the elements behind it?
    My AutoCompleteView, displays the same way, I want to change it to overlap.

  • VarunBabuSVarunBabuS INMember ✭✭✭

    hi @ShimmyWeitzhandler the list view's item template associated with autocomplete text box color can be made transparent which can help you to show the elements behind and also with bit customization we can add the clear button to text box and when clicked we can clear the list view associated with autocomplete text box

  • ShimmyWeitzhandlerShimmyWeitzhandler USMember ✭✭✭

    But as long as the ListView is inside a StackPanel it pushes all the controls downwards to make available space. It won't help making it transparent.

Sign In or Register to comment.