How to get Absolute Layout and Relative Layout to Autosize to the size of their child element

ParamjitSinghParamjitSingh ✭✭USMember ✭✭

The design requirement is to put a label and a button on the image. The Image is in a DataTemplate of ListView. I want to use Absolute Layout. But it expand way out of the child element (image). So how to make the absolute layout the same size of the image. On the other hand if I use relative layout it also expands out of the child element. But it takes less space than absolute layout. I know Absolute Layout and RelativeLayout are the best for this scenario. But they were leaving lots of empty space between list view items. Please help me out and explain how to use both of these layouts appropriately in order to size them according to their child elements. The code is as follows


<ListView.ItemTemplate>

                     <AbsoluteLayout >

                        <Image Source="BuyersCard.png" > </Image>

                       <Label Text="{Binding Name}" AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds=".1,.2"></Label>

                            <Button Text="Contact" BorderColor="Red" AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds=".7,.2"></Button>

                    </AbsoluteLayout>
                  </ViewCell>       
            </DataTemplate>
        </ListView.ItemTemplate>

    </ListView>

Best Answer

  • ParamjitSinghParamjitSingh ✭✭ US ✭✭
    Accepted Answer

    I eventually decided to look at the .png files themselves and discovered that they have many transparent pixels around! This is causing the image to render with the apparent margins on the top/bottom. See the below screenshot:

    The AbsoluteLayout have Red Background and Image have Aqua Background.After cropping the image of these pixels, this space is significantly reduced. However absolute layout is still for some reason causing extra space at the bottom. I set the HeightRequest of the AbsoluteLayout to 150. Thus the extra space around the image taken by AbsoluteLayout is gone. Now I have this:

Answers

  • LandLuLandLu Xamurai Member, Xamarin Team Xamurai

    Add HasUnevenRows="True" to your list view:

    <ListView x:Name="MyListView" HasUnevenRows="True">
    ...
    </ListView>
    
  • ParamjitSinghParamjitSingh ✭✭ USMember ✭✭

    All ready done.

  • LandLuLandLu Xamurai Member, Xamarin Team Xamurai

    @ParamjitSingh Then the cell will have the same height as the primitive image, is this what you want?

  • ParamjitSinghParamjitSingh ✭✭ USMember ✭✭

    Yes I want the each cell to have the same height as image. But there is large gap between each cell.

  • ParamjitSinghParamjitSingh ✭✭ USMember ✭✭

    I am expecting each item in list view to take the size of the image.

  • LandLuLandLu Xamurai Member, Xamarin Team Xamurai

    I can't reproduce the gap between cells as you said above. Can you share a sample?

  • ParamjitSinghParamjitSingh ✭✭ USMember ✭✭


    The top item is selected. See the gap between each item. The whole gray area is selected when i tap on the listview item. I want just the space of 10pixel in between each item

  • ParamjitSinghParamjitSingh ✭✭ USMember ✭✭
    Accepted Answer

    I eventually decided to look at the .png files themselves and discovered that they have many transparent pixels around! This is causing the image to render with the apparent margins on the top/bottom. See the below screenshot:

    The AbsoluteLayout have Red Background and Image have Aqua Background.After cropping the image of these pixels, this space is significantly reduced. However absolute layout is still for some reason causing extra space at the bottom. I set the HeightRequest of the AbsoluteLayout to 150. Thus the extra space around the image taken by AbsoluteLayout is gone. Now I have this:

Sign In or Register to comment.