Editor controls in grid don't resize correctly after grid and row compressed to zero width and expanded back

Question

Editor controls in a 3x3 grid don't resize correctly after compressing one of the rows and columns to 0 width and height and expanding it back to normal size. The bug is only present on the windows platform using Editor controls. Resizing works correctly for Entry or Label controls. Android and ipadOS work properly for all controls. I have not tested this issue on MacOS. The XAML main page and C# code behind are below. The C# contains a work around. Run the code on Windows and you will see the result. The shell used is from the demo Maui app, nothing special. I believe this is a bug but wanted to have more experienced coders examine it since I may be using the control wrong.

Can anyone confirm this is a bug? Is there a faster/better work around?

The XAML

<?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="CollapseGrid.MainPage">
    <ScrollView>
        <VerticalStackLayout
            Padding="30,0"
            Spacing="25">
            <!-- Add a button to collapse the second row and column -->
            <Button Text="Collapse Row 3 and Column 3" WidthRequest="250" Clicked="Button_Clicked" />
            
            <!-- Add a button to collapse the second row and column -->
            <Button Text="Expand Row 3 and Column 3" WidthRequest="250" Clicked="Button_Clicked_1" />
            <Grid x:Name="myGrid" RowSpacing="5" ColumnSpacing="5" >
                
                <!-- 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="Item 1" Grid.Row="0" Grid.Column="0" Background="LightGray" AutoSize="TextChanges" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
                <Editor x:Name="Cell2" Text="Item 2" Grid.Row="0" Grid.Column="1" Background="LightGray" AutoSize="TextChanges" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
                <Editor x:Name="Cell3" Text="Item 3" Grid.Row="0" Grid.Column="2" Background="LightGray" AutoSize="TextChanges" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
                <Editor x:Name="Cell4" Text="Item 4" Grid.Row="1" Grid.Column="0" Background="LightGray" AutoSize="TextChanges" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
                <Editor x:Name="Cell5" Text="Item 5" Grid.Row="1" Grid.Column="1" Background="LightGray" AutoSize="TextChanges" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
                <Editor x:Name="Cell6" Text="Item 6" Grid.Row="1" Grid.Column="2" Background="LightGray" AutoSize="TextChanges" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
                <Editor x:Name="Cell7" Text="Item 7" Grid.Row="2" Grid.Column="0" Background="LightGray" AutoSize="TextChanges" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
                <Editor x:Name="Cell8" Text="Item 8" Grid.Row="2" Grid.Column="1" Background="LightGray" AutoSize="TextChanges" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
                <Editor x:Name="Cell9" Text="Item 9" Grid.Row="2" Grid.Column="2" Background="LightGray" AutoSize="TextChanges" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
                
            </Grid>
            <Label Text="Collapse Row 3 and Column and Expand it back again using the 2 buttons at the top. The 3rd column will be sized correctly." />
            <Label Text="Now, comment out the work-around code at the bottom of the C# page. Collapse and expand Row 3 and Column 3 again. The 3rd column editor controls are not properly sized. They can be sized by clicking in them, or by resizing the window." />
            <Label Text="I beleive this is a bug, but may not be using the control properly. If it's a bug, please advise if there's a faster work around than the code currently implemented, otherwise, please advise on how to use the control properly becuase operation is quite ugly if the 3rd column editor controls have large amounts of text in them." />
            <Label Text="The bug is only present on the windows platform using Editor controls. Resizing works correctly if the controls are replaced with Entry or Label controls. Android and ipadOS work properly for all controls. I have not tested this on MacOS." />
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

The C#

namespace CollapseGrid
{
    public partial class MainPage : ContentPage

    {

        public MainPage()
        {
            InitializeComponent();
           
        }


        private void Button_Clicked(object sender, EventArgs e)
        {
            // To collapse the second row (index 2)
            myGrid.RowDefinitions[2].Height = new GridLength(0, GridUnitType.Star);

            // To collapse the second column (index 2)
            myGrid.ColumnDefinitions[2].Width = new GridLength(0, GridUnitType.Star);

        }

        private async void Button_Clicked_1(object sender, EventArgs e)
        {
            // To expand the second row (index 2)
            myGrid.RowDefinitions[2].Height = new GridLength(1, GridUnitType.Star);

            // To expand the second column (index 2)
            myGrid.ColumnDefinitions[2].Width = new GridLength(1, GridUnitType.Star);

            
            // Comment the WORK-AROUND code below to see incorrect Editor control resizing
            Cell3.Focus();
            await Task.Delay(2);
            Cell6.Focus();
            await Task.Delay(2);
            Cell9.Focus();
            await Task.Delay(2);
            Cell9.Unfocus();


        }
    }
}

Answer 1

Hello,

For the case of hiding and redisplaying the rows and columns of the Grid, it is recommended that you remove/add rows and columns instead of hiding them.

This is because after the rows and columns are compressed and hidden, the space occupied needs to be recalculated when they are redisplayed. This will cause the width and height of the layout to be incorrectly distributed in some cases.

Please refer to the following workaround:

private void Button_Clicked(object sender, EventArgs e)

{

    myGrid.RowDefinitions.RemoveAt(2);

    myGrid.ColumnDefinitions.RemoveAt(2);

}

 

private async void Button_Clicked_1(object sender, EventArgs e)

{

    myGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });

 

    myGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });

}

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

You're experiencing issues with Xamarin.Forms Editor controls' sizing within a Grid layout on Windows platforms.

Workaround:

Your current workaround using Focus() and Unfocus() methods seems to be effective, but you're seeking alternatives.

Alternative Workarounds:

1. Force Layout Update: After expanding the row and column, call myGrid.ForceLayout() to redraw the layout.

private async void Button_Clicked_1(object sender, EventArgs e)

{

// ...

myGrid.RowDefinitions[2].Height = new GridLength(1, GridUnitType.Star);

myGrid.ColumnDefinitions[2].Width = new GridLength(1, GridUnitType.Star);

myGrid.ForceLayout();

}

2.  **InvalidateMeasure**: Call `InvalidateMeasure()` on the Editor controls to recalculate their size.

    ```csharp

private async void Button_Clicked_1(object sender, EventArgs e)

{

    // ...

    myGrid.RowDefinitions[2].Height = new GridLength(1, GridUnitType.Star);

    myGrid.ColumnDefinitions[2].Width = new GridLength(1, GridUnitType.Star);

    Cell3.InvalidateMeasure();

    Cell6.InvalidateMeasure();

    Cell9.InvalidateMeasure();

}

1. Use Entry instead of Editor: If possible, replace Editor with Entry controls, as you mentioned they resize correctly.

Bug Report:

This issue appears to be a Xamarin.Forms bug specific to Windows platforms. Consider reporting it on the Xamarin.Forms GitHub repository.

Additional Tips:

• Ensure you're using the latest Xamarin.Forms version.
• Verify the issue persists on different Windows versions and devices.
• Provide a minimal reproducible sample to help the Xamarin.Forms team investigate.

If none of these workarounds resolve the issue, please provide more details about your project, including:

• Xamarin.Forms version
• Windows version(s) affected
• Any custom renderers or layouts used

For further assistance.

Answer 3

I appreciate the offer of assistance! I did solve the problem, but not with grid. I wanted 9 columns and 7 rows in the grid. The column definitions would not remove/insert correctly if more than 6 of them. If it was 6x6 and below, grid worked very well. The rows worked fine for any number. The final solution was a vertical stack of horizontal stacks, if that makes sense! The XAML was not as small or feature rich as grid implementation but was workable and seems responsive enough.