包含在 ScrollViewer 中的 LongListSelector 性能非常差答案

【问题标题】：LongListSelector performance is very bad when enclosed in ScrollViewer包含在 ScrollViewer 中的 LongListSelector 性能非常差
【发布时间】：2013-01-18 21:41:00
【问题描述】：

我有一个UserControl，它需要在顶部包含一堆控件，在它们下方包含一个LongListSelector。整个UserControl 的总高度可能（并且几乎总是）超过屏幕高度，在这种情况下，整个UserControl 必须是可滚动的。

我目前的设置如下：

<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>

这个解决方案满足了我的需求，但也有一个大问题：当前LongListSelector 在它包含的项目数量相当大的情况下确实需要很长时间才能加载。处理 300 个项目需要 8 秒，在此期间整个 UI 都被阻止。如果我删除除LongListSelector 之外的所有内容，如下所示：

<staff:UserContentControl 
    ...>

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

然后LongListSelector 几乎立即加载，即使项目数量显着增加。但显然我需要它上面的其他控件，所以问题是我能做些什么来解决这个问题？

（还有相关问题：我担心LongListSelector 内ScrollViewer 可能会导致双滚动或类似的事情，但最终在这方面一切都很好。我不确定LongListSelector 是否知道这一点它在其他可滚动控件中，或者如果发生其他我不知道的事情。一些解释为什么它工作正常，虽然很慢，但将不胜感激。）

【问题讨论】：

你做错了。
@MathiasLykkegaardLorenzen :)

标签： performance xaml windows-phone-8 longlistselector

【解决方案1】：

不要使用滚动查看器，因为它会使 longlistselector 认为它有一个无限高的可用屏幕并渲染它的所有项目。为了解决您的用例，请使用 Header 和 Footer 属性在列表项上方或下方添加数据。

【讨论】：

【解决方案2】：

您不能强制 ScrollViewer 虚拟化 LongListSelector 项。

所以你只需要通过 LongListSelector 来模仿它的行为。

使第一个项目包含 StackPanel（第一个项目模板）中的所有您需要的元素。其他元素将是基本的 LongListSelector 元素（第 2 个 itemtemplate）。

这里解释了如何为项目设置不同的模板：Styling a selected ListViewItem in Windows 8 CP

【讨论】：