In a WPF user control, how do I specify coordinates relative to the control's total size, so that the control will scale correctly?

I have created this simple expand button user control with WPF:

I designed the thing with Width and Height both set to 100 so that I could see what I'm actually doing. The stripped-down XAML of this user control is:

<UserControl x:Class="Foobar.ExpandButton"
             ...
             Width="100" Height="100">
    ...
    <Border>
        ...
        <Canvas>
            <Line ... X1="20" Y1="20" X2="50" Y2="50"/>
            <Line ... X1="80" Y1="20" X2="50" Y2=&quo开发者_开发百科t;50"/>
            <Line ... X1="20" Y1="50" X2="50" Y2="80"/>
            <Line ... X1="80" Y1="50" X2="50" Y2="80"/>
        </Canvas>
    </Border>
</UserControl>

Eventually, the button should be able to dispay correctly at various sizes, e.g. at 20 × 20 points. However, due to the coordinates used with the Line elements, I cannot just insert this user control in another window like this:

<foobar:ExpandButton Width="20" Height="20" />  <!-- doesn't scale correctly! -->

I could apply a LayoutTransform → ScaleTransform each time that I use the element at another size than its default 100 × 100 points, but there has to be a better solution.

How can I define the lines' coordinates such that they are relative to the user control's total size?

You can put the image inside a view box, or inside a VisualBrush and use a rectangle to draw it (set the brush to the Rectangle.Fill property).

Even better, convert your image to a Drawing objects (replace Canvas with DrawingGroup and the shapes inside it with GeometryDrawing) and use DrawingBrush to paint it.