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

拉伸XAML路径以填充其包含元素,xaml,path,controltemplate,stretch,Xaml,Path,Controltemplate,Stretch,我有一个ControlTemplate,里面有一些路径。我希望路径可以拉伸并填充它们所在的控件,例如按钮。我该怎么做 我目前的情况如下: <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

我有一个
ControlTemplate
,里面有一些
路径。我希望
路径
可以拉伸并填充它们所在的控件,例如
按钮
。我该怎么做

我目前的情况如下:

<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
属性,但它们只是原始
路径的比例缩放


我会使用值转换器吗?或者可能是与父对象大小的某种形式的相对绑定?

在您的示例中,在画布周围抛出一个ViewBox应该会起作用。

要拉伸路径,请使用
stretch
属性。它的工作原理与图像拉伸类似-如下所述:(System.Windows.Media>拉伸枚举)。在如下所示的情况下,将该值设置为
Uniform
将保留填充其所占用控件的路径宽高比,以便整个路径可见

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

还有一个副作用:以这种方式拉伸路径将“规范化”其数据,即即使写入数据以便从原点变换所有点[],但拉伸时忽略变换[](希望我能清楚地解释这一点)

例如,当Inkscape中有一个凌乱的对象(未转换到原点)而不担心转换后的数据时,您可以利用这一点




这太棒了,对我也很有用。我真希望我能理解为什么在画布或路径周围放置一个ViewBox可以修复路径没有拉伸的事实。好吧,基本上,因为这就是
ViewBox
的用途。:-)将具有其固有大小的内容(如
路径
画布
)拉伸到其容器的大小。虽然此代码可以回答问题,但最好解释它如何解决问题以及为什么使用它。从长远来看,只使用代码的答案是没有用的。
<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>