DataGrid and Scrolling

Thanks for the response.

I put the control in the mainpage.xaml that I am currently testing with. Looks like:

Doesnt seem to want to go outside the Scrollview tag.

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns=http://schemas.microsoft.com/dotnet/2021/maui

             xmlns:x=http://schemas.microsoft.com/winfx/2009/xaml

             xmlns:telerik=http://schemas.telerik.com/2022/xaml/maui

             x:Class="MauiApp1.MainPage">

    <ScrollView>

        <VerticalStackLayout 

            Spacing="25" 

            Padding="30,0" 

            VerticalOptions="Center">

            <Image

                Source="logospectrotel.png"

                SemanticProperties.Description="Welcome to Spectrotel EscalationMgr!"

                HeightRequest="200"

                HorizontalOptions="Center" />

            <Label 

                Text="Welcome!"

                SemanticProperties.HeadingLevel="Level1"

                FontSize="32"

                HorizontalOptions="Center" />

            <!--<Label

                Text="Welcome to .NET Multi-platform App UI"

                SemanticProperties.HeadingLevel="Level2"

                SemanticProperties.Description="Welcome to dot net Multi platform App U I"

                FontSize="18"

                HorizontalOptions="Center" />-->

            <Button 

                x:Name="RefreshBtn"

                Text="Refresh"

                SemanticProperties.Hint="Click me to refresh the Data grid view"

                Clicked="OnRefreshClicked"

                HorizontalOptions="Center" />

            <!--<ListView ItemsSource="{Binding Depts}"

                ItemSelected="lvDeptOnItemSelected"

                x:Name="lvDepts"

                SemanticProperties.Hint="All the departments listed">

                <ListView.ItemTemplate>

                    <DataTemplate>

                        <TextCell

                            Text="{Binding Result}"

                            Detail="{Binding Value}"

                        />

                    </DataTemplate>

                </ListView.ItemTemplate>

            </ListView>-->

            <Label 

                Text="Depts:"

                SemanticProperties.HeadingLevel="Level2"

                FontSize="32"

                HorizontalOptions="Start" />

            <telerik:RadComboBox ItemsSource="{Binding Depts}"

                                 DisplayMemberPath="Result" 

                                 x:Name="rcbDepts"

                                 SelectionChanged="rcbDeptOnItemSelected"

                                 />

            <Label 

                Text="Products:"

                SemanticProperties.HeadingLevel="Level2"

                FontSize="32"

                HorizontalOptions="Start" />

            <telerik:RadComboBox ItemsSource="{Binding Products}"

                                 DisplayMemberPath="Result" 

                                 x:Name="rcbProducts"

                                 SelectionChanged="rcbProductsOnItemSelected"

                                 />

            <!--<ListView ItemsSource="{Binding Products}"

                x:Name="lvProducts"

                SemanticProperties.Hint="All the Products listed">

                <ListView.ItemTemplate>

                    <DataTemplate>

                        <TextCell

                            Text="{Binding Result}"

                            Detail="{Binding Value}"

                        />

                    </DataTemplate>

                </ListView.ItemTemplate>

            </ListView>-->

            <StackLayout RadioButtonGroup.GroupName="Views"

                         Orientation="Horizontal">

                <RadioButton Content="Row" Value="Row" IsChecked="true" CheckedChanged="rbgViewsOnBtnCheckedChanged_Row"></RadioButton>

                <RadioButton Content="Contacts"  Value="Contacts" CheckedChanged="rbgViewsOnBtnCheckedChanged_Contacts"></RadioButton>

            </StackLayout>

            <Label 

                Text="Details:"

                SemanticProperties.HeadingLevel="Level3"

                FontSize="32"

                HorizontalOptions="Start" />

            <telerik:RadDataGrid x:Name="datagrid">

                <telerik:RadDataGrid.RowBackgroundStyle>

                    <telerik:DataGridBorderStyle BackgroundColor="AliceBlue"

                                                 BorderColor="DarkOrchid"

                                                 BorderThickness="1"/>

                </telerik:RadDataGrid.RowBackgroundStyle>

                <telerik:RadDataGrid.AlternateRowBackgroundStyle>

                    <telerik:DataGridBorderStyle BackgroundColor ="LightBlue"

                                                 BorderThickness="1"

                                                 BorderColor="BlanchedAlmond"/>

                </telerik:RadDataGrid.AlternateRowBackgroundStyle>

                <telerik:RadDataGrid.SelectionStyle>

                    <telerik:DataGridBorderStyle BackgroundColor="SeaGreen"

                                                 BorderColor="Wheat"

                                                 BorderThickness="2"/>

                </telerik:RadDataGrid.SelectionStyle>

            </telerik:RadDataGrid>

            <!--<CollectionView ItemsSource="{Binding Details}"

                            ItemsLayout="VerticalGrid"

                            x:Name="gvDetails"

                            HorizontalScrollBarVisibility="Always"

                            VerticalScrollBarVisibility="Always">

                <CollectionView.ItemTemplate>

                    <DataTemplate>

                        <Grid Padding="10">

                            <Label Text="{Binding Dept}"

                                   FontAttributes="Bold"

                                   HorizontalTextAlignment="Start"                                    

                                  />

                            <Label Grid.Column="1"

                                   Text="{Binding Product}" />

                            <Label Grid.Column="2"

                                   Text="{Binding EscalLvl}"  />

                            <Label Grid.Column="3"

                                   Text="{Binding Name}" HorizontalTextAlignment="End" />

                        </Grid>

                    </DataTemplate>

                </CollectionView.ItemTemplate>

            </CollectionView>-->

        </VerticalStackLayout>

    </ScrollView>

