Question

我有一个 Windows 8 XAML 页面, 里面有一个网格, 以 100+ 不同字体显示样本文本。样本文本在每个网格视图项中都是相同的, 可以使用页面顶部的文本框更改。

每次键入一个字符时,所有网格视图项目都会更新。问题在于这明显缓慢,特别是如果您快速键入的话。

我不确定是什么使它如此缓慢。它是否更新了所有网格视图项目,包括没有在屏幕上的项目? 是不是造成问题的其他原因,而这种特别的约束只是一种红种?

以下是我具有约束力的代码(我从数据模板中删除了一些Xaml,

<ScrollViewer>
    <GridView x:Name="FontGridView" ItemsSource="{Binding Fonts}" SelectionMode="Multiple"  Margin="116,0,40,46">
        <GridView.ItemTemplate>
            <DataTemplate>
                <Grid Width="600" MinHeight="100" MaxHeight="120">
                    <TextBox Text="{Binding ElementName=pageRoot, Path=DataContext.SampleText, Mode=OneWay}"
                                FontFamily="{Binding FamilyName}" FontSize="32" Background="Transparent" />
                </Grid>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>
</ScrollViewer>

是否有更好的方法做到这一点, 或者还有任何其他的调整性能的东西我可以打开?

UPDATE: 自2012 Vision Studio RC 推出以来, 你不太可能犯这个错误。 WinRT 应用程序的模板不再以这种方式使用 ScrollViewer 。我将问题保留在这里, 给那些他们用 2011 Vision Studio 创建了应用程序的人。

Answer 1

尝试删除滚动查看器。

因为 GridView 在一个滚动查看器中, 它实际上被给定无限宽度。这可能会扼杀 GridView 中折叠格瑞德的虚拟化。

此外, GridView 内部已经包含一个滚动查看器。显然, 您不需要其中两个。但内部滚动查看器也会吃鼠标滚轮事件, 不让外部滚动查看器对事件作出反应。因此, 与鼠标滚动不会起作用。

视频演播室11 (bèta 1) 模板包含这样的代码, 以设定 GridView 上的差值。然而, 最好在 GridView 的项目板上设定差值, 比如 :

<GridView x:Name="FontGridView" ItemsSource="{Binding Fonts}" SelectionMode="Multiple">
  <GridView.ItemTemplate>
    <DataTemplate>
      <Grid Width="600" MinHeight="100" MaxHeight="120">
        <TextBox Text="{Binding ElementName=pageRoot, Path=DataContext.SampleText, Mode=OneWay}"
                 FontFamily="{Binding FamilyName}" FontSize="32" Background="Transparent" />
      </Grid>
    </DataTemplate>
  </GridView.ItemTemplate>
  <GridView.ItemsPanel>
    <ItemsPanelTemplate>
      <WrapGrid x:Name="itemGridViewPanel" Margin="116,53,116,46"/>
    </ItemsPanelTemplate>
  </GridView.ItemsPanel>
</GridView>

您的原始代码不包括您在 GridView 上设定的边距。但不管是什么, 您在环形GridGrid 上设置了相同的边距。

请注意, 我给“ 折叠” 取了一个名称。您可以在屏幕方向改变时使用该名称来更改边距, 通常如下 :

<VisualStateManager.VisualStateGroups>
  <VisualStateGroup>
    <VisualState x:Name="FullScreenLandscape"/>
    <VisualState x:Name="Filled"/>
    <VisualState x:Name="FullScreenPortrait">
      <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridViewPanel"
                                       Storyboard.TargetProperty="Margin">
          <DiscreteObjectKeyFrame KeyTime="0" 
                                  Value="96,53,96,46"/>
        </ObjectAnimationUsingKeyFrames>
      </Storyboard>
    </VisualState>
    <VisualState x:Name="Snapped"/>
  </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<强 > UPATE:

我之前做过这个,但用一个变量SizedWrapGrid。这产生了正确的布局,但不幸的是,我担心变量SizedWrapGrid不是一个虚拟化的面板。

MacleGrid 正在虚拟化, 但是在滚动时左边距的行为似乎是错误的。在右边距是正确。

两周后,我们该有释放候选人,希望事情会好转...

<强 > UPATE:

微软似乎知道这一点。见http://social.msdn.microsoft.com/forums/en-US/winppswitswithscsharp/thread/17385f7d-aadc-4edc-bbff-8738a2f0c917 。

<强 > UPATE:

看来释放候选人的包装格瑞德没有固定下来。

Answer 2

简化您的数据模板。

<DataTemplate>
  <TextBlock Text="{Binding ElementName=pageRoot, Path=DataContext.SampleText}"
             Width="600" MinHeight="100" MaxHeight="120"
             FontFamily="{Binding FamilyName}" FontSize="32" />
</DataTemplate>

您不需要网格。看起来您也不需要( 复杂) 文本框, 只是一个( 简单) 文本框。

另外,确定这些文本区块的高度( H88="120" )可能有助于(优化)布局过程。

<强 > UPATE:

据我所知,您重的代码简化为“真实的东西 ” 。但这可能隐藏我们真正的问题。记住, 数据模板对屏幕上每个项目都是有验证的。越复杂, 越需要即时化对象( CPU 和记忆使用 ), 可能需要数据集( CPU ), 需要测量和配置( CPU ), 也需要完成( CPU 和 GPU ) 。

只需用非常简单的数据模板进行测试。如果您的程序现在更快, 或者不是更快, 您就会知道数据模板是否是性能问题。

请注意,数据模板的复杂性不是用您需要描述的 xaml 元素数量来衡量的,因为这些元素的内部复杂性可能非常不同。例如,如果只需要显示文字,就更喜欢 TextBox 而不是 TextBox, 不允许编辑。

此外,如果这些元素中的某些元素有许多属性集, 请使用样式来设置它们。在很多对象上使用样式比在许多对象上设置许多属性更有效, 特别是当它被用于内存使用时。而且, 您使用的内存越少, 您的程序就越快( 由于现代的 CPU 多级缓存结构) 。

例如:

<GridView x:Name="FontGridView" ItemsSource="{Binding Fonts}" SelectionMode="Multiple">
  <GridView.Resources>
    <Style TargetType="TextBlock">
      <Setter Property="Width" Value="600" />
      <Setter Property="MinHeight" Value="100" />
      <Setter Property="MaxHeight" Value="120" />
      <Setter Property="FontSize" Value="32" />
    </Style>
  </GridView.Resources>
  <GridView.ItemTemplate>
    <DataTemplate>
      <TextBlock Text="{Binding ElementName=pageRoot, Path=DataContext.SampleText}"
                 FontFamily="{Binding FamilyName}" />
    </DataTemplate>
  </GridView.ItemTemplate>
</GridView>

Answer 3

尝试使用虚拟化桌面版

<GridView.ItemsPanel>
    <ItemsPanelTemplate>
        <VirtualizingStackPanel Orientation="Horizontal"/>
    </ItemsPanelTemplate>
</GridView.ItemsPanel>

友情链接