Keith
Keith

Reputation: 5381

Multiline label does not resize the parent StackLayout when nested in a Horizontal StackLayout

Below I have reduced this down to the minimum code needed to reproduce. In the first example, you can see that the multiline label expands the parent StackLayout vertically, and that the 24 unit padding is respected. In the 2nd example, I have taken this StackLayout and nested it into another horizontal StackLayout, and added a button. The vertical StackLayout will eventually have multiple labels/views within it, but as seen below, it only takes one label to reproduce the issue. I have tried forcing VerticalOptions="FillAndExpand" and HorizontalOptions="FillAndExpand" on the StackLayouts and Label in different combinations, with no change in the outcome. If I set a WidthRequest on the Label of, say, 200, everything looks fine, except we need this label to use all of the space available.

How can I update my XAML layout in the 2nd example so that the StackLayout with the White background correctly expands vertically to fit the child Label content?

<StackLayout BackgroundColor="{StaticResource Accent}" Spacing="0">
    <StackLayout Orientation="Vertical" Padding="24,24,24,24" BackgroundColor="White">
        <Label Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in metus venenatis, luctus augue vitae, porta nunc. Pellentesque nec enim velit. Ut eget lacus porta, pulvinar ante sit amet, sollicitudin leo. Nullam eleifend vitae eros vel ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultricies quam leo, quis dictum est faucibus condimentum. In nec sapien eu est volutpat molestie. Nulla facilisi. Ut eu facilisis dui. Proin egestas mollis urna. Vestibulum et hendrerit massa. Vivamus mollis consectetur tortor, non varius turpis ornare vitae. Suspendisse non pretium dolor." MaxLines="10" />
    </StackLayout>

    <CollectionView x:Name="rptTransactions" ItemsLayout="VerticalGrid" ItemsSource="{Binding Transactions}">
        <CollectionView.Header>
            <Grid Padding="10">
                <Label Text="HEADER" Grid.Column="0" />
            </Grid>
        </CollectionView.Header>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid Padding="10">
                    <Label Text="ITEM" Grid.Column="0" />
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</StackLayout>

Works great when not nested

<StackLayout BackgroundColor="{StaticResource Accent}" Spacing="0">
    <StackLayout Orientation="Horizontal" Padding="24,24,24,24" BackgroundColor="Gray">
        <StackLayout Orientation="Vertical" Padding="24,24,24,24" BackgroundColor="White">
            <Label Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in metus venenatis, luctus augue vitae, porta nunc. Pellentesque nec enim velit. Ut eget lacus porta, pulvinar ante sit amet, sollicitudin leo. Nullam eleifend vitae eros vel ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultricies quam leo, quis dictum est faucibus condimentum. In nec sapien eu est volutpat molestie. Nulla facilisi. Ut eu facilisis dui. Proin egestas mollis urna. Vestibulum et hendrerit massa. Vivamus mollis consectetur tortor, non varius turpis ornare vitae. Suspendisse non pretium dolor." MaxLines="10" />
        </StackLayout>
        <Button Text="Button" VerticalOptions="FillAndExpand"></Button>
    </StackLayout>

    <CollectionView x:Name="rptTransactions" ItemsLayout="VerticalGrid" ItemsSource="{Binding Transactions}">
        <CollectionView.Header>
            <Grid Padding="10">
                <Label Text="HEADER" Grid.Column="0" />
            </Grid>
        </CollectionView.Header>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid Padding="10">
                    <Label Text="ITEM" Grid.Column="0" />
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</StackLayout>

Not so great when nested

Upvotes: 1

Views: 361

Answers (1)

Shaw
Shaw

Reputation: 929

Add a "MinimumHeightRequest" which is large enough for your max lines.
And refactor a bit.

<StackLayout BackgroundColor="{StaticResource Accent}" Spacing="0">
    <StackLayout
        MinimumHeightRequest="220"
        Padding="24"
        Orientation="Horizontal"
        BackgroundColor="Gray">
        <Label
            Padding="24"
            BackgroundColor="White"
            MaxLines="10"
            Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Curabitur in metus venenatis, luctus augue vitae, porta nunc. Pellentesque nec enim velit. Ut eget lacus porta, pulvinar ante sit amet, sollicitudin leo. Nullam eleifend vitae eros vel ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultricies quam leo, quis dictum est faucibus condimentum. In nec sapien eu est volutpat molestie. Nulla facilisi. Ut eu facilisis dui. Proin egestas mollis urna. Vestibulum et hendrerit massa. Vivamus mollis consectetur tortor, non varius turpis ornare vitae. Suspendisse non pretium dolor." />
        <Button Text="Button" />
    </StackLayout>
    <CollectionView ... />
</StackLayout>

Or add "WidthRequest" to the long label

<StackLayout BackgroundColor="{StaticResource Accent}" Spacing="0">
    <StackLayout
        Padding="24,24,24,24"
        Orientation="Horizontal"
        BackgroundColor="Gray">
        <Label
            WidthRequest="300"
            Padding="24"
            BackgroundColor="White"
            MaxLines="10"
            Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Curabitur in metus venenatis, luctus augue vitae, porta nunc. Pellentesque nec enim velit. Ut eget lacus porta, pulvinar ante sit amet, sollicitudin leo. Nullam eleifend vitae eros vel ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultricies quam leo, quis dictum est faucibus condimentum. In nec sapien eu est volutpat molestie. Nulla facilisi. Ut eu facilisis dui. Proin egestas mollis urna. Vestibulum et hendrerit massa. Vivamus mollis consectetur tortor, non varius turpis ornare vitae. Suspendisse non pretium dolor." />
        <Button Text="Button" />
    </StackLayout>
    <CollectionView ... />
</StackLayout>

Upvotes: 0

Related Questions