Labels in VerticalStackLayout in a CollectionView without a WidthRequest is not wrapping according to the LineBreakMode

KlausKurzawa commented 2 years ago

Description

I have a HorizontalStackLayout with an image and a VerticalStackLayout containing a Label to hold my Subject. If I use a smaller device I would the Subject to be wrapped accoording to the width of the device and the Labels LineBreakMode. But this is not happend.

If I manually set the width of the VerticalStackLayout the Subject is wrapped but I want this to be automaticly done.

What have I missed or done wrong?

Using VS 2022 v17.3.0 Preview 4.0 dotnet --version: 6.0.400-preview.22330.6

Steps to Reproduce

In James Montemagno's 'Learn .NET MAUI - Full Course for Beginners' check out the Part2-solution code on Github.
I opened the solution for Part 2 and made the Name of the Capuchin Monkey longer; Name="Capuchin Monkey with dark head" then the LineBreakMode does not wrap the text.
On line#33 in MainPage.xaml I just chnaged to: If I set the WidthRequest to i.e "275" it works but devices can have different widths.

Workaround is to set a WidthRequest and the wrapping works but it is not how it should work.

I also described this in a code of my own; https://stackoverflow.com/questions/73036703/net-maui-labels-in-verticalstacklayout-in-a-collectionview-not-wrapping-accordi

Version with bug

6.0.400

Last version that worked well

Unknown/Other

Affected platforms

Android, Windows

Affected platform versions

VS 2022 v17.3.0 Preview 4.0,

Did you find any workaround?

If I set the WidthRequest to i.e "275" it works but devices can have different widths.

Relevant log output

No response

KlausKurzawa commented 2 years ago

This error still exists in the released product VS 2022 v17.3.0 or is it by design? If so, how can you get the label to automatically truncated on smaller screens?

NonameMissingNo commented 2 years ago

As a workaround, in code you can get the width of the display, and set MaxWidthRequest there.

enisn commented 1 year ago

Exactly same situation I faced.

When I use regular Label word wrap is working but when I put it into a StackLayout, wordwrap doesn't work.

 <ScrollView>
        <StackLayout Padding="25" Spacing="15">
            <Label LineBreakMode="WordWrap" Text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."/>

            <HorizontalStackLayout>
                <ImageButton Source="{FontImageSource FontFamily=MaterialRound, Glyph={x:Static m:MaterialRound.Wallpaper}, Color={StaticResource Primary}}" />
                <Label LineBreakMode="WordWrap" Text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."/>
            </HorizontalStackLayout>
    </StackLayout>
</ScrollView>

If I set MaximumWidthRequest for the label, it works as expected but I can't know the exact width for each situation.

<HorizontalStackLayout>
    <ImageButton Source="{FontImageSource FontFamily=MaterialRound, Glyph={x:Static m:MaterialRound.Wallpaper}, Color={StaticResource Primary}}" />
    <Label MaximumWidthRequest="300" LineBreakMode="WordWrap" Text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."/>
</HorizontalStackLayout>

ghost commented 1 year ago

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.