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

TazKing 85

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


        }
    }
}

4 answers

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 44,791 Reputation points Microsoft Vendor

2024-09-24T06:30:00.68+00:00
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.
Please sign in to rate this answer.

1 person found this answer helpful.
TazKing 85 Reputation points

2024-09-24T06:53:08.6133333+00:00

Thank you, I will consider this work around. However, since Entry and Label controls display properly on Windows and since all controls resize properly on Android and iOS, I still consider this behavior is a bug. The reason I use hide/show is because I want to retain the contents of the controls and that is the most efficient method.

Moreover, I replaced the original work-around with a faster and better one, see below. After showing the control, its contents are read and saved, a null string is input to the control, followed by inputting the original contents. The result is flawless.

Modified workaround below

// Comment the WORK-AROUND code below to see incorrect Editor control resizing behavior string text = Cell3.Text; //Get the contents of the Editor control Cell3.Text = ""; //Delete the contents Cell3.Text = text; //Add the original contents back text = Cell6.Text; //Repeat for other controls Cell6.Text = ""; Cell6.Text = text; text = Cell9.Text; Cell9.Text = ""; Cell9.Text = text;

TazKing 85 Reputation points

2024-09-24T06:56:38.3966667+00:00

Shouldn't the Editor control have the same sizing behavior as Entry and Label?

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 44,791 Reputation points Microsoft Vendor

2024-09-24T08:09:05.9466667+00:00

Thanks for your feedback.

Q&A is not a bug reporting or tracking system. For this issue, you could report it in the Maui github repository at https://github.com/dotnet/maui. We will clear details to be able to reproduce and troubleshoot the problem. When you post it, please include version numbers, exact repro steps, and the difference between the expected behaviour and actual behaviour.

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 44,791 Reputation points Microsoft Vendor

2024-09-25T01:22:26.5433333+00:00

I still consider this behavior is a bug. The reason I use hide/show is because I want to retain the contents of the controls and that is the most efficient method.

Deleting/adding row and column definitions does not affect the content. After deleting the row and column definitions, your UI is still included in the layout, but it is not displayed because there are no corresponding rows and columns in the layout. You can think of it as a more precise hiding/showing.

Shouldn't the Editor control have the same sizing behavior as Entry and Label?

Editor has the AutoSize property, so it will automatically adjust its size when the layout renderer calculates the width. This is different from Entry and Label. If you set the AutoSize property to Disabled, the size of the Editor will not be changed.

TazKing 85 Reputation points

2024-09-25T04:08:07.6133333+00:00

Alec, I've tried your suggestion and it allows Editor controls to be used. However, it always removes and replaces 2nd row and column. I don't know why. The code below produces the same results regardless of index. Any guess what is happening?

myGrid.ColumnDefinitions.RemoveAt(2); myGrid.RowDefinitions.RemoveAt(2);

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 44,791 Reputation points Microsoft Vendor

2024-09-25T05:24:11.2666667+00:00

Any guess what is happening?

Thanks for your feedback.

This is because after removing the row and column definitions, the Grid elements are stacked. After removing the definition of the third column, the third column elements shrink inwards and stack with the second column elements. In this case, you can declare zindex property in the xaml file to ensure that the second column elements can be stacked on the third column when collapsing.

