Forum› Xamarin.Forms

How to set Height of a Grid to "Auto" not the static value ?

Sourav2903Sourav2903 Member ✭✭
in Xamarin.Forms

Main Query => I have created a listview of certain data and there the data is coming from backend code( Accessing some API ).And presents the
elements of listview with some lebel in MainPage.xaml in a grid format. The Height of Grid is not adjusting with whole Grid
content automatically.
I set HeightRequest = 50, But as a result some data is pushed under the bottom line of the Grid.
I want the height of the grid to adjust the space needed to display different size of the grid value and to compact it,will be No pushed
under data.
** Simplification => How to set the grid height to Auto ?**

Tagged:

Answers

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    <Grid VerticleOptions = "StartAndExpand"/>

  • mwasimmwasim USMember ✭✭

    @Sourav2903 can you share the example code with Grid. We can set "Auto" as height of the row, for example the grid below shows a textbox and a button in the first and second row. And the rest of the space is taken by the ListView in the 3rd row.

    <Grid Padding="5" RowSpacing="1" ColumnSpacing="1">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />            
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Entry Placeholder="Enter Item name" Grid.Row="0" />

        <Button Text="Save Item" Grid.Row="1" />        

        <ListView x:Name="ItemsList" Grid.Row="2">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell Height="30">
                        <StackLayout Padding="5">
                            <Label Text="{Binding ItemName}"/>
                        </StackLayout>                        
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    Key points there:
    The Grid will auto-adjust size automatically to fit its content BY DEFAULT. If you are overriding the HeightRequest then it will stop doing that and do what you tell it.
    You can set the Height of a Grid.Row - but you're talking about setting the Height of the Grid itself.

    Stop trying to set the Height of the Grid and let it do its job. Just worry about the content Rows and Columns.

  • Sourav2903Sourav2903 Member ✭✭

    @ClintStLaurent Hey..!! Thanks for paying attention to my problem. As per your reply I
    1. Removed HeightRequest
    2. Modified VerticalOptions of Grid to StartAndExpand

    But still same result as earlier.

  • Sourav2903Sourav2903 Member ✭✭

    @ClintStLaurent I got your point.Proceeding to solve the problem keeping that in mind. Thank you..!!

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    @Sourav2903 said:
    @ClintStLaurent Hey..!! Thanks for paying attention to my problem. As per your reply I
    1. Removed HeightRequest
    2. Modified VerticalOptions of Grid to StartAndExpand

    But still same result as earlier.

    A screen shot of what you're getting... especialy if you can mark what you want versus what you get will help others envision the problem. That's the thing about UI: Its a very visual issue.

  • Sourav2903Sourav2903 Member ✭✭

    This is I am getting.But there are 3 more row in right side column under Date3. They are not showing pushed under the grid bottom line.

    I want to Make them all visible and the grid height will adjust as per the data in row of each column and The Edit Student Details will be in first column just left of last line of right side column.

  • Sourav2903Sourav2903 Member ✭✭

    @ClintStLaurent Hey..Plaese reply me.Here's the problem I am getting.

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    @Sourav2903 said:
    @ClintStLaurent Hey..Plaese reply me.Here's the problem I am getting.

    1 - Can you provide the XAML markup used to create that latest layout from your screenshot?
    2 - Do I understand correctly that the problem is:
    • There is more content after Date3 block, but the Grid is not expanding to show it.
    Is that right?
    My first thought is: Since that's a list of dates, why not just put in a ListView to show them all?

  • xamboyxamboy Member ✭

    @Sourav2903 use ScrollView as a parent for Grid

Sign In or Register to comment.