WPF：如何将路径自适应其容器大小？

Question

我有一个路径(Path)，它必须调整大小以适应其StackPanel容器。

<StackPanel x:Name="TrackSurface">
    <Path Fill="AliceBlue"
          Stroke="Black" StrokeThickness="1"
          Data="{StaticResource TranslateZ}">
    </Path>
</StackPanel>

我想使用一个与容器绑定的转换，但不知道如何实现。有人能给我提示吗？

- 742

Answer 1

我将 StackPanel 改为 Grid，并将 Path 的 Stretch 属性改为 Fill。

<Grid x:Name="TrackSurface"> 
<Path Fill="AliceBlue" 
Stretch="Fill"
      Stroke="Black" StrokeThickness="1" 
      Data="M148,28 C221,133 110.50025,119.5 110.50025,119.5 L124.50016,68.5 z"> 
</Path> 

- Kishore Kumar

---

谢谢Kishore。在我的情况下它不起作用。我有一个带有UserControl的网格行，路径在UserControl中。它不应该扩展列宽度。这就是为什么我使用了StackPanel。我已经在UserControl中重写了OnRenderSizeChanged以保持1的纵横比。因此，Path需要填充一个大小为列宽的正方形UserControl。不确定我是否清楚。使用您的解决方案，列宽度会扩展以匹配Path的原始边界框。 - 742

@742，你看到我下面的回答了吗？为什么不直接使用ViewBox呢？（好吧，这已经三年了，但是有人刚刚投票支持我的答案，这让我回到了这里。） - Mark A. Donohoe

只是添加更多信息。这种方法可以工作，但它的局限性在于你强制路径拉伸以填充其容器，这可能并不总是适用的。想想女性符号...一个带有底部十字架的圆圈。如果您的路径的间距布局使您希望圆圈的中心位于显示区域的中心，则您的路径必须具有相对于其容器的坐标。将容器（网格）设置为范围的大小，然后将路径放置在其中。（续下文...） - Mark A. Donohoe

它将按设计大小正常显示。然后，您只需将网格放入ViewBox中，一切都将被正确缩放，而不会出现填充容器引起的伪像（因为您实际上正在填充，但现在您正在将网格填充到视图框中）。这就是ViewBox的作用...基本上让您缩放任何内容，同时（可选地）保持位置和方面相关性。这是相当酷的东西！ - Mark A. Donohoe

Answer 2

为什么您不使用ViewBox呢？这将根据需要缩小或放大路径。如果您不想进行缩放，而是进行剪切，则可以将剪切模式设置为限制在控件的边界框内。(我会在其中包装一个ContentPresenter来实现。)

- Mark A. Donohoe

---

这虽然是老方法，但仍然是更好的答案。我所要做的就是在ViewBox内部将我的Path包装在一个Grid中，一切都完美了。 - moswald

创建一个Grid，添加一个ViewBox子元素，将ViewBox分配给所需的Grid坐标，最后将您的Path作为ViewBox的子元素添加。 - Xaero Degreaz

Xaero，我认为应该反过来。将网格放在视图框中。这是因为您希望路径的坐标得到尊重，而这就是网格发挥作用的地方。是的，您可以使用边距等，但网格更加清晰。然后，将该网格放入ViewBox中，ViewBox仅应考虑缩放目的，而不是定位。更广泛地说，它是用于查看正确布局的控件，这就是为什么网格应该在内部的原因。从技术上讲，两种方法都可以，但其中一种将为您节省很多麻烦，并且更容易让其他人遵循。 - Mark A. Donohoe

Answer 3

确保您的路径比StackPanel更小。

对于非常简单的路径，最简单的方法是移动每个数字中的逗号（即在TranslateZ中将所有内容除以10或100），或者对于更复杂的路径，请添加LayoutTransform（根据需要降低缩放因子）：

<StackPanel x:Name="TrackSurface">
    <Path Fill="AliceBlue" Stroke="Black" StrokeThickness="1" 
          Data="{StaticResource TranslateZ}">
          <Path.LayoutTransform>
               <ScaleTransform ScaleX="0.1" ScaleY="0.1"/>
          </Path.LayoutTransform>
    </Path>
</StackPanel>

一些备注:

我曾经遇到过类似的问题，一个包含路径的按钮模板导致按钮的“自动”大小由路径决定，因为路径是模板内容中最大的尺寸。

这本身可能不会成为问题，因为如果您指定了按钮的高度/宽度，或者如果按钮的水平/垂直对齐设置为拉伸，当然路径会缩放。

然而，对于其他水平/垂直对齐的值，按钮大小由其内容所需的空间确定，在我的情况下，导致按钮具有路径的原始尺寸。

- Mike Fuchs

Answer 4

如果您想要一个不缩放的恒定笔画宽度，您可以使用自定义的Shape。在WPF中，形状有效地封装了缩放几何图形并在之后应用描边，这意味着您可以拥有一个缩放的路径，同时始终具有相同的笔画宽度。

创建形状非常容易：

public class MyShape : Shape
{
  public override Geometry DefiningGeometry
  {
    get
    {
      // Create your geometry here
    }
  }
}

- Joey