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
22.24k stars 1.76k 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 1 year ago

microspaze commented 1 year 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 1 year 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 1 year 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