</ContentPage>

Hi,

How much experience do you have with XAML in general? I want to make sure I am providing you with the correct information that you can use. If you're not familiar with the different layout types like Grid, etc, I highly recommend taking this great starting course Build mobile and desktop apps with .NET MAUI - Learn | Microsoft Docs.

Okay, onto the issue at hand.

You cannot put two children in the root of some thing that can only have one child.  In the case of ContentPage, you can only have one child... so you cant put both a DataGrid AND a ScrollView. It has to be only the DataGrid or some other child that allows for multiple children... a Grid is the best option for the root element.

However, you do not want to even use ScrollView or StackLayout for that root element when you are using UI virtualization. So a Grid is the best option for the root element in this case.

You can do something like this instead. The root element is a Grid, which lets you put things into rows. Most importantly you can put the DataGrid into the star-sized row, and keep the other stuff inside the VerticalStackLayout.

Thanks.

Will resturcture that.

And yes very new to this.

Old windows desktop dev trying this stuff out.

Welcome to MAUI! I am also a long time Windows desktop dev myself, here are some off-the-top-of-my-head tips.

• If you're coming from WPF, your XAML experience does apply a little bit, but things don't always behave like you'd expect. For example, you would expect a MAUI StackLayout to work like a WPF StackPanel, but there are many things that do not provide "outward pressure" to expand the StackLayout. I recommend avoiding StackLayout unless you're explicitly intending to squeeze all those children together. Otherwise, use Grid with row definitions, they're more dynamic and work better across multiple form factors.
• If you're coming from WinForms, your C# and .NET experience will help. Many things in .NET 6 are the same as you had in .NET Framework, they're just faster and easier to use now. I recommend taking advantage of async/await, it's super-easy multi-threading.
• If you're coming from MFC/win32, etc. There isn't much to compare in terms of GUI or .NET comparison. However, your general understanding of being careful with system resources and not over allocating objects will be very handy when you run your app on mobile.

Finally, that Microsoft Learn path I linked to is a really good one to become familiar with everything you need to get started. It's a nice 5 hours of content in total, but you can complete the modules at your own pace.

For now, my best recommendation for you is to use temporary background colors on things you put on the screen. This is the most intuitive way to really understand where/why things get rendered. For example StackLayout BackgroundColor=Red will show you exactly where it starts and ends.