c# - 如何创建一个快速加载包装列表框？

Question

我制作了一个不错的小型三项宽列表，其中包含可用作开关的磁贴。它看起来像这样:

看起来不错吧？嗯，我在垂直滚动列表中有大约 130 个这样的图 block ，加载需要很长时间。根据性能分析工具，每个元素大约需要 18 毫秒来渲染 - 这让我的渲染时间大约为 2.3 秒。在设备上，它通常是那个时间的两倍。这并不是真正的危机，但在绘制这些元素之前，UI 完全是黑色的并且没有响应。

在网上进行一些研究后，我意识到这是因为工具包中的 WrapPanel 控件没有虚拟化它的项目 - 从而使 GPU 一次渲染所有对象(在此过程中耗尽大量内存)。

现在，有什么方法可以让这一切变得更快吗？

XAML:

<ListBox x:Name="ChannelsListBox" Grid.Row="2" Margin="0,40,0,0">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <toolkit:WrapPanel />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.Template>
        <ControlTemplate>
            <ItemsPresenter />
        </ControlTemplate>
    </ListBox.Template>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid x:Name="ChannelTile" Margin="6,6,6,6" Tap="ChannelTile_Tap">
                <!-- context menu code removed -->
                <Rectangle Width="136" Height="136" Fill="{StaticResource LightGrayColor}" />    
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

ListBox 的 ItemsSource 是在代码隐藏中设置的 - 如果您想知道的话。

Answer 1

好吧，如果您从另一个线程异步填充列表框，就可以避免无响应的 UI。

编辑2:

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();

        /* In the xaml code:
           <ListBox x:Name="ChannelsListBox" ItemsSource="{Binding ListOfTestClasses}" ...
        */

        var vm = new MainPageViewModel();
        DataContext = vm;

        vm.StartLoadingDataAsync(10000);
    }
}

public class MainPageViewModel
{
    public ObservableCollection<TestClass> ListOfTestClasses { get; set; }
    private BackgroundWorker workerThread;
    public MainPageViewModel()
    {
        ListOfTestClasses = new ObservableCollection<TestClass>();
        workerThread = new BackgroundWorker();
        workerThread.DoWork += new DoWorkEventHandler((object sender, DoWorkEventArgs e) =>
        {
            for (int i = 0; i < (int)e.Argument; i++)
            {
                Deployment.Current.Dispatcher.BeginInvoke(() =>
                {
                    ListOfTestClasses.Add(new TestClass { Text = "Element " + (i + 1) });
                });

                Thread.Sleep(150);
            }
        });
    }

    public void StartLoadingDataAsync(int numberOfElements)
    {
        workerThread.RunWorkerAsync(numberOfElements);   
    }
}

public class TestClass
{
    public string Text { get; set; }
}