Maui.Markup icon indicating copy to clipboard operation
Maui.Markup copied to clipboard

[Bug] TextCenterVertical() not center vertically within Grid

Open chandra-arifin opened this issue 3 years ago • 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<TestViewModel> { 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 avatar Aug 02 '22 02:08 chandra-arifin

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

pictos avatar Aug 02 '22 03:08 pictos

https://github.com/chandra-arifin/FutureMauiMarkup

can see this github repo

chandra-arifin avatar Aug 02 '22 07:08 chandra-arifin

Yes we can, thank you for supplying it

bijington avatar Aug 02 '22 08:08 bijington

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

chandra-arifin avatar Aug 02 '22 08:08 chandra-arifin

I can reproduce the issue with the sample.

I suspect it might relate to our implementation here: https://github.com/CommunityToolkit/Maui.Markup/blob/670f3e4111720d1c585ce622b33cfcab447d28cd/src/CommunityToolkit.Maui.Markup/TextAlignmentExtensions.cs#L64 but I am going to have to dig a bit deeper

bijington avatar Aug 02 '22 12:08 bijington

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);

bijington avatar Aug 02 '22 12:08 bijington

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? 😁

chandra-arifin avatar Aug 02 '22 13:08 chandra-arifin

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...

bijington avatar Aug 03 '22 10:08 bijington