How to load SfDataGrid in a StackLayout?

SfDataGrid control can be loaded inside any layout such as GridLayout, StackLayout etc. If your requirement is to make the grid load inside a StackLayout, then you have to set the Horizontal and VerticalOptions of the SfDataGrid and its parent to “LayoutOption.FillAndExpand” based on the orientation of the container in which SfDataGrid is loaded.

Refer the following code example to load the SfDataGrid control inside a StackLayout. The VerticalOptions of the StackLayout and SfDataGrid alone is set as “FillAndExpand” as the default orientation of the StackLayout is vertical. In case, if the orientation of the StackLayout is horizontal, then you have to set the HorizontalOptions instead. In some case, you may have to set both the “VerticalOptions” and “HorizontalOptions” of the SfDataGrid based on its parent.

<ScrollView>
    <StackLayout VerticalOptions="FillAndExpand">
        <SearchBar Placeholder="UserName" TextChanged="searchBar_TextChanged" />
        <sfgrid:SfDataGrid x:Name="sfGrid"
                            AutoGenerateColumns="True"
                            ColumnSizer="Star"
                            ItemsSource="{Binding OrdersInfo}"
                            VerticalOptions="FillAndExpand" />
    </StackLayout>
</ScrollView>

Refer the following screenshot for the final outcome