将XAML路径拉伸至填充其包含元素

Question

我有一个包含一些Path的ControlTemplate。我希望这些Path可以拉伸并填充它所在的控件，例如Button。我该怎么做？

目前我的代码如下：

<ControlTemplate x:Key="SomeTemplate" TargetType="Button">
    <Canvas Background="AliceBlue">
        <Path Data="M 99.5,50 A 49.5,49.5 0 1 1 0.5,50 A 49.5,49.5 0 1 1 99.5,50 z"
            Fill="White" Stroke="Black" StrokeThickness="1" />
        <Path Data="M 15,50 C 17.5,22.5 47.5,22.5 50,50 C 52.5,77.5 82.5,77.5 85,50"
            Stroke="Black" StrokeThickness="1" />
    </Canvas>
</ControlTemplate>

...

<Button Template="{StaticResource SomeTemplate}" Height="120" Width="120" />

我知道ScaleTransform的StrechX和StretchY属性，但它们只是原始Path大小的等比例缩放。

我应该使用值转换器吗？或者可能使用相对于父元素大小的绑定形式？

- sourcenouveau

Answer 1

在您的示例中，在Canvas周围放置一个ViewBox应该可以解决问题。

- Bryan Anderson

---

这太棒了，对我也起作用。虽然我希望我能理解为什么在Canvas或Path周围放置ViewBox会修复路径未拉伸的问题。 - Philip Tenn

基本上，这就是 Viewbox 的作用。 :-) 将具有其固有大小（如 Path 或 Canvas）的内容拉伸到其容器的大小。 - Gábor

Answer 2

要拉伸路径，请使用Stretch属性。它的工作原理就像图像拉伸一样 - 在此处描述：https://msdn.microsoft.com/en-us/library/system.windows.media.stretch(v=vs.110).aspx（System.Windows.Media > Stretch 枚举）。在下面所示的情况下，将该值设置为Uniform将保留路径的宽高比，填充它所占据的控件，以便整个路径可见。

<Path Stretch="Uniform" Data="..."/>

有一个副作用：通过这种方式拉伸路径会“标准化”其数据，即使数据被写入以使得所有点都从原点转换 [1]，在拉伸时变换会被省略 [2]（希望我解释清楚了）。

您可以在处理来自Inkscape的混乱对象时（未转换为原点），利用这一点，而不必担心转换后的数据。

<Grid Width="200" Height="200">
  <TextBlock Text="(0,0)" />
  <TextBlock Text="(200,200)" VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
  <Path Stroke="Blue" Stretch="None" Fill="Beige" Data="M 63,50 82,86 107,62 84,65 Z"/>
  <Rectangle Stroke="Red" StrokeThickness="1"/>
</Grid>

<Grid Width="200" Height="200">
  <TextBlock Text="(0,0)" />
  <TextBlock Text="(200,200)" VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
  <Path Stroke="Blue" Stretch="Uniform" Fill="Beige" Data="M 63,50 82,86 107,62 84,65 Z"/>
  <Rectangle Stroke="Red" StrokeThickness="1"/>
</Grid>

- q23main

---

虽然这段代码可能回答了问题，但最好解释一下它是如何解决问题以及为什么要使用它。仅有代码的答案从长远来看并不实用。 - Tobias Liefke