可怕的 Silverlight 性能 - ListBox

Question

我正在尝试使用相当健壮的 DataTemplate 创建一个 ListBox。问题是，性能慢得难以想象。在我家的电脑上——大约 2.5 岁，绑定 80 行大约需要 4-6 秒。在我的工作计算机（64 位/双核）上，时间减少到大约 2.5 秒，但仍然 - 似乎真的很慢（150 行大约需要 4-5 秒）

所有数据都是纯POCO，随机生成的数据。此应用程序中绝对没有任何服务（目前）。数据的随机生成根本不需要任何时间 - 我在创建数据之后（粗略地）在 ObservableCollection 更新之前执行 MessageBox.Show。 （我什至尝试绑定到一个普通的旧列表 - 甚至更慢）。另外，我在 Chrome 和 IE 上都试过了。

好的，这是代码，如果我遗漏了任何内容，请告诉我。就像我说的，它是一个强大的 DataTemplate，但我认为这就是 SL / WPF 的重点——他们可以做这样很酷的事情。我当然希望我做错了什么 - 这些是我传递的儿童大小的数据量。

编辑 - 只是为了把答案放在首位，你没有理由告诉 ListBox 使用 StackPanel 作为 ItemsPanelTemplate - 它默认显示垂直堆叠的项目，但是，不仅指定这样的 StackPanel 是多余的，它也完全破坏了性能。我删除了 ItemsPanelTemplate，它工作得很好。

<ListBox ItemsSource="{Binding Path=BookSource_oc}" ItemTemplate="{StaticResource BookDataTemplateMedium}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" HorizontalAlignment="Stretch">
       <ListBox.ItemsPanel>
           <ItemsPanelTemplate>
               <StackPanel Margin="2" HorizontalAlignment="Stretch" x:Name="stackPanelItemsPanel">
               </StackPanel>
            </ItemsPanelTemplate>
       </ListBox.ItemsPanel>
</ListBox>

来自 app.XAML：

    <DataTemplate x:Key="BookDataTemplateMedium">
        <Border CornerRadius="3" BorderThickness="2" BorderBrush="Black" Background="White">
            <Grid Margin="3">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="140"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <!-- removing this just to be sure it's not cause of bad perf <Image Grid.Column="0" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Left" Source="{Binding MediumImgURI}" Margin="7,0,0,0"/>-->
                <StackPanel HorizontalAlignment="Left" Grid.Column="1" Margin="5,0,10,0">
                    <TextBlock FontWeight="Bold" TextTrimming="WordEllipsis" Foreground="Black" ToolTipService.ToolTip="{Binding CurrentBook.Title}" Text="{Binding CurrentBook.Title}"/>
                    <Grid Margin="0,10,0,0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="200"></ColumnDefinition>
                            <ColumnDefinition Width="270"></ColumnDefinition>
                            <ColumnDefinition Width="270"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="150"></RowDefinition>
                        </Grid.RowDefinitions>
                        <StackPanel Grid.Column="0">
                            <local:vwAmazonReviewsRightToLeft></local:vwAmazonReviewsRightToLeft>
                            <local:vwPublisherInfoWithDateLeftToRight Margin="0,5,0,0"></local:vwPublisherInfoWithDateLeftToRight>
                            <local:vwPagesInfo></local:vwPagesInfo>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock>Is Read </TextBlock>
                                <Image Margin="8,0,0,0" Stretch="None" Source="{Binding IsReadImgUri, Mode=OneWay}"></Image>
                            </StackPanel>
                            <HyperlinkButton Margin="0,5,0,0" NavigateUri="http://www.google.com" Content="View at Amazon"/>
                        </StackPanel>

                        <ListBox Grid.Column="1" Margin="0,2,0,0" ScrollViewer.HorizontalScrollBarVisibility="Disabled" VerticalAlignment="Top" BorderThickness="0" ItemsSource="{Binding CurrentBook.Subjects}" ItemTemplate="{StaticResource dataTemplateSubjectsLB}" />
                        <ListBox Grid.Column="2" Margin="10,2,0,0" ScrollViewer.HorizontalScrollBarVisibility="Disabled" VerticalAlignment="Top" BorderThickness="0" ItemsSource="{Binding CurrentBook.Authors}" ItemTemplate="{StaticResource dataTemplateAuthorsLB}" />
                    </Grid>
                </StackPanel>
            </Grid>
        </Border>
    </DataTemplate>

    <DataTemplate x:Key="dataTemplateSubjectsLB">
        <StackPanel>
            <StackPanel Orientation="Horizontal">
                <Image Source="Img/Bullets/Bullet_Purple.png"></Image>
                <TextBlock ToolTipService.ToolTip="{Binding Name}" Text="{Binding Name}"></TextBlock>
            </StackPanel>
        </StackPanel>
    </DataTemplate>

    <DataTemplate x:Key="dataTemplateAuthorsLB">
        <StackPanel>
            <StackPanel Orientation="Horizontal">
                <Image Source="Img/Bullets/Bullet_Red.png"/>
                <TextBlock ToolTipService.ToolTip="{Binding Name}" Text="{Binding Name}"/>
            </StackPanel>
        </StackPanel>
    </DataTemplate>

Answer 1

您已将默认 VirtualPanel 更改为 StackPanel。为了获得更好的性能，我建议使用默认的 ItemsPanel。

Answer 2

这是导致性能不佳的两个最常见原因：

• 难以计算的布局（在您的示例中很可能就是这种情况）。尝试设置固定的宽度和高度，避免拉伸。
• 在软件中呈现的像 DropShadow 这样的图形效果：也许像 Amazon-View 这样的组件会使用它们

您始终可以使用来自Wpf Performance Suite 的 Perforator 等性能工具来挖掘问题。它肯定会帮助你找到瓶颈！