StackLayout when loading Xamarin.Forms.DataGrid

Question

Recently I used Xamarin.Forms.DataGrid in my own Xamarin project.

When I insert more than one component in a StackLayout, I find that the datagrid just does not display the data except the header.

Do anyone know what I have done something wrong?

The XAML code is posted here:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:dg="clr-namespace:Xamarin.Forms.DataGrid;assembly=Xamarin.Forms.DataGrid"
             x:Class="Spray.Views.QC2">
    <ContentView>
        <StackLayout>
            <Entry x:Name="entryName" Placeholder="Name" Text="lai"/>
            <dg:DataGrid x:Name="dataGridView1"  ItemsSource="{Binding Jobs}" SelectionEnabled="True" RowHeight="70" HeaderHeight="50"
                     BorderColor="#CCCCCC" HeaderBackground="#E0E6F8" PullToRefreshCommand="{Binding RefreshCommand}" 
                     IsRefreshing="{Binding IsRefreshing}" ActiveRowColor="#8899AA" ItemSelected = "onItemSelected">
                <dg:DataGrid.Columns>
                    <dg:DataGridColumn Title="PN" PropertyName="pn" Width="2*"/>
                    <dg:DataGridColumn Title="Quantity" PropertyName="quantity" Width="1*"/>
                    <dg:DataGridColumn Title="Worker" PropertyName="worker" Width="1*"/>
                    <dg:DataGridColumn Title="QC Sign" PropertyName="signature" Width="1*"/>
                    <dg:DataGridColumn Title="Time" PropertyName="time" Width="1*"/>
                </dg:DataGrid.Columns>

                <dg:DataGrid.RowsBackgroundColorPalette>
                    <dg:PaletteCollection>
                        <Color>#F2F2F2</Color>
                        <Color>#FFFFFF</Color>
                    </dg:PaletteCollection>
                </dg:DataGrid.RowsBackgroundColorPalette>
            </dg:DataGrid>
        </StackLayout>
    </ContentView>
</ContentPage>

Thank you for any help!

BR, Terry

Besides, I have tried Jason advice that to add the height value and VerticalOption value as below but the result is still the same.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:dg="clr-namespace:Xamarin.Forms.DataGrid;assembly=Xamarin.Forms.DataGrid"
             x:Class="Spray.Views.QC2">
    <ContentView>
        <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" HeightRequest="300">
            <Entry x:Name="entryName" Placeholder="Name" Text="lai"/>
            
            <dg:DataGrid x:Name="dataGridView1"  ItemsSource="{Binding Jobs}" SelectionEnabled="True" RowHeight="70" HeaderHeight="50"
                    BorderColor="#CCCCCC" HeaderBackground="#E0E6F8" PullToRefreshCommand="{Binding RefreshCommand}" 
                    IsRefreshing="{Binding IsRefreshing}" ActiveRowColor="#8899AA" ItemSelected = "onItemSelected">
                <dg:DataGrid.Columns>
                    <dg:DataGridColumn Title="PN" PropertyName="pn" Width="2*"/>
                    <dg:DataGridColumn Title="Quantity" PropertyName="quantity" Width="1*"/>
                    <dg:DataGridColumn Title="Worker" PropertyName="worker" Width="1*"/>
                    <dg:DataGridColumn Title="QC Sign" PropertyName="signature" Width="1*"/>
                    <dg:DataGridColumn Title="Time" PropertyName="time" Width="1*"/>
                </dg:DataGrid.Columns>

                <dg:DataGrid.RowsBackgroundColorPalette>
                    <dg:PaletteCollection>
                        <Color>#F2F2F2</Color>
                        <Color>#FFFFFF</Color>
                    </dg:PaletteCollection>
                </dg:DataGrid.RowsBackgroundColorPalette>
            </dg:DataGrid>

        </StackLayout>
    </ContentView>
</ContentPage>

Answer 1

You can try to add a StackLayout inside of your ContentPage and put the component and your DataGrid as the children of it.

And you also need to set the HeightRequest for your ContentView.

Please refer to the following code:

<?xml version="1.0" encoding="utf-8"?> 
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:dg="clr-namespace:Xamarin.Forms.DataGrid;assembly=Xamarin.Forms.DataGrid"
             x:Class="XFDataGrid.MainPage">

    <StackLayout VerticalOptions="StartAndExpand"  Orientation="Vertical" >

       <Button  Text="test" />

        <ContentView BackgroundColor="Yellow" HeightRequest="1000">

            <!-- Place new controls here -->
            <dg:DataGrid ItemsSource="{Binding Professionals}" SelectionEnabled="True" SelectedItem="{Binding SelectedProfesstional}" RowHeight="70" HeaderHeight="50"
                    BorderColor="#CCCCCC" HeaderBackground="#E0E6F8" PullToRefreshCommand="{Binding RefreshCommand}" IsRefreshing="{Binding IsRefreshing}" ActiveRowColor="#8899AA">
                <!--<x:Arguments>
                <ListViewCachingStrategy>RetainElement</ListViewCachingStrategy>
            </x:Arguments>-->
                <!--<dg:DataGrid.HeaderFontSize>
                <OnIdiom x:TypeArguments="x:Double">
                    <OnIdiom.Tablet>15</OnIdiom.Tablet>
                    <OnIdiom.Phone>12</OnIdiom.Phone>
                </OnIdiom>
            </dg:DataGrid.HeaderFontSize>-->
                <dg:DataGrid.Columns>
                    <dg:DataGridColumn Title="ID" PropertyName="Id" Width="1*"></dg:DataGridColumn>
                    <dg:DataGridColumn PropertyName="Name" Width="2*">
                        <dg:DataGridColumn.FormattedTitle>
                            <FormattedString>
                                <Span Text="Name" FontSize="13" TextColor="Black" FontAttributes="Bold"/>
                            </FormattedString>
                        </dg:DataGridColumn.FormattedTitle>
                    </dg:DataGridColumn>
                    <dg:DataGridColumn Title="Desigination" PropertyName="Desigination" Width="2*"/>
                    <dg:DataGridColumn Title="Domain" PropertyName="Domain" Width="2*"/>
                    <dg:DataGridColumn Title="Exp" PropertyName="Experience" Width="1*"/>
                </dg:DataGrid.Columns>
                <dg:DataGrid.RowsBackgroundColorPalette>
                    <dg:PaletteCollection>
                        <Color>#F2F2F2</Color>
                        <Color>#FFFFFF</Color>
                    </dg:PaletteCollection>
                </dg:DataGrid.RowsBackgroundColorPalette>
            </dg:DataGrid>

        </ContentView>
    </StackLayout>
</ContentPage>