Search code examples
c#xamaringridscrollview

Issue with Grid height, inside a ScrollView

I have a Grid, in a ScrollView

The rows height is in Auto, because, depending of the text inside, the row can have a biger height.

The user can add row, as many as he wants, but I want to keep some text up the grid, so I put the grid in a scrollview, that way, the grid only take the same size on the screen, and the user can scroll through rows.

My issue is, as my grid don't have a fixed height (I don't want it to be fixed at 10 000 for example, if there is only 2 rows), it's just taking the scollview height, and my rows are truncated if there is not enought space, instead of taking the size they need, enlarging the scrollview.

Edit : first pic, the grid height is fixed to 2000, the scrollview working great but there is empty space under the rows (the yellow background is the scrollview background color)

enter image description here

second pic, I removed the grid height, and now, the grid just takes the scrollview height (500), and if my rows need more space, they are truncated

enter image description here

Also, my scrollview isn't even scrollable anymore

Do you guys have any idea ? Thanks :)

EDIT :

Here the structure, Grid with auto row height into height fixed scrollview

 <ScrollView HeightRequest="500" BackgroundColor="Yellow">
    <Grid x:Name="gridLignes" BackgroundColor="#E8E8E8">
                        <Grid.RowDefinitions>
                           <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                     
   </Grid>
</ScrollView>

As a workaround, I fixed my grid height to 2000, but there is useless empty space inside my scrollview :/

I think my issue come from the way I am working with the grid. I tried to put my grid outside the scrollview, let the default grid height, and my rows with auto height, and it's was still not working.

However, grid should take the space needed by it's childs, if rows are in auto height.

The way I am working with grid is :

-Creating a default template row. Inside each column, there are controls (entry, picker etc). Then,I add this template 4 time in my grid.

-When a value change, depending of the item selected, some text is displayed inside another column (that why I need auto height). To add this text, I am accessing to the grid child directly (grid.Children[i]) and change is value, so, the row was here before adding the text.

Maybe I need to remove the row, recreate it with the correct values, and add it again in my grid.

I will try this later, and will update on this case. Maybe someone will face the same issue as me

Solution

  • So, I mange to make it work !

    After a change on my editor, I check the height of each Editor in each row, and define my grid height with this value (and adding the row spacing of course).

    So, my grid as a fixed height (recalculated), and so my scrollview is scrollable, and nothing is truncated !

    If it can help someone else :)