Maui - Changing columndefinition width in code behind not updating proportions on screen.

Question

Hi,

If I have a Grid with three columns with 3*, 7*, and 0*, and in code behind I changed the GridLength or even try to create a new columndefinition to change the proportion to 0*, 0* and 1*, to show only the 3rd control, the screen doesn't update, that only refresh if I resize the column with mice or execute the code below, to force the screen to refresh it self:

this.MainGrid.WidthRequest -= 1;  
this.MainGrid.WidthRequest += 1;  

Any ideais?

Thank you,
Daniel Ancines

Answer 1

Sure, it's very simple, if you comment the ForceResize call, the screen don't update as expected, if you resize the window, the columns proportions will update and it'll work fine. I found this workaround or change the border's IsVisible property.

public partial class MainPage : ContentPage  
{  
	public MainPage()  
	{  
		InitializeComponent();  
	}  
  
    private void Button_Clicked(object sender, EventArgs e)  
    {  
        this.MainGrid.ColumnDefinitions[0].Width = new GridLength(1, GridUnitType.Star);  
        this.MainGrid.ColumnDefinitions[1].Width = new GridLength(0, GridUnitType.Star);  
        this.MainGrid.ColumnDefinitions[2].Width = new GridLength(0, GridUnitType.Star);  
        this.ForceResize();  
    }  
  
    private void Button_Clicked_1(object sender, EventArgs e)  
    {  
        this.MainGrid.ColumnDefinitions[0].Width = new GridLength(0.5, GridUnitType.Star);  
        this.MainGrid.ColumnDefinitions[1].Width = new GridLength(0.5, GridUnitType.Star);  
        this.MainGrid.ColumnDefinitions[2].Width = new GridLength(0, GridUnitType.Star);  
        this.ForceResize();  
    }  
  
    private void Button_Clicked_2(object sender, EventArgs e)  
    {  
        this.MainGrid.ColumnDefinitions[0].Width = new GridLength(0, GridUnitType.Star);  
        this.MainGrid.ColumnDefinitions[1].Width = new GridLength(0.5, GridUnitType.Star);  
        this.MainGrid.ColumnDefinitions[2].Width = new GridLength(0.5, GridUnitType.Star);  
        this.ForceResize();  
    }  
  
    private void ForceResize()  
    {  
        this.MainGrid.WidthRequest += 1;  
        this.MainGrid.WidthRequest -= 1;  
    }  
}  
  
    <Grid x:Name="MainGrid" ColumnDefinitions="3*,3*,3*" RowDefinitions="*,Auto">  
        <Border x:Name="RedBorder" BackgroundColor="Red" Margin="5"/>  
        <Border x:Name="GreenBorder" BackgroundColor="Green" Grid.Column="1" Margin="5"/>  
        <Border x:Name="BlueBorder" BackgroundColor="Blue" Grid.Column="2" Margin="5"/>  
  
        <HorizontalStackLayout Grid.Row="1" Grid.ColumnSpan="2">  
            <Button Text="Red 100%" Clicked="Button_Clicked"/>  
            <Button Text="Red 50% Green 50%" Clicked="Button_Clicked_1"/>  
            <Button Text="Green 50% Blue 50%" Clicked="Button_Clicked_2"/>  
        </HorizontalStackLayout>  
    </Grid>  

Answer 2

I really apreciate your answer, for now I have a workaround and it's ok, but I think that's better if the screen updates when you change the width of a column, but there's another ways to do this like Routing.

Have a nice weekend.