search

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
21.86k stars 1.68k forks source link

[iOS] Label's width can't full fill Grid's * (GridUnitType.Star) space when Grid has a Horizontal padding #16912

Open microspaze opened 10 months ago

microspaze commented 10 months ago

Description

Label's width can't full fill Grid's * (GridUnitType.Star) space when Grid has a Horizontal padding, the label's width depends on its content's actual width, but it will affect the whole grid width. NO MATTER what layout or view wrapper the label with HorizontalOptions="FillAndExpand", its width will be sticky to the label's width.

Tested on net7-ios and net8-ios (preview-7), all have this bug. (Android is OK)

The first 3 blocks end with green square has a Padding="10" property. [WRONG] The last 3 blocks end with blue square has a Margin="10" property. [RIGHT] f868cfe83960aeb2b91e5c9dbcd25f7

The first 3 blocks end with green square has a Padding="0,10" property. [RIGHT] The last 3 blocks end with blue square has a Margin="10" property. [RIGHT] 0478eec06422bd4a427a1982acd67b5

Steps to Reproduce

<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MauiOne.MainPage">

<ScrollView>
    <VerticalStackLayout
        Spacing="10"
        Padding="30,30"
        VerticalOptions="Center">
        <Grid
            Padding="10"
            BackgroundColor="Aqua"
            RowDefinitions="Auto,Auto"
            ColumnDefinitions="50,*,50">
            <Image
                Grid.Row="0"
                Grid.Column="0"
                Grid.RowSpan="2"
                Source="dotnet_bot.png"
                HeightRequest="50" WidthRequest="50"
                HorizontalOptions="Center" />
            <Label
                Grid.Row="0"
                Grid.Column="1"
                Text="Hell0"></Label>
            <Label
                BackgroundColor="LightGray"
                Grid.Row="1"
                Grid.Column="1"
                Text="Cute dot net bot waving hi to you!Cute dot net bot waving hi to you!"></Label>
            <BoxView
                Grid.Row="1"
                Grid.Column="2"
                Color="Green"></BoxView>
        </Grid>

        <Grid
            Padding="10"
            BackgroundColor="Aqua"
            RowDefinitions="20,Auto"
            ColumnDefinitions="50,*,50">
            <Image
                Grid.Row="0"
                Grid.Column="0"
                Grid.RowSpan="2"
                Source="dotnet_bot.png"
                HeightRequest="50" WidthRequest="50"
                HorizontalOptions="Center" />
            <Label
                Grid.Row="0"
                Grid.Column="1"
                Text="Hell0"></Label>
            <Label
                BackgroundColor="LightGray"
                Grid.Row="1"
                Grid.Column="1"
                Text="Cute dot net bot waving hi to you!Cute dot net bot waving hi to you!Cute dot net bot waving hi to you!"></Label>
            <BoxView
                Grid.Row="1"
                Grid.Column="2"
                Color="Green"></BoxView>
        </Grid>

        <Grid
            Padding="10"
            BackgroundColor="Aqua"
            RowDefinitions="Auto,Auto"
            ColumnDefinitions="50,*,50">
            <Image
                Grid.Row="0"
                Grid.Column="0"
                Grid.RowSpan="2"
                Source="dotnet_bot.png"
                HeightRequest="50" WidthRequest="50"
                HorizontalOptions="Center" />
            <Label
                Grid.Row="0"
                Grid.Column="1"
                Text="Hell0"></Label>
            <Label
                BackgroundColor="LightGray"
                Grid.Row="1"
                Grid.Column="1"
                Text="Cute dot net bot waving hi to you!"></Label>
            <BoxView
                Grid.Row="1"
                Grid.Column="2"
                Color="Green"></BoxView>
        </Grid>

        <Grid
            Margin="10"
            BackgroundColor="Aqua"
            RowDefinitions="Auto,Auto"
            ColumnDefinitions="50,*,50">
            <Image
                Grid.Row="0"
                Grid.Column="0"
                Grid.RowSpan="2"
                Source="dotnet_bot.png"
                HeightRequest="50" WidthRequest="50"
                HorizontalOptions="Center" />
            <Label
                Grid.Row="0"
                Grid.Column="1"
                Text="Hell0"></Label>
            <Label
                BackgroundColor="LightGray"
                Grid.Row="1"
                Grid.Column="1"
                Text="Cute dot net bot waving hi to you!Cute dot net bot waving hi to you!"></Label>
            <BoxView
                Grid.Row="1"
                Grid.Column="2"
                Color="Blue"></BoxView>
        </Grid>

        <Grid
            Margin="10"
            BackgroundColor="Aqua"
            RowDefinitions="20,Auto"
            ColumnDefinitions="50,*,50">
            <Image
                Grid.Row="0"
                Grid.Column="0"
                Grid.RowSpan="2"
                Source="dotnet_bot.png"
                HeightRequest="50" WidthRequest="50"
                HorizontalOptions="Center" />
            <Label
                Grid.Row="0"
                Grid.Column="1"
                Text="Hell0"></Label>
            <Label
                BackgroundColor="LightGray"
                Grid.Row="1"
                Grid.Column="1"
                Text="Cute dot net bot waving hi to you!Cute dot net bot waving hi to you!Cute dot net bot waving hi to you!"></Label>
            <BoxView
                Grid.Row="1"
                Grid.Column="2"
                Color="Blue"></BoxView>
        </Grid>

        <Grid
            Margin="10"
            BackgroundColor="Aqua"
            RowDefinitions="Auto,Auto"
            ColumnDefinitions="50,*,50">
            <Image
                Grid.Row="0"
                Grid.Column="0"
                Grid.RowSpan="2"
                Source="dotnet_bot.png"
                HeightRequest="50" WidthRequest="50"
                HorizontalOptions="Center" />
            <Label
                Grid.Row="0"
                Grid.Column="1"
                Text="Hell0"></Label>
            <Label
                BackgroundColor="LightGray"
                Grid.Row="1"
                Grid.Column="1"
                Text="Cute dot net bot waving hi to you!"></Label>
            <BoxView
                Grid.Row="1"
                Grid.Column="2"
                Color="Blue"></BoxView>
        </Grid>

        <Grid
            Padding="0"
            BackgroundColor="Aqua"
            RowDefinitions="Auto,Auto"
            ColumnDefinitions="50,*,70">
            <Image
                Grid.Row="0"
                Grid.Column="0"
                Grid.RowSpan="2"
                Source="dotnet_bot.png"
                HeightRequest="50" WidthRequest="50"
                HorizontalOptions="Center" />
            <Label
                Grid.Row="0"
                Grid.Column="1"
                Text="Hell0"></Label>
            <Label
                BackgroundColor="LightGray"
                Grid.Row="1"
                Grid.Column="1"
                Text="Cute dot net bot waving hi to you!Cute dot net bot waving hi to you!"></Label>
            <BoxView
                Grid.Row="1"
                Grid.Column="2"
                Color="Green"></BoxView>
        </Grid>

        <Grid
            Padding="0"
            BackgroundColor="Aqua"
            RowDefinitions="20,Auto"
            ColumnDefinitions="50,*,70">
            <Image
                Grid.Row="0"
                Grid.Column="0"
                Grid.RowSpan="2"
                Source="dotnet_bot.png"
                HeightRequest="50" WidthRequest="50"
                HorizontalOptions="Center" />
            <Label
                Grid.Row="0"
                Grid.Column="1"
                Text="Hell0"></Label>
            <Label
                BackgroundColor="LightGray"
                Grid.Row="1"
                Grid.Column="1"
                Text="Cute dot net bot waving hi to you!Cute dot net bot waving hi to you!Cute dot net bot waving hi to you!"></Label>
            <BoxView
                Grid.Row="1"
                Grid.Column="2"
                Color="Green"></BoxView>
        </Grid>

        <Grid
            Padding="0"
            BackgroundColor="Aqua"
            RowDefinitions="Auto,Auto"
            ColumnDefinitions="50,*,70">
            <Image
                Grid.Row="0"
                Grid.Column="0"
                Grid.RowSpan="2"
                Source="dotnet_bot.png"
                HeightRequest="50" WidthRequest="50"
                HorizontalOptions="Center" />
            <Label
                Grid.Row="0"
                Grid.Column="1"
                Text="Hell0"></Label>
            <Label
                BackgroundColor="LightGray"
                Grid.Row="1"
                Grid.Column="1"
                Text="Cute dot net bot waving hi to you!"></Label>
            <BoxView
                Grid.Row="1"
                Grid.Column="2"
                Color="Green"></BoxView>
        </Grid>
    </VerticalStackLayout>
</ScrollView>

Link to public reproduction project repository

No response

Version with bug

7.0.92

Is this a regression from previous behavior?

Yes, this used to work in Xamarin.Forms

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 16.4

Did you find any workaround?

Use Margin to replace Padding property.

Relevant log output

No response

ghost commented 10 months ago

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

AnnYang01 commented 10 months ago

Verified this on Visual Studio Enterprise 17.8.0 Preview 1.0 using below Project (.NET 8.0), This issue repro on Windows 11, iOS 16.4 and Android 13.0-API33. MauiApp3.zip Windows 11 image iOS 16.4 image Android 13.0-API33 image