渲染性能:GridView与代码生成的UI

本文关键字：代码生成 UI GridView 性能 | 更新日期: 2023-09-27 18:21:45

在使用Windows Phone 7的旧日子里，我成功地编写了一个很长的代码，以模仿某种WrapPanel从代码后面生成一个UI，在左边显示小时，在右边列出所有分钟（用于出发数据）。当添加了8个条目时，它创建了一个新行。

它的结构看起来像这样：

  • StackPanel（垂直）：包含不同时间的所有行
  • StackPanel（水平）：
    • 文本块：小时
    • StackPanel（垂直）：包含水平StackPanel，每个StackPanel存储8个文本块，其中包含分钟

结果示例：

08  05 10 15 20 25 30 35 40
    45 50 55
09  10 20 30 40 50

对于WindowsPhone8.1，我想我应该使用带有分组的GridView，而不是更新以前的代码。这样我就可以使用绑定的所有强大力量。然而，GridView渲染大约180-200个文本块大约需要2-3秒，这有点令人失望。

<CollectionViewSource x:Name="DepartureData" Source="{Binding DepartureData}" IsSourceGrouped="True" ItemsPath="Entries" />
<GridView x:Name="listTimetable"
          ItemsSource="{Binding Source={StaticResource DepartureData}}"
          Grid.Column="1">
    <GridView.GroupStyle>
        <GroupStyle HidesIfEmpty="True">
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding FormattedHour}" 
                               Foreground="Black" FontSize="20" FontWeight="Bold"
                               HorizontalAlignment="Center"
                               Margin="0,0,15,0" />
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
        </GroupStyle>
    </GridView.GroupStyle>
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid GroupHeaderPlacement="Left" Orientation="Horizontal" ItemHeight="40" ItemWidth="34" />
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
    <GridView.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding FormattedMinute}"
                       Style="{StaticResource TimetableDataActive}" />
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

从代码背后生成UI会带来更好的性能，但这无疑会使维护代码变得更加困难。GridView和代码隐藏解决方案之间时间差异巨大的原因可能是什么？也许绑定本身会减慢渲染过程，或者GridViewItems附带的ContentPresenters、Borders等的数量会增加？

渲染性能:GridView与代码生成的UI

好吧，当我写这个问题时，最后一句话刚刚出现在我的脑海中，它似乎已经回答了它。

GridViewItem的样式包含许多-有时是不必要的-元素。边框、占位符、选择框等。您可以在以下位置进行检查：http://msdn.microsoft.com/en-us/library/windows/apps/xaml/jj709915.aspx

当您有大量数据希望在不进行交互的情况下显示时，强烈建议减少这些GridViewItems中的UI数据量。以下代码显示了一个示例：

<GridView.ItemContainerStyle>
    <Style TargetType="GridViewItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <ContentPresenter x:Name="contentPresenter"
                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                  Margin="{TemplateBinding Padding}" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</GridView.ItemContainerStyle>
<GridView.ItemTemplate>
    <DataTemplate>
        <TextBlock Text="{Binding FormattedMinute}"
                   Style="{StaticResource TimetableDataActive}" />
    </DataTemplate>
</GridView.ItemTemplate>

样式已缩减为仅限ContentPresenter-您将需要它，因为这将显示模板中定义的内容-并且使用了相同的模板。通过这种方式，UI在半秒内呈现。我希望我能用这个例子帮助你们中的一些人！

相关文章：