CommunityToolkit/Maui.Markup

[Bug] TextCenterVertical() not center vertically within Grid

chandra-arifin opened this issue · 8 comments

Description

if i use TextCenterVertical(), Label is not center vertically (windows, android, i dont have ios so can't try it), but if i use standard code, the apps runs perfect.

Stack Trace

Link to Reproduction Sample

Steps to Reproduce

`public partial class TestPage : BasePage
{
private enum Baris
{
Date,
Line,
Date2,
Line2,
};

private enum Kolom
{
	Kol1,
	Kol2
}

public TestPage(TestViewModel vm) : base(vm, vm.Title)
{
    Label lblDate1 = new Label().TextCenterVertical().Text("Date"),
        lblLine1 = new Label().TextCenterVertical().Text("Line");

    Label lblDate2 = new Label()
    {
        VerticalTextAlignment = TextAlignment.Center,
    }.Text("Date 2"),
        lblLine2 = new Label()
        {
            VerticalTextAlignment = TextAlignment.Center,
        }.Text("Line 2");

    DatePicker dtpDate1 = new(),
        dtpDate2 = new();

    Entry txtLine1 = new()
    {
        Keyboard = Keyboard.Numeric,
        MaxLength = 11
    },
    txtLine2 = new()
    {
        Keyboard = Keyboard.Numeric,
        MaxLength = 11
    };

    Grid grid = new Grid
    {
        Padding = new(20),
        ColumnSpacing = 20,
        RowSpacing = 20,

        RowDefinitions = Rows.Define(Star, Star, Star, Star),
        ColumnDefinitions = Columns.Define(Stars(.30), Stars(.70)),
    };

    grid.Add(lblDate1, (int)Kolom.Kol1, (int)Baris.Date);
    grid.Add(dtpDate1, (int)Kolom.Kol2, (int)Baris.Date);

    grid.Add(lblLine1, (int)Kolom.Kol1, (int)Baris.Line);
    grid.Add(txtLine1, (int)Kolom.Kol2, (int)Baris.Line);

    grid.Add(lblDate2, (int)Kolom.Kol1, (int)Baris.Date2);
    grid.Add(dtpDate2, (int)Kolom.Kol2, (int)Baris.Date2);

    grid.Add(lblLine2, (int)Kolom.Kol1, (int)Baris.Line2);
    grid.Add(txtLine2, (int)Kolom.Kol2, (int)Baris.Line2);

    ScrollView scrollView = new()
    {
        Content = grid
    };

    Content = scrollView;
}

}`

Expected Behavior

test1

u can see the image, the 2 label above is not center vertically, but 2 label below is center vertically with the Entry Component

Actual Behavior

Basic Information

  • Version with issue:
  • Last known good version:
  • IDE:
  • Platform Target Frameworks:
    • iOS:
    • Android:
    • UWP:
  • Android Support Library Version:
  • Nuget Packages:
  • Affected Devices:

Workaround

Reproduction imagery

@chandra-arifin are you able to attach a small project that reproduces the issue? This will help us to track it faster

Yes we can, thank you for supplying it

thanks for make MAUI Markup Great. thanks for all team to support this library

I can reproduce the issue with the sample.

I suspect it might relate to our implementation here:

bindable.SetValue(TextAlignmentElement.VerticalTextAlignmentProperty, TextAlignment.Center);
but I am going to have to dig a bit deeper

To add a little more context it looks like the Label control in .NET MAUI no longer explicitly uses the TextAlignmentElement.VerticalTextAlignmentProperty ->

https://github.com/dotnet/maui/blob/0bb81e205595dba1d692a9820f957cedf54c0fdb/src/Controls/src/Core/Label.cs#L20

public static readonly BindableProperty VerticalTextAlignmentProperty = BindableProperty.Create("VerticalTextAlignment", typeof(TextAlignment), typeof(Label), TextAlignment.Start);

No need to rush. Just happy that u find the problem here. I can still use the old code. So no worry here.
Maybe new version MAUI will break changes? 😁

To add a little more context it looks like the Label control in .NET MAUI no longer explicitly uses the TextAlignmentElement.VerticalTextAlignmentProperty ->

https://github.com/dotnet/maui/blob/0bb81e205595dba1d692a9820f957cedf54c0fdb/src/Controls/src/Core/Label.cs#L20

public static readonly BindableProperty VerticalTextAlignmentProperty = BindableProperty.Create("VerticalTextAlignment", typeof(TextAlignment), typeof(Label), TextAlignment.Start);

Although looking at the code history it doesn't look like it has used it for some time, if it ever did...