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

Question

我有一个ControlTemplate，里面有一些Path个。我希望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的{​​{1}}和StrechX属性，但它们只是原始StretchY大小的比例缩放。

我会使用值转换器吗？或者也许某种形式的相对约束父母的大小？

Answer 1

在示例中围绕Canvas投掷ViewBox应该可以。

Answer 2

要拉伸路径，请使用Stretch属性。它就像图像拉伸一样 - 在此处描述：https://msdn.microsoft.com/en-us/library/system.windows.media.stretch(v=vs.110).aspx（System.Windows.Media＆gt; Stretch Enumeration）。在下面显示的情况下，将值设置为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>