<Editor x:Name="Cell1" Text="Item 1" Grid.Row="0" Grid.Column="0" Background="LightGray" AutoSize="TextChanges" /> <Editor x:Name="Cell2" Text="Item 2" Grid.Row="0" Grid.Column="1" ZIndex="1" Background="LightGray" AutoSize="TextChanges" /> <Editor x:Name="Cell3" Text="Item 3" Grid.Row="0" Grid.Column="2" Background="LightGray" AutoSize="TextChanges" /> <Editor x:Name="Cell4" Text="Item 4" Grid.Row="1" Grid.Column="0" ZIndex="2" Background="LightGray" AutoSize="TextChanges" /> <Editor x:Name="Cell5" Text="Item 5" Grid.Row="1" Grid.Column="1" ZIndex="2" Background="LightGray" AutoSize="TextChanges" /> <Editor x:Name="Cell6" Text="Item 6" Grid.Row="1" Grid.Column="2" Background="LightGray" AutoSize="TextChanges" /> <Editor x:Name="Cell7" Text="Item 7" Grid.Row="2" Grid.Column="0" Background="LightGray" AutoSize="TextChanges" /> <Editor x:Name="Cell8" Text="Item 8" Grid.Row="2" Grid.Column="1" ZIndex="1" Background="LightGray" AutoSize="TextChanges" /> <Editor x:Name="Cell9" Text="Item 9" Grid.Row="2" Grid.Column="2" Background="LightGray" AutoSize="TextChanges" />

TazKing 85 Reputation points

2024-09-25T18:14:07.2633333+00:00

Thanks, I understand this much better now. However, this method has the same issue as show/hide (not as bad though) that being the Editor boxes don't resize properly. Only partial cell content is shown until the cell gains focus. Can a re-calculation of the cells/grid be forced? InvalidateMeasure() and ForceLayout() don't work, but I'm probably not using them correctly. The compiler won't accept myGrid.InvalidateMeasure() and Cell3.ForceLayout().

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 44,791 Reputation points Microsoft Vendor

2024-09-26T03:27:58.1166667+00:00

Thanks for your feedback.For cases where dynamic resizing goes wrong, it is recommended that you report this issue to github to make our development team aware of it.

TazKing 85 Reputation points

2024-09-26T23:59:50.14+00:00

I'm planning on reporting this. I've found that changing the window size corrects Editor control sizing. Do you know a command to change window size up and then back down, as a possible workaround? Clearly, I'll have to make it Windows platform specific.

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 44,791 Reputation points Microsoft Vendor

2024-09-27T05:37:28.1133333+00:00

For windows size changing, you could refer to the following code to do it.

public partial class App : Application { public static Window window; // use this static variable for operate window size. public App(AppShell appShell) { ... } protected override Window CreateWindow(IActivationState? activationState) { window = base.CreateWindow(activationState); return window; } } // change window size in the other method private void Button_Clicked(object sender, EventArgs e) { App.window.Width += 1; App.window.Height += 1; }

TazKing 85 Reputation points

2024-10-03T05:58:35.0766667+00:00

Many thanks for your help! I had to abandon grid and implemented an alternative method. Grid was not stable for my intended use. Row operations were stable, but columns above a certain number did not behave properly. Grid appears fine in the rest of the app though, where the Definitions aren't externally changed.

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 44,791 Reputation points Microsoft Vendor

2024-10-04T00:36:10.7+00:00

May I know whether your issue has been solved or not? If you're still having problems, please explain in detail what is still going wrong and what you need help with.

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 44,791 Reputation points Microsoft Vendor

2024-10-04T05:32:42.4066667+00:00

Thanks for your feedback.

Could you please share your workaround as an answer? This will help others in the community who have the same issue.

TazKing 85 Reputation points

2024-10-04T05:38:06+00:00

Yes, I did already and to repeat, I used a VerticalStackLayout of HorizontalStackLayouts
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.
Hardikbhai Velani 75 Reputation points

2024-09-24T08:21:22.7566667+00:00
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:

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

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.
Please sign in to rate this answer.
TazKing 85 Reputation points

2024-09-24T08:37:29.66+00:00

Thank you for this advice. ForceLayout and InvalidateMeasure do not work. Using Entry would be great if it worked for this app. The control has to be multi-line.
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.
TazKing 85 Reputation points

2024-10-04T01:01:45.1233333+00:00

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.
Please sign in to rate this answer.

0 comments No comments
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

TazKing 85

I finally found the source of this bug. You cannot have a zero margin on the Editor control. The original code and approach works flawlessly. I rewrote it for future reference.

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

        }

    }
}

Profit!

Share via

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

4 answers

Your answer