Search code examples
xamarinxamarin.formsword-wrap

TextWrapped Label breaks Layout Option FillAndExpand in StackLayout

I'm having a cell view with nested StackLayouts, there's one label that will be wrapped if the text is long, which is the desired behaviour. However, the wrap breaks the LayoutOptions set to (basically) all parent views resulting in a gray gap on the right hand side.

    <StackLayout Orientation="Horizontal" BackgroundColor="Gray" Margin="0,30,0,0">
        <BoxView
            HorizontalOptions="Start"
            BackgroundColor="#EEBB00"
            WidthRequest="100"
        />
        <StackLayout
            BackgroundColor="#CC4400"
            HorizontalOptions="FillAndExpand"
        >
            <BoxView
                BackgroundColor="Green"
                HeightRequest="10"
                HorizontalOptions="FillAndExpand"
            />
            <Label
                FontSize="16"
                HorizontalOptions="FillAndExpand"
                Text="Name that is toolongandwillbewrapped"
            />
            <StackLayout
                Orientation="Horizontal"
                HorizontalOptions="FillAndExpand"
                BackgroundColor="Blue"
            >
                <Label
                    FontSize="13"
                    Text="Left"
                    TextColor="White"
                    HorizontalOptions="StartAndExpand"
                    VerticalTextAlignment="End"
                />
                <Label
                    FontSize="13"
                    Text="Right"
                    TextColor="White"
                    HorizontalOptions="EndAndExpand"
                    VerticalTextAlignment="End"
                />
            </StackLayout>
        </StackLayout>
    </StackLayout>

The resulting views are:

Right-hand label's text wrap breaks the <code>FillAndExpand</code> Short text is ok

So I can tell why this is happening, but well, of course I don't like it. The expected behaviour is for the right-hand-side stacklayout to expand all the way to the right. I've tried various ways to circumvent this and would not be here if I had succeeded. Does anybody have an idea?

Solution

  • Unfortunately, it's a bug in Xamarin.Forms (probably, iOS-only).

    The workaround in that case is using Grid instead of StackLayout : http://forums.xamarin.com/discussion/comment/152969/#Comment_152969