dotnet / maui

.NET MAUI is the .NET Multi-platform App UI, a framework for building native device applications spanning mobile, tablet, and desktop.
https://dot.net/maui
MIT License
22.06k stars 1.73k forks source link

WordWrap on labels with padding does not work properly on iOS. #16018

Open cat0363 opened 1 year ago

cat0363 commented 1 year ago

Description

To reproduce the problem, the layout is as follows.

<Grid RowDefinitions="44,*" RowSpacing="5">
    <Entry x:Name="txtTest" Grid.Row="0" TextChanged="txtTest_TextChanged"  />
    <Label x:Name="lblTest" Grid.Row="1" LineBreakMode="WordWrap" FontSize="30" Padding="40,0,40,0" />
</Grid>

The implementation of TextChanged event of Entry is as follows.

private void txtTest_TextChanged(object sender, TextChangedEventArgs e)
{
    lblTest.Text = txtTest.Text;
}

If Padding is set for Label and WordWrap is specified for LineBreakMode, the Text of Label will not be wrapped by the amount specified for padding.

Below is the execution result.

https://github.com/dotnet/maui/assets/125236133/ad146294-8534-47b7-9fd8-cf610bc5b9e0

"1234567890ABCDEFG" is displayed, but "HIJKL" after that is not displayed without being wrapped. It wraps when you type 'M'.

Steps to Reproduce

The steps to reproduce are as follows.

  1. Launch the app uploaded to github with the device on iOS
  2. Enter any text for the entry

When the Label text reaches the end of one line in step 2, the character string entered after that is not wrapped by the amount specified for padding and is not displayed.

I was expecting the Label's Text to wrap when it reaches the end of a line.

Link to public reproduction project repository

https://github.com/cat0363/Maui-IssueLabel.git

Version with bug

7.0.86

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 16.4

Did you find any workaround?

Set Margin instead of Padding for Label.

Relevant log output

No response

cat0363 commented 1 year ago

As far as I know, this issue also occurs in Xamarin.Forms and is still an open issue. Should I stop using Padding and use Margin instead?

cat0363 commented 1 year ago

By fixing the implementation of MauiLabel, WordWrap now works as intended in the case of adding padding.

[src\Core\src\Platform\iOS\MauiLabel.cs]

The following is the verification result of the fixed version. This is the verification result for the layout posted in this issue.

https://github.com/dotnet/maui/assets/125236133/b01f02af-e55e-4e4e-9fbd-ecf0b96a757e

The character string is wrapped and displayed without disappearing near the display width.

I then tested it with the following layout.

<Grid RowDefinitions="44,160,*" ColumnDefinitions="*,*" RowSpacing="5">
    <Entry x:Name="txtTest" Grid.Row="0" TextChanged="txtTest_TextChanged"  />
    <Grid Grid.Row="1" Grid.ColumnSpan="2" BackgroundColor="Red" Padding="0,0,0,0" />
    <Label x:Name="lblTest" Grid.Row="1" LineBreakMode="WordWrap" FontSize="30" Padding="20,20,20,20" TextColor="White" VerticalOptions="Start" VerticalTextAlignment="Start" BackgroundColor="Blue" />
</Grid>

LineBreakMode="WordWrap" VerticalOptions="Start" VeticalTextAlignment="Start"

https://github.com/dotnet/maui/assets/125236133/37d11130-4d39-4c32-a2b4-56673a00ec60

LineBreakMode="WordWrap" VerticalOptions="Center" VeticalTextAlignment="Start"

https://github.com/dotnet/maui/assets/125236133/74ac092c-2973-4753-8faf-34f846b23425

LineBreakMode="WordWrap" VerticalOptions="End" VeticalTextAlignment="Start"

https://github.com/dotnet/maui/assets/125236133/13c7aa3c-06e5-487a-bc93-d16250f42924

LineBreakMode="WordWrap" VerticalOptions="Start" VeticalTextAlignment="Center"

https://github.com/dotnet/maui/assets/125236133/23080e63-ba3d-462f-acc7-21d45273e900

LineBreakMode="WordWrap" VerticalOptions="Start" VeticalTextAlignment="End"

https://github.com/dotnet/maui/assets/125236133/4aa70607-68ac-4c92-bfba-329ecdb05c5d

LineBreakMode="WordWrap" VerticalOptions="Center" VeticalTextAlignment="Center"

https://github.com/dotnet/maui/assets/125236133/57df5987-8c9a-42bf-93fa-0f3203eab811

LineBreakMode="WordWrap" VerticalOptions="Center" VeticalTextAlignment="End"

https://github.com/dotnet/maui/assets/125236133/b2fbc59f-cd07-42a2-a171-aae2caa2ea14

LineBreakMode="WordWrap" VerticalOptions="End" VeticalTextAlignment="Center"

https://github.com/dotnet/maui/assets/125236133/b3c2cd1b-5ec1-4cd0-b9b2-312585e5acf3

LineBreakMode="WordWrap" VerticalOptions="End" VeticalTextAlignment="End"

https://github.com/dotnet/maui/assets/125236133/563078c6-0740-4963-b8f5-5171e4994ef6

At least the above test results match my expectations. I would like to verify it in various cases and if there is no problem, I would like to create a PR.

NishiokaTakeo commented 8 months ago

Labelin MAUI still does not work. It works only if you wrap labelby Gridinstead of StackLayout.

EvoZ1310 commented 8 months ago

This is also happening on MacCatalyst!