在WPF用户控件中，如何指定相对于控件总大小的坐标，以便控件可以正确缩放？

Question

我用WPF创建了这个简单的扩展按钮用户控件：

Expand button user control http://i31.tinypic.com/1zxqtyx.jpg

我设计了Width和Height都设置为100的东西，以便我可以看到我实际在做什么。此用户控件的精简XAML是：

<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="50"/>
            <Line ... X1="20" Y1="50" X2="50" Y2="80"/>
            <Line ... X1="80" Y1="50" X2="50" Y2="80"/>
        </Canvas>
    </Border>
</UserControl>

最终，按钮应该能够以各种尺寸正确显示，例如在20×20点。但是，由于与Line元素一起使用的坐标，我不能将此用户控件插入另一个窗口，如下所示：

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

每次我使用的元素大小超过其默认的100×100分时，我可以应用LayoutTransform→ScaleTransform，但必须有更好的溶液

如何定义线条的坐标，使它们相对于用户控件的总大小？

Answer 1

您可以将图像放在视图框内或VisualBrush内，并使用矩形绘制它（将画笔设置为Rectangle.Fill属性）。

更好的是，将图像转换为Drawing对象（使用GeometryDrawing替换Canvas与DrawingGroup及其中的形状）并使用DrawingBrush绘制它。