Item of Grid does not fit in cell

RedRaRedRa Member ✭✭✭
edited July 7 in Xamarin.Forms

Hi everyone,

I have faced with issue that Grid Item does not fit in cell:

<Grid
    VerticalOptions="FillAndExpand"
    x:Name="Grid"
    RowSpacing="15"
    ColumnSpacing="15">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50" />
        <ColumnDefinition Width="50" />
        <ColumnDefinition Width="50" />
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="100" />
        <RowDefinition Height="100" />
        <RowDefinition Height="100" />
    </Grid.RowDefinitions>

    <StackLayout
        VerticalOptions="FillAndExpand"
        HorizontalOptions="FillAndExpand"
        Grid.Row="0"
        Grid.Column="0">
        <Image
            WidthRequest="50"
            HeightRequest="50"
            Source="{utilsme:ImageResource MyApp.Forms.Resources.Images.my_image.png}"/>
        <Label
            Text="Home 0"
            HeightRequest="10"
            VerticalOptions="CenterAndExpand" 
            HorizontalOptions="CenterAndExpand" />
    </StackLayout>
    <!-- Other items -->
</Grid>

As result I have the following drawing:

Also I have found the following issue:

https://forums.xamarin.com/discussion/21532/grid-not-expanding-to-fit-content

But seems like over the years it still does not fixed ...

Guys, how to fix this behavior of the Grid ?

Best Answer

  • RedRaRedRa ✭✭✭
    edited July 21 Accepted Answer

    I have found the issue !!
    The issue was in custom HeightRequest:

        HeightRequest="10"
    

    When I removed HeightRequest it has be adjusted automatically

Answers

  • RedRaRedRa Member ✭✭✭
    edited July 7

    I have opened article with custom layout:

    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/custom

    And added to it the following code:

    // ...
    
    protected override async void OnAppearing()
    {
        base.OnAppearing();
    
        var images = await GetImageListAsync();
        if (images != null)
        {
            foreach (var photo in images.Photos)
            {
                var stack = new StackLayout();
                var image = new Image
                {
                    Source = ImageSource.FromUri(new Uri(photo))
                };
                var label = new Label
                {
                    Text = "Small descritpion !!",
                    WidthRequest = 20
                };
                stack.Children.Add(image);
                stack.Children.Add(label);
                wrapLayout.Children.Add(stack);
            }
        }
    }
    
    // ...
    

    And all items fit in WrapLayout (which is Custom Grid Layout for images) ... !!

    I am wondering why Grid from Xamarin.Forms does not fit item in Grid Cell, but WrapLayout from Xamarin documentation behaves better than default Grid Layout ?!

  • JohnHardmanJohnHardman GBUniversity mod

    @RedRa

    I've seen this in various guises, one where a Grid does not expand vertically based on its content, and one where Labels with wrapped text get cropped vertically as the containing Layout does not expand as expected. The former I have worked around by replacing Grid in those particular scenarios. The latter, I am hoping Xamarin will eventually get around to fixing (it's such a blatant problem that surely they have to do it eventually, rather than me spend time writing yet another custom renderer). Unfortunately, both have been outstanding for a long time, so I'm not holding my breath :-( Yes, I guess I could go fix the problem as XF is open source, but I have more than enough thing to do already, particularly when Microsoft are paying other people to further develop XF.

    I've seen other issues with WrapLayout, so I'm personally still wary of using it (the equivalent in the Java world just works, so why WrapLayout is so difficult to get right is a bit of a mystery).

    Sorry to not have solutions for you, just confirming that you are not the only one hitting the problem(s).

  • JohnHardmanJohnHardman GBUniversity mod

    Oops, should have said FlexLayout rather than WrapLayout ;-)

  • ElandaloussiishrakElandaloussiishrak USMember ✭✭

    stack layout is not responsive use FlexLayout or a grid instead.

  • RedRaRedRa Member ✭✭✭
    edited July 9

    @Elandaloussiishrak said:
    stack layout is not responsive use FlexLayout or a grid instead.

    What does it mean not responsive ?
    Why in this case all works perfectly in WrapLayout from https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/custom ?!!

  • RedRaRedRa Member ✭✭✭

    @Elandaloussiishrak said:
    stack layout is not responsive use FlexLayout or a grid instead.

    Also I have checked FlexLayout, but it has the same affect as StackLayout:

    <FlexLayout
            Wrap="Wrap"
            Grid.Row="0"
            Grid.Column="0">
    <!-- ... -->
    </FlexLayout>
    

    Seems like it is an issue on Xamarin.Forms Grid side ... (:

  • ElandaloussiishrakElandaloussiishrak USMember ✭✭
    edited July 10

    hi , the default spacing of a stacklayout is 6.0 you can set it to 0 or 1, for flex layout see the documentation : https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/flex-layout

    related post also :

    https://forums.xamarin.com/discussion/32366/default-spacing-between-items-in-a-stacklayout

  • RedRaRedRa Member ✭✭✭

    @Elandaloussiishrak said:
    hi , the default spacing of a stacklayout is 6.0 you can set it to 0 or 1, for flex layout see the documentation : https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/flex-layout

    related post also :

    https://forums.xamarin.com/discussion/32366/default-spacing-between-items-in-a-stacklayout

    It does not help ...
    I tried:

    Spacing="0"
    

    But still an issue exists ...

  • ElandaloussiishrakElandaloussiishrak USMember ✭✭

    @RedRa : add link of your github project and i will check with you.

  • RedRaRedRa Member ✭✭✭
    edited July 11

    @Elandaloussiishrak said:
    @RedRa : add link of your github project and i will check with you.

    I have created an issue on github and attached test project to it https://github.com/xamarin/Xamarin.Forms/issues/6833
    MinimalTestExample.zip

  • ElandaloussiishrakElandaloussiishrak USMember ✭✭
    edited July 12

    you shouldn't add an issue in Xamarin the issue is in your code so attach your MinimalTestExample.zip here

  • RedRaRedRa Member ✭✭✭

    @Elandaloussiishrak said:
    you shouldn't add an issue in Xamarin the issue is in your code so attach your MinimalTestExample.zip here

    I have attached MinimalTestExample.zip

  • RedRaRedRa Member ✭✭✭

    @Elandaloussiishrak Have you seen test example ?
    Do you think mistake in my code ?
    If yes, than where it is ??

  • RedRaRedRa Member ✭✭✭
    edited July 21 Accepted Answer

    I have found the issue !!
    The issue was in custom HeightRequest:

        HeightRequest="10"
    

    When I removed HeightRequest it has be adjusted automatically

  • JohnHardmanJohnHardman GBUniversity mod

    @RedRa said:
    I have found the issue !!
    The issue was in custom HeightRequest:

        HeightRequest="10"
    

    When I removed HeightRequest it has be adjusted automatically

    That would do it :-) Glad you got it sorted

Sign In or Register to comment.