LongListSelector performance is very bad when enclosed in ScrollViewer

Question

I have a UserControl that needs to contain a bunch of controls on top and a LongListSelector below them. Total height of the whole UserControl may (and almost always will) exceed the screen height and in that case a whole UserControl must be scrollable.

My current setup is as follows:

<staff:UserContentControl 
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="clr-namespace:MyApp.Controls"
    xmlns:staff="clr-namespace:MyApp.Helpers"
    x:Class="MyApp.Controls.RemoteHomePage"

    DataContext="{Binding RelativeSource={RelativeSource Self}}"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}">

    <ScrollViewer>
        <ScrollViewer.Content>
            <StackPanel>
                <TextBlock Txt="Text1" Sign="@" />
                <TextBlock Txt="Text2" Sign="#" />
                <controls:Divider />

                <TextBlock Txt="Text3" Sign="~" />
                <TextBlock Txt="Text4" Sign="~" />
                <controls:TextDivider Text="Divider text" />

                <phone:LongListSelector ItemsSource="{Binding Items}">
                    <phone:LongListSelector.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Title}" />
                        </DataTemplate>
                    </phone:LongListSelector.ItemTemplate>
                </phone:LongListSelector>
            </StackPanel>
        </ScrollViewer.Content>
    </ScrollViewer>
</staff:UserContentControl>

This solution satisfies my needs but also there's a big problem: currently LongListSelector takes really a lot of time to load when amount of items it contains is reasonably large. It takes 8 seconds to process 300 items and during that time the whole UI is blocked. If I remove everything but LongListSelector, like so:

<staff:UserContentControl 
    ...>

    <phone:LongListSelector ItemsSource="{Binding Items}">
        <phone:LongListSelector.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Title}" />
            </DataTemplate>
        </phone:LongListSelector.ItemTemplate>
    </phone:LongListSelector>
</staff:UserContentControl>

then LongListSelector loads almost immediately even with significantly larger amount of items. But obviously I need those other controls above it so the question is what can I do solve this issue?

(Also related question: I was worried that LongListSelector inside ScrollViewer could cause double scrolling or something like that but eventually everything turned out just fine in this regard. I'm not sure if LongListSelector somehow knows that it is inside other scrollable control or if something else happens that I'm not aware of. Some explainantion why it works fine, although very slow, would be much appreciated.)

Answer 1

Don't use scroll viewer since it will make the longlistselector think it has an infinitely tall screen available and render all its items. Instead to solve your usecase use the Header and Footer properties to add data above or below your list items.