屏幕上大量元素的 WPF 性能

Question

我目前正在尝试在 WPF 中创建一个场景，其中我的屏幕上有大约 250 个控件，用户可以使用鼠标平移和放大和缩小这些控件。

当屏幕上有大量这些控件时(即当用户缩小时)，我在应用程序上运行了 WPF Performance Suite 工具，FPS 下降到 15 左右，这不是很好。

下面是 XAML 的基本概要:

<Window>
  <Window.Resources>
    <ControlTemplate x:Key="LandTemplate" TargetType="{x:Type local:LandControl}">
        <Canvas>
            <Path Fill="White" Stretch="Fill" Stroke="Black" StrokeThickness="1" Width="55.5" Height="74.687" Data="M0.5,0.5 L55,0.5 L55,74.187 L0.5,74.187 z"/>
            <Canvas x:Name="DetailLevelCanvas" Width="24.5" Height="21" Canvas.Left="15.306" Canvas.Top="23.972">
                <TextBlock Width="21" Height="14" Text="712" TextWrapping="Wrap" Foreground="Black"/>
                <TextBlock Width="17.5" Height="7" Canvas.Left="7" Canvas.Top="14" Text="614m2" TextWrapping="Wrap" FontSize="5.333" Foreground="Black"/>
            </Canvas>
        </Canvas>
    </ControlTemplate>
  </Window.Resources>

  ...
  <local:LandControl Width="55.5" Height="74.552" Canvas.Top="xxx" Template=" {StaticResource LandTemplate}" RenderTransformOrigin="0.5,0.5" Canvas.Left="xxx">
  <local:LandControl Width="55.5" Height="74.552" Canvas.Top="xxx" Template=" {StaticResource LandTemplate}" RenderTransformOrigin="0.5,0.5" Canvas.Left="xxx">
  <local:LandControl Width="55.5" Height="74.552" Canvas.Top="xxx" Template=" {StaticResource LandTemplate}" RenderTransformOrigin="0.5,0.5" Canvas.Left="xxx">
  <local:LandControl Width="55.5" Height="74.552" Canvas.Top="xxx" Template=" {StaticResource LandTemplate}" RenderTransformOrigin="0.5,0.5" Canvas.Left="xxx">
  ... and so on...
</Window>

我试图最小化控件模板中的细节，我什至做了大量的查找和替换控件，只是将它们的原始元素内联而不是使用模板，但没有明显的性能改进。

我已经看到其他关于此的问题，人们说要进行自定义绘图，但是当您必须像我一样缩放和平移时，我真的不明白这有什么意义。

如果有人可以在这里提供帮助，那就太好了!

标记

Answer 1

这听起来可能很陈词滥调，但是 - 天下没有免费的午餐。
在过去的两年里，我一直在研究 [this][1]。该产品由 4 个浏览器组成，其界面主要是 ZUI。除了 Atlas 之外，其他所有人都使用 Visuals 进行图形渲染，从中吸取了很多教训，也有一些死胡同。

FrameworkElements 不是你的 friend 。现代 GFX 卡和 CPU 上的 FE 引擎最多可使用 500-600 个元素，但这取决于它们的复杂性。 FE 的重量大约是 Visuals 的 10 倍。

文本将显着影响您的帧率。渲染曲线为 贵 有关使用动画文本的提示，请参阅 [Robby Ingebretsens 帖子][4]

剔除很重要，但从 VisualTree 添加/删除是 贵 .折叠/隐藏是一种妥协。

在 WPF 3.5 中，您有 2 个选择 - 向下编程到 Visuals 层或使用类似 [Planerator][2] 之类的东西，然后操纵相机进行平移和缩放，但这需要您的用户具有良好的 gfx 卡。

在 WPF 4.0 中，由于称为 [缓存组合] [3] 的东西，情况要好得多。它的工作原理与 Planerator 的工作原理相同。 GFX 卡正在将您的控件呈现为位图，并且正在平移缩放位图。

在 4,0 中使用它很容易 - 设置 .CacheMode对于最昂贵的 FrameworkElements，事情会变得更快。您还可以控制文本的抗锯齿方式以及重新生成位图的比例( EnableClearType 和 RenderAtScale )
在我的 Atlas 浏览器中，我可以显示超过 700 条文本 + 简单的矩形，而不会失去平移和缩放的交互性。在 4 之前， map 无法使用。
获得更好的交互性能需要时间、目标和测量。祝你好运。
[Kael Rowan][5] 有一系列关于他正在研究的 ZoomableCanvas 的优秀文章。它使用 Quadtree 和 PriorityQueue 进行实现，并让您实现语义缩放。
更新:8-07-10 添加了文本提示和 ZoomableCanvas 链接
[1]: http://globible.com
[2]: https://docs.microsoft.com/en-us/archive/blogs/greg_schechter/
[3]: https://docs.microsoft.com/en-us/dotnet/api/system.windows.media.bitmapcache?redirectedfrom=MSDN&view=net-5.0
[4]: https://web.archive.org/web/20101210104554/http://blog.nerdplusart.com:80/archives/making-the-most-of-silverlight-text-rendering ?
[5]: https://docs.microsoft.com/en-us/archive/blogs/kaelr/