How to extend StackLayout to fill 1x1 Grid cell

JohnHardmanJohnHardman modGBUniversity mod
edited October 2017 in Xamarin.Forms

I've removed the text content from the attached image due to confidentiality.

The red rectangle that I have painted on shows the bounds of a 1x1 Grid with the ColumnDefinition size set to new GridLength(1, GridUnitType.Auto).
Each of the cells below it are created the same way.

Each of those 1x1 Grids has a single child View added, which is defined by the following code (this isn't meant to be production quality!):

new StackLayout
{
    BackgroundColor = Color.White,
    HorizontalOptions = LayoutOptions.FillAndExpand,
    Margin = 0,
    Orientation = StackOrientation.Horizontal,
    Padding = new Thickness(10, 10, 10, 10),
    Spacing = 10,
    VerticalOptions = LayoutOptions.Fill,
    Children =
    {
        buttonImage,
        new ContentView
        {
            BackgroundColor = Color.White,
            HorizontalOptions = LayoutOptions.FillAndExpand,
            Margin = 0,
            Padding = new Thickness(10, 0, 10, 0),
            VerticalOptions = LayoutOptions.CenterAndExpand,
            InputTransparent = true,
            Content = new Label
            {
                BackgroundColor = Color.White,
                FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
                Margin = 0,
                Text = buttonText,
                TextColor = Color.Black,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                HorizontalTextAlignment = TextAlignment.Start,
                VerticalTextAlignment = TextAlignment.Center,
                InputTransparent = true
            }
        }
    }
}

As can be seen from the image, the white background within the Grid cell does not reach the right-hand end of the cell (other than in the case of the widest one), with the underlying background color of the Grid showing (AntiqueWhite) instead. I'm probably missing something obvious, but what would need changing in the above code to make the StackLayout with the White background extend to the right-hand edge of the Grid cell?

I am using XF 2.4.0.282

I'm thinking this might be a XF layout bug, but hoping that somebody can spot something in the code above instead!

Best Answer

  • JohnHardmanJohnHardman mod GB mod
    edited October 2017 Accepted Answer

    After long investigation, it appears that having a Grid with HorizontalOptions = LayoutOptions.Fill conflicts with elements in the Grid using GridLength.Auto . The Fill allows the Grid to expand to fill a containing object, but the child elements with GridLength.Auto do not expand to fill the expanded Grid, even if set to span the entire Grid and even if the child elements also use HorizontalOptions = LayoutOptions.Fill. That was unexpected.

    Unfortunately using GridLength.Star is of no use here, as it results in everything becoming wider than desired.

    The only way I have found to overcome this, is to add a PropertyChanged handler for WidthProperty, and then to explicitly size things based on the new Width. For the moment, when I get a Width change, I am then using the new Width to change the Grid's ColumnDefinition to use GridUnitType.Absolute with the new Width as the value.

    (I would expect that I could just as easily have use the new Width to re-size the View inside the Grid, rather than the ColumnDefinition).

    @PaulDiPietro - I'm not sure whether to log this as a XF bug. What do you think?

Answers

  • JohnHardmanJohnHardman mod GBUniversity mod
    edited October 2017 Accepted Answer

    After long investigation, it appears that having a Grid with HorizontalOptions = LayoutOptions.Fill conflicts with elements in the Grid using GridLength.Auto . The Fill allows the Grid to expand to fill a containing object, but the child elements with GridLength.Auto do not expand to fill the expanded Grid, even if set to span the entire Grid and even if the child elements also use HorizontalOptions = LayoutOptions.Fill. That was unexpected.

    Unfortunately using GridLength.Star is of no use here, as it results in everything becoming wider than desired.

    The only way I have found to overcome this, is to add a PropertyChanged handler for WidthProperty, and then to explicitly size things based on the new Width. For the moment, when I get a Width change, I am then using the new Width to change the Grid's ColumnDefinition to use GridUnitType.Absolute with the new Width as the value.

    (I would expect that I could just as easily have use the new Width to re-size the View inside the Grid, rather than the ColumnDefinition).

    @PaulDiPietro - I'm not sure whether to log this as a XF bug. What do you think?

Sign In or Register to comment.