0

我有一个 ItemsControl 可能包含任意数量的项目（在设计时未知）。这些项目中的每一个基本上都表示为具有固定纵横比的无限可缩放图像（即，图像将在给它的任何空间中绘制自己 - 它不决定自己的大小，除非必须保留纵横比）。每个项目的纵横比可能不同，但通常相同。

我想要：

  • 在每个图像周围绘制一个边框，无论图像缩放如何，理想情况下都具有均匀的厚度。
  • 在窗口内尽可能大地绘制每个图像，同时保持其顺序、纵横比和边框外部的边距。
  • 图像的四个边中至少有两个必须始终触及其所在单元格的不可见边界。如果不接触，其他两侧应居中。（假设使用某种统一的单元格布局。）
  • 不重叠或剪辑任何图像。
  • 调整包含窗口的大小时自动重新布局。
  • 浪费最少的非图像空间。
  • 如果项目的纵横比不同，请尽可能应对。（但如果这会增加其他项目的浪费空间，也可以，只要它们重新缩放以适应结果。）

我发现的普遍共识似乎是将每个图像包装在 Stretch.Uniform Viewbox 中，然后将它们放入 UniformGrid。我已经尝试过这种方法，但它对我没有吸引力，因为：

  • 给定两个项目，UniformGrid 总是希望创建 2x2 网格布局，即使窗口形状会使 2x1 或 1x2 网格更合适，这会导致过度缩放和浪费空间。
  • 如果我将边框放在 Viewbox 中，那么它会缩放边框厚度。如果我把它放在外面，那么它会扭曲纵横比。

有一个更好的方法吗？（请注意，“图像”实际上是我自己的自定义绘制 FrameworkElement，因此如果有帮助，我可以将自定义度量/排列代码放在此处或自定义容器面板中。）

<UniformGrid>
    <Rectangle Fill="Red" Margin="4" Width="500" Height="281.25" />
    <Rectangle Fill="Blue" Margin="4" Width="500" Height="281.25" />
</UniformGrid>

这是一个简单的例子。把它放到一个窗口中，然后尝试调整窗口大小。矩形会改变大小以适应窗口（好），但它们也会改变形状/外观（坏），一旦窗口足够大（坏），它们就会停止调整大小。即使窗口本身的大小使得 1x2 或 2x1 效果更好，它也会为整个 2x2 网格留出空间。

<UniformGrid>
    <Viewbox Stretch="Uniform" Margin="4"><Rectangle Fill="Red" Width="500" Height="281.25" /></Viewbox>
    <Viewbox Stretch="Uniform" Margin="4"><Rectangle Fill="Blue" Width="500" Height="281.25" /></Viewbox>
</UniformGrid>

这稍微好一点，因为当窗口变大时矩形继续拉伸，并且它们不再扭曲它们的形状，但是当窗口很宽时仍然有不必要的第二行，或者当窗口很窄时仍然有第二列。而且我更希望元素从左上角排列（如 WrapPanel）而不是居中，但这是一个小细节。

（现在尝试在 Viewbox 的内部和外部添加一个边框，看看我的意思。）

实际上 WrapPanel 几乎可以满足我的要求，只是它会在窗口变小时时自动调整太大的项目。

4

0 回答 0