C# ScatterView，如何将两个项目绑定在一起以作为一个项目？

Question

我有一个 scatterview 控件，可以从 URL 加载相当大的图像。图像大小不同，有时图像太大而无法一张抓，我必须下载两半作为单独的图像。我试图将这两部分结合起来，使它们看起来和表现得像一个整体。我已经杀死了两天并接近了它，但并不完美。 我尝试过的事情： 将两半添加到 StackPanel，然后用 ScatterViewItem 包装。出于某种原因，如果面板比高度宽得多，SVI 不会正确调整其尺寸。我尝试了一些东西，包括 MSDN 上建议的让 SVI 调整其内容的高度/宽度的样式。在大多数情况下效果很好，但如果图像又长又窄，它的一部分就会被剪掉*（见下文）。

将两半添加到画布中。似乎无法通过操作正确调整大小。

将两半添加到网格中。无法让两半形成一个图像。奇怪的是，整个网格被 SVI 正确显示，包括长图像。然而，两半要么在每个顶部（没有水平对齐），要么相距很远（执行列定义并将它们设置为第 0 列和第 1 列），或者几乎完美但它们之间有一个小间隙（将一个设置为左对齐，另一个右对齐）。

*到目前为止，StackPanel 似乎是最有前途的。我可以通过手动设置 SVI MinWidth 来显示整个内容，但是控件的操作命中区域大于图像本身。我一直在尝试使用图像的 SizeChanged 事件，尝试在图像实际加载时动态调整 SVI midwith，使其等于它们的组合渲染宽度，但现在它开始变得比科学更萨满教.我正要在这件事上扔随机代码，只是希望结果会有一些用处或洞察力。 我认为部分问题在于图像源位图在图像被添加到容器后可能需要 5 秒才能真正下载，并且它被包装到 SVI 中，并且 svi 被添加到 scatterview 本身。它告诉我，在位图准备好并渲染图像之前，每个图像的高度为 NaN，但实际高度为 87。这一切如何影响堆栈面板和 SVI 的大小，我真的不知道。

所以，也许有人有一些见解或建议可以尝试，而我一直在修补并希望从中有所收获。

Answer 1

我曾经在微软工作，负责创建 ScatterView 控件。这个问题真的有两部分：

首先，为什么 ScatterViewItem 的大小表现得很奇怪？ ScatterViewItems 将根据其内容自动调整大小，但这样做会强制执行 2 个限制：a) 初始高度和宽度足够大，以便用户可以舒适地抓住项目来调整它的大小；b) 初始高度和宽度足够小该项目仅占屏幕每个维度的不超过〜20％，为其他项目留出空间可见。如果您自己显式设置 Height 和 Width 属性，则可以覆盖这两种行为。

其次，将多个图像组合成一个 ScatterViewItem 的最佳方法是什么？我的建议是创建一个 WriteableBitmap，它是组合图像的大小。把它放到你的 ScatterViewItem 中。然后，在下载每个图像块时，将该块插入 WriteableBitmap。这将产生更好的性能，并确保接缝处不会出现视觉伪影问题。

Answer 2

如果 StackPanel 几乎可以工作，但您在调整大小时遇到​​问题，您可能想尝试使用 DockPanel。

StackPanel 不会在其 Orientation 方向上限制其子项的大小，因此它在该方向上的大小实际上是无限的，这可能会导致您所描述的奇怪的大小调整行为类型（这就是为什么他们通常像 ListBox 一样包裹在 ScrollViewer 中）。

如果所有项目都使用相同的 DockPanel.Dock 设置，但具有基于父布局的大小限制，则 DockPanel 会执行相同类型的堆叠行为。它或许能够为您提供 Grid 和 StackPanel 正在做的事情的正确组合。

如果设置正确，网格也可能起作用 - 我认为 2 个自动行或列，将两个图像上的水平和垂直对齐设置为拉伸可能会做到这一点。如果您需要在图像未填充 SVI 时占用空白空间，它可能还需要一个额外的空行或列。