Editor vertical text alignment not working after toggling IsVisible

[King-Taz]

Description

After toggling IsVisible property of Editor control, the control's vertical text alignment is destroyed (goes to default setting Start). More importantly, I cannot set vertical text alignment in code behind. This appears to be a bug since horizontal text alignment is preserved as is the ability to programmatically change it.

Steps to Reproduce

Create a group of Editor controls in XAML and trigger the code behind to hide/show the control and set alignment is below. I expected the vertical alignment to be unaffected by visibility, like the horizontal alignment.

        // Show/Hide column matrix B entries
        for (int i = 1; i <= 6; i++)
        {
            string controlName = $"M1_B_{i}1";
            if (FindByName(controlName) is View control) // Assuming the control is of type View or a derived type
            {
                control.IsVisible = (i <= order);
                //M1_B_51.HorizontalTextAlignment = TextAlignment.Start;
                //M1_B_51.VerticalTextAlignment = TextAlignment.End;
            }
        }

Link to public reproduction project repository

No response

Version with bug

9.0.10 SR1

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

No response

Affected platforms

Windows

Affected platform versions

All

Did you find any workaround?

It's not a work around, but one can just accept the default "Start" vertical alignment, which destroys the aesthetics of my app.

Relevant log output

[Ying-6]

Could you provide us with a sample project so we can investigate it further? Looking forward to your reply!

[King-Taz]

I uploaded this and sent you an invite, let me know if you have questions

[Ying-6]

This issue has been verified using Visual Studio 17.13 Preview 1(9.0.10 & 9.0.0 & 8.0.100). Can repro this issue on Windows platform.

[King-Taz]

I finally found the source of this bug. You cannot have a zero margin on the Editor control. The code below works flawlessly.

Start a demo Maui app, using net8 in my app. Insert this XAML code...

<?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="MauiGridTest.MainPage">
    <ScrollView>
        <VerticalStackLayout Padding="30,0,30,30" Spacing="5">

            <!-- Add a button to collapse the 3rd row and column -->
            <Button Text="Row 3 Col 3 - Collapse" WidthRequest="200" Clicked="Button_Clicked_RC3Collapse" />

            <!-- Add a button to expand the 3rd row and column -->
            <Button Text="Row 3 Col 3 - Expand" WidthRequest="200" Clicked="Button_Clicked_RC3Expand" />


            <Grid x:Name="myGrid" RowSpacing="2" ColumnSpacing="2" BackgroundColor="DarkGray" Padding="4" >

                <!-- Define the 3x3 grid -->
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                
                <!-- Add elements to the grid -->
                <Editor x:Name="Cell1" Text="M_11" Grid.Row="0" Grid.Column="0" Background="White" AutoSize="TextChanges" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Margin="1" />
                <Editor x:Name="Cell2" Text="M_12" Grid.Row="0" Grid.Column="1" Background="White" AutoSize="TextChanges" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Margin="1" />
                <Editor x:Name="Cell3" Text="M_13" Grid.Row="0" Grid.Column="2" Background="White" AutoSize="TextChanges" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Margin="1" />
                <Editor x:Name="Cell4" Text="M_21" Grid.Row="1" Grid.Column="0" Background="White" AutoSize="TextChanges" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Margin="1" />
                <Editor x:Name="Cell5" Text="M_22" Grid.Row="1" Grid.Column="1" Background="White" AutoSize="TextChanges" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Margin="1" />
                <Editor x:Name="Cell6" Text="M_23" Grid.Row="1" Grid.Column="2" Background="White" AutoSize="TextChanges" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Margin="1" />
                <Editor x:Name="Cell7" Text="M_31" Grid.Row="2" Grid.Column="0" Background="White" AutoSize="TextChanges" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Margin="1" />
                <Editor x:Name="Cell8" Text="M_32" Grid.Row="2" Grid.Column="1" Background="White" AutoSize="TextChanges" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Margin="1" />
                <Editor x:Name="Cell9" Text="M_33" Grid.Row="2" Grid.Column="2" Background="White" AutoSize="TextChanges" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Margin="1" />

            </Grid>
        
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

You CANNOT have Margin = "0". With a zero margin, the Editor text is misaligned. I set my margin to 1. Insert the following code in the app.

namespace MauiGridTest
{
    public partial class MainPage : ContentPage
    {

        public MainPage()
        {
            InitializeComponent();
        }


        private void Button_Clicked_RC3Collapse(object sender, EventArgs e)
        {
            // collapse 3rd row (index 2)
            myGrid.RowDefinitions[2].Height = new GridLength(0, GridUnitType.Star);
            // collapse 3rd column (index 2)
            myGrid.ColumnDefinitions[2].Width = new GridLength(0, GridUnitType.Star);

        }

        private void Button_Clicked_RC3Expand(object sender, EventArgs e)
        {
            // collapse 3rd row (index 2)
            myGrid.RowDefinitions[2].Height = new GridLength(1, GridUnitType.Star);
            // collapse 3rd column (index 2)
            myGrid.ColumnDefinitions[2].Width = new GridLength(1, GridUnitType.Star);

        }

    }
}

You can change the margin to 0 and watch the Editor control text misalign. You can also hide/show and row/column.

Someone at Microsoft owes me lunch!

[King-Taz]

There's still an issue with the AutoSize="TextChanges" property when text string is more than 1 line. Using the code above and sizing window smaller so that the text string becomes 2 lines produces

Tapping collapse button produces

and then tapping expand button produces

Alignment can be corrected by resizing window width larger or by setting the focus on each of the Editor controls in an asynchronous handler that needs a delay of 25 ms await Task.Delay(25); or longer, which is not advisable.