Syncfusion MAUI DataGrid and VerticalStackLayout

Question

I would like to add label above Syncfusion Datagrid but the label is hidden when I run the app in the following page.

See the following repos for complete app.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DataGrid.Views.OrderInfoRepositoryView"
             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid"
             xmlns:local="clr-namespace:DataGrid"
             Title="Order Info Repository View">


    <ContentPage.BindingContext>
        <local:OrderInfoRepositoryViewModel x:Name="viewModel" />
    </ContentPage.BindingContext>

    <ContentPage.Content>

        <VerticalStackLayout Margin="20"
                             Spacing="10">

            <Label Text="OrderInfo"
                   Margin="10,10,10,10"
                   TextColor="White"
                   BackgroundColor="Red"/>

            <syncfusion:SfDataGrid x:Name="dataGrid"
                                   ItemsSource="{Binding OrderInfoCollection}">
            </syncfusion:SfDataGrid>
        
        </VerticalStackLayout>

    </ContentPage.Content>

Did try the following but same result.

    <Label Text="OrderInfo"
           Margin="10,10,10,10"
           TextColor="White"
           BackgroundColor="Red"/>

    <syncfusion:SfDataGrid x:Name="dataGrid"
                           ItemsSource="{Binding OrderInfoCollection}">
    </syncfusion:SfDataGrid>

</VerticalStackLayout>

Here Android screenshot

Added LineHeight and fontSize. No change

Tested with HeightRequest. No change.

Answer 1

It appears that you have set the Content for the ContentPage as DataGrid in OrderInfoRepositoryView.xaml.cs file. Please refer to the below file,

https://github.com/JeanMarcFlamand/MauiSyncFusionExamples/blob/master/DataGrid/Views/OrderInfoRepositoryView.xaml.cs#L12

You are adding the DataGrid as the content of the page in code behind i.e., OrderInfoRepositoryView constructor. That’s why the DataGrid alone is displaying without Label. We request that you remove the codes inside the OrderInfoRepositoryView constructor to overcome the issue.