StackLayout ignoring EndAndExpand on iOS

Question

It seems that there is a confirmed Bug in Xamarin.Forms in iOS, when you have a content/label with a text too large that needs 2 lines to display it in a StackLayout (lets say layoutA), the others siblings and parent elements takes the width of the layoutA.

Kent Boogaart filled a Bug with the following example to reproduce the error.

<StackLayout Margin="0,20,0,0">
    <!-- works (by virtue of no wrapping) -->
    <StackLayout Orientation="Horizontal">
        <Switch/>
        <Label Text="Some text"/>
        <Button Text="A Button" HorizontalOptions="EndAndExpand"/>
    </StackLayout>

    <!-- works (by virtue of no switch) -->
    <StackLayout Orientation="Horizontal">
        <Label Text="Some longer text that wraps over two lines"/>
        <Button Text="A Button" HorizontalOptions="EndAndExpand"/>
    </StackLayout>

    <!-- does not work -->
    <StackLayout Orientation="Horizontal">
        <Switch/>
        <Label Text="Some longer text that wraps over two lines"/>
        <Button Text="A Button" HorizontalOptions="EndAndExpand"/>
    </StackLayout>
</StackLayout>

Is there a solution/fix/workaround for this problem?

EDIT

Here is the code used:

<ListView HasUnevenRows="True" SeparatorVisibility="None" HorizontalOptions="StartAndExpand" CachingStrategy="RecycleElement">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="#eee" Padding="5" Margin="5" >
                    <ffimageloading:CachedImage HorizontalOptions="Start" VerticalOptions="Start" HeightRequest="75" Source="{Binding ID, StringFormat='https://example/api/{0}'}" CacheDuration="15">
                        <ffimageloading:CachedImage.Transformations>
                            <fftransformations:CircleTransformation/>
                        </ffimageloading:CachedImage.Transformations>
                    </ffimageloading:CachedImage>
                    <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
                        <Label Text="{Binding Name}" TextColor="#f35e20" HorizontalOptions="FillAndExpand"/>
                        <Label Text="{Binding Description}" HorizontalOptions="FillAndExpand" TextColor="#503026" />
                        <Label Text="{Binding ID}" x:Name="ID" IsVisible="False"></Label>
                        <Button Text="Ver productos" TextColor="#FF5F6D" HorizontalOptions="End" BackgroundColor="Transparent"></Button>
                    </StackLayout>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

These are actual screenshots of the app in iOS, in Android it just work great.

As you can see, in the Image1 the first card is OK, the button ("Agregar al carrito" or "Ver Productos") is at the end.

But in the second card as the text is too large, the button gets down out of the card.

And in the second image, the text in the middle needs 2 lines, and the StackLayout that wraps the content (the 2 labels and the button) gets just as wide as the label with the large text.

I draw a red square in the large text, and a red line so you can see that because of that large text, the StackLayout gets narrow.

StackLayouts are pretty janky and your best bet most of the time is to replace it with a Grid with rows and columns if possible. I'm not at a computer right now so I'll try your example tomorrow to look into a work around. — Nick Peppers
Can you post a picture (even if just drawn in MS paint) to better explain what is going wrong, compared to what you expect to see? — sme

ColeX - MSFT ColeX - MSFT · Accepted Answer · 2018-02-26T08:25:31

This is a known issue that when setting the padding on stacklayout inside Cell , the row height displays incorrectly.

Solution: Use `StackLayout` to wrap the content under the Cell.

<ViewCell>
    <StackLayout >  //add this 
        <StackLayout Orientation="Horizontal" Padding="5" Margin="5" >
             </ffimageloading:CachedImage>
             <StackLayout BackgroundColor="Brown" Orientation="Vertical">
                 <Label TextColor="#f35e20" HorizontalOptions="FillAndExpand"/>
                 <Label/>
                 <Label Text="fff" x:Name="ID" IsVisible="False"></Label>
                 <Button   Text="Ver productos" TextColor="#FF5F6D"  BackgroundColor="Yellow"></Button>
              </StackLayout>
        </StackLayout>                            
    </StackLayout>
</ViewCell>

StackLayout ignoring EndAndExpand on iOS

EDIT

1 Answers

Solution: Use StackLayout to wrap the content under the Cell.

Solution: Use `StackLayout` to wrap the content under the Cell.