如何在不缩放线宽的情况下缩放路径几何以适合视图？

Question

我想绘制一个显示内容的用户控件。基本上我想要一个自定义框，无论内容是什么。

我想要缩放该框，因此我使用的是视图框。不幸的是，视图框会转换整个显示的控件，而不仅仅是框的几何图形。这导致用于边界的线被拉伸。

这是我的控制，我需要拉伸矢量路径中的点以适合父框。

这是我得到的不良结果。

在不缩放线条绘制厚度的同时，是否有任何好的方法来拉伸填充几何？

我意识到我可以用这么简单的几何方法来解决这个问题，但在我的实际应用中，路径要复杂得多。

以下是我感兴趣的人的控制代码：

<UserControl.Template>
    <ControlTemplate TargetType="{x:Type UserControl}">
        <Grid>
            <Viewbox Stretch="Fill">
                <Canvas Name="svg2" Margin="0" Width="100" Height="63" >
                    <Path Fill="#FFFFFFFF" Stroke="#FF6800FF" StrokeThickness="4" StrokeStartLineCap="Flat" StrokeEndLineCap="Flat" StrokeLineJoin="Miter" StrokeMiterLimit="4" Name="rect2985" RenderTransformOrigin="0,0">
                        <Path.Data>
                            <PathGeometry FillRule="Nonzero" Figures="M 0,250 L 0,50 L 150,50 L 200,-0.96 L 250,50 L 400,50 L 400,250 L 0,250z">
                                <PathGeometry.Transform>
                                    <TransformGroup>
                                        <ScaleTransform ScaleX=".24" ScaleY=".23" />
                                    </TransformGroup>
                                </PathGeometry.Transform>
                            </PathGeometry>
                        </Path.Data>

                        <Path.RenderTransform>
                            <TransformGroup>
                                <TranslateTransform X="2.1" Y="3" />
                            </TransformGroup>
                        </Path.RenderTransform>
                    </Path>

                    <Grid Canvas.Top="17" Width="90" HorizontalAlignment="Center" Height="40" Canvas.Left="5">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"        
                                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Grid>

                </Canvas>
            </Viewbox>
        </Grid>
    </ControlTemplate>
</UserControl.Template>

Answer 1

删除Viewbox并将“边框”拆分为固定尺寸，水平拉伸和垂直拉伸部分，如下图所示：

从这里我们可以看到列宽（从左到右）应为：

1. 固定
2. 变量/拉伸
3. 固定
4. 变量/拉伸
5. 固定

行高（从上到下）应为：

1. 固定
2. 变量/拉伸
3. 固定

然后，您可以在此处构建xaml网格，并将“边框”的每个部分放置到相应的位置。这样，当控件的高度发生变化时，只会拉伸垂直线。类似地，当内容的宽度改变时，只有水平线会被拉伸。