Question

I am trying to show around 1400items in a LongListSelector. Though it displays items correctly, at times, when I scroll down to the bottom so quickly and then starts scrolling up, it doesn't show all the items, it hardly shows 100items despite the content of binded collection is not changed in the backend.

this is my UI code:

<phone:PanoramaItem Header="Monitors" Margin="{StaticResource PanoramaItemMargin}" HeaderTemplate="{StaticResource PanoramaItemHeaderTemplate}">
                <phone:LongListSelector ItemsSource="{Binding MonitorRenderList}" VirtualizingStackPanel.VirtualizationMode="Recycling" Margin="-15,-15,0,0">
                    <phone:LongListSelector.ItemTemplate>
                        <DataTemplate>
                            <common:MonitorListTemplateSelector Content="{Binding}" HorizontalAlignment="Left">
                                <common:MonitorListTemplateSelector.MonitorBucket>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding titleUpperCase}" Margin="0,5,10,5" FontWeight="Bold" Foreground="{StaticResource AppForegroundHighlightTextBrush}" TextWrapping="NoWrap" TextTrimming="WordEllipsis" FontSize="{StaticResource RowHeaderFontSize}"/>
                                    </DataTemplate>
                                </common:MonitorListTemplateSelector.MonitorBucket>
                                <common:MonitorListTemplateSelector.MonitorDetails>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding monitorName}" Margin="0,5,10,5" FontSize="{StaticResource TextRowFontSize}" Foreground="{StaticResource AppForegroundNormalTextBrush}" TextWrapping="NoWrap" TextTrimming="WordEllipsis">
                                            <i:Interaction.Triggers>
                                                <i:EventTrigger EventName="Tap">
                                                    <i:InvokeCommandAction Command="{Binding DataContext.SelectedMonitorDetailsCommand, ElementName=LandingPageRoot, Mode=OneTime}" CommandParameter="{Binding}"/>
                                                </i:EventTrigger>
                                            </i:Interaction.Triggers>
                                        </TextBlock>
                                    </DataTemplate>
                                </common:MonitorListTemplateSelector.MonitorDetails>
                                <common:MonitorListTemplateSelector.EmptyLastItem>
                                    <DataTemplate>
                                        <TextBlock Height="72" />
                                    </DataTemplate>
                                </common:MonitorListTemplateSelector.EmptyLastItem>
                            </common:MonitorListTemplateSelector>
                        </DataTemplate>
                    </phone:LongListSelector.ItemTemplate>
                </phone:LongListSelector>
            </phone:PanoramaItem>

EDIT: this problem seems to occur only when LongListSelector is contained in Panorama even if there is just a single panoramaItem, but when I move it out of the panorama it doesn't happen.

Was it helpful?

Solution

This is normal behavior and it is caused from the build-in virtualization of the control. When you data bound collections are too large, virtualization kicks in order to keep the performance of the control intact.

Without UI virtualization the entire data set would be kept in memory and an item container would be created for each one of your items in the list, crippling the performance of your app and possibly throwing an OutOfMemoryException that would terminate it.

With UI virtualization the data set is still kept in memory, but an item container is created only when the item is nearly ready to be shown in the UI, keeping the memory consumption low.

By default all items controls enable UI virtualization.

EDIT

Taken from Daniel Vaughan's - Windows Phone 8 Unleashed, SAMS Publishing

As the Panorama is intended to coax the user to explore, it should show content that is interesting and specific to the user. The user should also not be overloaded with too much content; think white space and not loads of data. The Panorama should be thought of as a starting place, containing data and links that take the user to more detailed pages of content, pages that may include a Pivot for example. The user is then able to leave the exploratory style of the Panorama for the more focused style of the Pivot.

also from this link: http://ux.artu.tv/?p=234

Panoramas can’t hold large amounts of data. For performance and experience reasons do not use Panoramas if you have the need to present a large amount of content for users. How much is too much? In general stay within 3 to 5 Panorama panels. Use ListBoxes that use a maximum of 15-20 items. Panoramas are not virtualized (memory managed) so think of them almost as big flat images than dynamic content controls (like Pivots). Again, they are more of Magazine Covers - beautiful and immersive.

OTHER TIPS

Each and every Silverlight controls for the Windows Phone have size restriction. It can be displayed maximum 2048 pixels in both Width and Height..

Your problem may occur due to this reason. Have you checked ?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top