简体   繁体   中英

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>

不嵌套时效果很好

<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>

嵌套时不太好

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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM