Stretching a XAML Path to fill its containing element

Question

I have a ControlTemplate with some Paths in it. I would like the Paths to stretch and fill the control they are in, such as a Button. How can I do this?

What I have currently looks like this:

<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" />

I am aware of ScaleTransform's StrechX and StretchY attributes, but they are only proportional scaling of the original Path's size.

Would I use a value converter? Or perhaps some form of relative binding to the parent's size?

Answer 1

Throwing a ViewBox around the Canvas in your example should work.