.net - 如何在不缩放线宽的情况下缩放路径几何以适合 View 框？

Question

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

我希望那个框可以缩放，所以我使用了一个 View 框。不幸的是，viewbox 转换了整个显示的控件，而不仅仅是框的几何形状。这会导致用于边框的线条被拉伸(stretch)。

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

这是我得到的不良结果。

有什么好的方法可以拉伸(stretch)填充几何形状，同时不缩放线条图的粗细？

我意识到我可以用这种简单的几何图形通过其他几种方式实现这一点，但在我的实际应用中，路径要复杂得多。

这里是我的控制代码给有兴趣的人:

<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 并将“边框”拆分为固定大小、水平拉伸(stretch)和垂直拉伸(stretch)的部分，如下图所示:

从这里我们可以看到列宽(从左到右)应该是:

1. 固定
2. 可变/拉伸(stretch)
3. 固定
4. 可变/拉伸(stretch)
5. 固定

并且行高(从上到下)应该是:

1. 固定
2. 可变/拉伸(stretch)
3. 固定

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