How many items can we put in winrt listview

Question

I have list view with 34 items in it, it works fine if I put 20 items but when I put all then items and scrolldown, listview sends me back upward and white rectangle shows in place of items for sometime then item appears. It feels that it takes time to render.

After scrolling up and down several time it behaves well.

I am using observeable list as a source. I just want how many items can we add to listview and if we can only add 20 item then provide any link of tutorial to add more than 20 elements.

Ps. I have already tried lazy loading from a tutorial from internet but same happened.

Edit

<Grid Grid.Row="2" x:Name="ContentRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>

        </Grid.RowDefinitions>

        <ListView Margin="0 20 0 10" Name="violationListView" ItemsSource="{Binding ViolationList, Mode=TwoWay}" ItemContainerStyle="{StaticResource ListViewItemExpanded1}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <!--<StackPanel Margin="16 20 16 10" Orientation="Vertical">-->
                    <Border Margin="8 0 8 0" Style="{StaticResource BackgroundLightStyle}" >
                        <Grid >
                            <Grid.Resources>
                                <common:AmountStringConversion x:Key="FormatConverter" />
                                <common:ZeroToEmptyStringConverter x:Key="ZeroConverter" />
                            </Grid.Resources>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>

                            <StackPanel Grid.Row="0" Margin="8,0,0,10" Tapped="StackPanel_Tapped" HorizontalAlignment="Stretch" Orientation="Horizontal">
                                <Image Source="/Assets/Images/bullet.png" VerticalAlignment="Center" Width="20" ></Image>
                                <TextBlock Margin="10,03,0,0" VerticalAlignment="Center" HorizontalAlignment="Stretch"  Style="{StaticResource TextBoxHeadingStyle}" Text="{Binding TicketNumber, Converter={StaticResource FormatConverter}, ConverterParameter='Ticket Number {0}'}"></TextBlock>
                            </StackPanel>
                            <!--<Border Grid.Row="0" Margin="8,0,0,10" Tapped="StackPanel_Tapped" HorizontalAlignment="Stretch" Background="Transparent" />-->
                            <StackPanel Grid.Row="1" Margin="16 10 0 10" Orientation="Vertical" Visibility="{Binding DetailsVisibility, Mode=TwoWay}">
                                <TextBlock Style="{StaticResource ApplicationSubHeadingTextBlockStyle}" Text="" x:Uid="ViolationCreationDateTextBlock" />
                                <TextBlock Style="{StaticResource ApplicationSubHeadingContentTextBlockStyle}" Text="{Binding CreationDate}" />
                                <TextBlock Style="{StaticResource ApplicationSubHeadingTextBlockStyle}"  x:Uid="ViolationAcceptanceTextBlock" />
                                <TextBlock Style="{StaticResource ApplicationSubHeadingContentTextBlockStyle}" Text="{Binding AcceptanceDate}" />

                                <TextBlock Style="{StaticResource ApplicationSubHeadingTextBlockStyle}" x:Uid="TripDateTimeTextBlock" />
                                <TextBlock Style="{StaticResource ApplicationSubHeadingContentTextBlockStyle}" Text="{Binding ViolationDate}" />

                                <TextBlock Style="{StaticResource ApplicationSubHeadingTextBlockStyle}" x:Uid="TollGateLocationTextBlock"    />
                                <TextBlock Style="{StaticResource ApplicationSubHeadingContentTextBlockStyle}" Text="{Binding Gate}"/>


                                <TextBlock Style="{StaticResource ApplicationSubHeadingTextBlockStyle}" x:Uid="TollGateDirectionTextBlock"  />
                                <TextBlock Style="{StaticResource ApplicationSubHeadingContentTextBlockStyle}" Text="{Binding Direction}"/>

                                <TextBlock Style="{StaticResource ApplicationSubHeadingTextBlockStyle}"  x:Uid="AmountVoilationTextBox"  />
                                <TextBlock Style="{StaticResource ApplicationSubHeadingContentTextBlockStyle}" Text="{Binding Amount}" />

                                <TextBlock Style="{StaticResource ApplicationSubHeadingTextBlockStyle}"  x:Uid="ViolationStatusTextBlock"  />
                                <TextBlock Style="{StaticResource ApplicationSubHeadingContentTextBlockStyle}" Text="{Binding ViolationStatus}" />

                                <TextBlock Style="{StaticResource ApplicationSubHeadingTextBlockStyle}"  x:Uid="DueDateVoilationTextBlock"  />
                                <TextBlock Style="{StaticResource ApplicationSubHeadingContentTextBlockStyle}" Text="{Binding DisputeDate}" />

                                <TextBlock Style="{StaticResource ApplicationSubHeadingTextBlockStyle}"  x:Uid="DisputeNumberTextBlock"  />
                                <TextBlock Style="{StaticResource ApplicationSubHeadingContentTextBlockStyle}" Text="{Binding DisputeAppNumber, Converter={StaticResource ZeroConverter}, ConverterParameter='Ticket Number {0}'}" />

                                <TextBlock Style="{StaticResource ApplicationSubHeadingTextBlockStyle}"  x:Uid="PreffuredRefundMethodTextBlock"  />
                                <TextBlock Style="{StaticResource ApplicationSubHeadingContentTextBlockStyle}" Text="{Binding PreferredRefundMethod}" />

                                <TextBlock Style="{StaticResource ApplicationSubHeadingTextBlockStyle}"  x:Uid="VehicleImageTextBlock" Visibility="{Binding IsImageAvailable}" />
                                <StackPanel Margin="0,05,0,10" Orientation="Horizontal" Visibility="{Binding IsImageAvailable}" >
                                    <!--<Image Width="25" VerticalAlignment="Center" Height="Auto" Source="/Assets/Images/appbar.image.hdr.png" Tapped="Tap_ViewImage"/>-->
                                    <toolkit:ImageButton Width="25" VerticalAlignment="Center"  Stretch="Fill" NormalStateImageSource="/Assets/Images/appbar.image.hdr.png" GenerateMissingImages="True" Click="Tap_ViewImage" />
                                    <TextBlock x:Uid="VehicleImageTextBlock" Margin="10,0,0,0" Style="{StaticResource ApplicationSubHeadingContentTextBlockStyle}" VerticalAlignment="Center" Tapped="Tap_ViewImage" />
                                </StackPanel>
                                <TextBlock Style="{StaticResource ApplicationSubHeadingTextBlockStyle}"  x:Uid="AddToDisputeTextBlock"  />

                                <ToggleSwitch Name="TagActivationAgreeToggle" x:Uid="TagActivationAgreeToggle"  IsEnabled="{Binding AllowDispute}" IsOn="{Binding AddToDispute , Mode=TwoWay}" />
                            </StackPanel>
                        </Grid>
                    </Border>
                    <!--</StackPanel>-->
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>


        <Grid Grid.Row="1" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Uid="CreateButton" Name="CreateButton" Grid.Column="0" HorizontalAlignment="Stretch" Margin="5 0"  Style="{StaticResource ApplicationThemeButtonStyle}" Click="CreateButton_Click" />

        </Grid>
    </Grid>

In on navigatedTo function it recieves list from its previous screen, which returns normal list, so it converts it into observable List first then assign to list like this.

defaultViewModel.Add("ViolationList", violations);

Answer 1

Setting list view height Auto and wrap its around scrollviewer will resolve this problem.