Xaramin Forms Table loading issue

Question

Good morning,

I built an application using xaminals template. I created a table (with 312 rows and 4 columns) for one of the xaml files. If this file includes just one row and one column, the Tab will load as normal, but whenever I include the 340 rows, the Tab will take 15 to 20 seconds to load. I need to know please if this issue is due to the row high quantity or I am missing something.

The following is the code I have used:

            <Grid RowDefinitions="Auto,*" BackgroundColor="#2b608a">
                <ScrollView Grid.Row="1" Padding="4,0,4,2">
                    <Grid RowSpacing="3" ColumnSpacing="3">
                        <Grid.RowDefinitions >
                            <RowDefinition Height="30"/>
                            <RowDefinition Height="30"/>
                            <RowDefinition Height="30"/>
                            <RowDefinition Height="30"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions >
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="50" />
                            <ColumnDefinition Width="50" />
                            <ColumnDefinition Width="50" />
                        </Grid.ColumnDefinitions>

                        <!-- Row 1 -->
                        <BoxView BackgroundColor="#dcf0ff"/>
                        <Label Text="TEXT 01-01" FontAttributes="Bold" TextColor="#084390"
                                   VerticalOptions="Center" />
                        <BoxView Grid.Column="1" BackgroundColor="#dcf0ff" />
                        <Label Grid.Column="1"
                                   Text="TEXT 01-02" FontAttributes="Bold" TextColor="#084390"
                                   VerticalOptions="Center" HorizontalOptions="Center"/>
                        <BoxView Grid.Column="2" BackgroundColor="#dcf0ff"/>
                        <Label Grid.Column="2"
                               Text="TEXT 01-03" FontAttributes="Bold" TextColor="#084390"
                               VerticalOptions="Center" HorizontalOptions="Center"/>
                        <BoxView Grid.Column="3" BackgroundColor="#dcf0ff"/>
                        <Label Grid.Column="3" TextColor="#084390"
                               Text="TEXT 01-04" FontAttributes="Bold"
                               VerticalOptions="Center" HorizontalOptions="Center"/>

                        <!-- Rows 2-311 -->

                        <!-- Row 312 -->
                        <BoxView Grid.Row="311" BackgroundColor="#dcf0ff"/>
                        <Label Grid.Row="311" Padding="0,0,5,0"
                               Text="TEXT 02-01" TextColor="#092840" VerticalOptions="Center"/>
                        <BoxView Grid.Row="311"
                                 Grid.Column="1" BackgroundColor="#dcf0ff"/>
                        <Label Grid.Row="311" Padding="0,0,5,0"
                               Grid.Column="1"
                               Text="TEXT 02-02" TextColor="#092840" HorizontalOptions="Center" VerticalOptions="Center"/>
                        <BoxView Grid.Row="311"
                                 Grid.Column="2" BackgroundColor="#dcf0ff"/>
                        <Label Grid.Row="311" Padding="0,0,5,0"
                               Grid.Column="2"
                               Text="TEXT 02-03" TextColor="#092840" HorizontalOptions="Center" VerticalOptions="Center"/>
                        <BoxView Grid.Row="311"
                                 Grid.Column="3" BackgroundColor="#dcf0ff"/>
                    </Grid>
                </ScrollView>
            </Grid>

Thank you.

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

created a table (with 312 rows and 4 columns) for one of the xaml files.

The Grid layout should not be confused with tables, and is not intended to present tabular data. Unlike HTML tables, a Grid is intended for laying out content. For displaying tabular data, consider using a ListView, CollectionView, or TableView. Please see Gird's description:https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/grid

Based on your 312 rows and performance requirements, I recommend you to use ListView, CollectionView to achieve it, Your gird rows have same layout. You can create a ListView like following code(I use data-binding's way to achieve it).

   <StackLayout BackgroundColor="#2b608a">  
           <ListView ItemsSource="{Binding employees}" HasUnevenRows="True">  
               <ListView.ItemTemplate>  
                   <DataTemplate>  
                       <ViewCell>  
                           <StackLayout>  
                               <Grid RowSpacing="3" ColumnSpacing="3">  
                                   <Grid.ColumnDefinitions >  
                                       <ColumnDefinition Width="*" />  
                                       <ColumnDefinition Width="50" />  
                                       <ColumnDefinition Width="50" />  
                                       <ColumnDefinition Width="50" />  
                                   </Grid.ColumnDefinitions>  
                                   <BoxView BackgroundColor="#dcf0ff"/>  
                                   <Label Text="{Binding Text1}" FontAttributes="Bold" TextColor="#084390"  
                                       VerticalOptions="Center" />  
                                   <BoxView Grid.Column="1" BackgroundColor="#dcf0ff" />  
                                   <Label Grid.Column="1"  
                                       Text="{Binding Text2}" FontAttributes="Bold" TextColor="#084390"  
                                       VerticalOptions="Center" HorizontalOptions="Center"/>  
                                   <BoxView Grid.Column="2" BackgroundColor="#dcf0ff"/>  
                                   <Label Grid.Column="2"  
                                   Text="{Binding Text3}" FontAttributes="Bold" TextColor="#084390"  
                                   VerticalOptions="Center" HorizontalOptions="Center"/>  
                                   <BoxView Grid.Column="3" BackgroundColor="#dcf0ff"/>  
                                   <Label Grid.Column="3" TextColor="#084390"  
                                   Text="{Binding Text4}" FontAttributes="Bold"  
                                   VerticalOptions="Center" HorizontalOptions="Center"/>  
                               </Grid>  
                           </StackLayout>  
                       </ViewCell>  
                   </DataTemplate>  
               </ListView.ItemTemplate>  
           </ListView>  

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.