Question

回到过去的Windows Phone 7，我设法编写了一个很长的代码，从代码隐藏模拟某种WrapPanel生成一个UI，显示左边的小时并列出所有的分钟（出发数据）在右边。当添加了8个条目时，它创建了一个新行。

它的结构看起来像这样：

StackPanel（垂直）：包含不同时段的所有行
StackPanel（水平）：
- TextBlock：小时
- StackPanel（垂直）：包含水平StackPanel，每个存储8个TextBlocks，其中包含分钟

结果示例：

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

使用Windows Phone 8.1我认为我将使用GridView进行分组而不是更新以前的代码。这样我就可以使用绑定的所有强大功能。然而，GridView需要大约2-3秒来渲染大约180-200个TextBlocks，这有点令人失望。

<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等的加量？

Answer 1

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

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

如果您希望在没有交互的情况下显示大量数据，则强烈建议减少这些GridViewItem中的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就会在半秒内呈现。我希望我能用这个例子帮助你们中的一些人！

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

1 个答案: