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

【问题标题】：How do I scale path geometry to fit a viewbox without scaling the line width?如何在不缩放线宽的情况下缩放路径几何以适应视图框？
【发布时间】：2012-10-02 10:04:36
【问题描述】：

我想绘制一个显示内容的用户控件。本质上，我想要一个围绕内容的自定义框。

我希望那个框可以缩放，所以我使用了一个视图框。不幸的是，视图框改变了整个显示的控件，而不仅仅是框的几何形状。这会导致用于边框的线条被拉伸。

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

这是我得到的不良结果。

有没有什么好的方法可以拉伸填充几何体而不缩放线条的粗细？

我意识到我可以使用如此简单的几何图形来实现其他几种方法，但在我的实际应用中，路径要复杂得多。

这里是我的控制代码给感兴趣的人：

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

【问题讨论】：

标签： .net wpf xaml user-controls wpf-controls

【解决方案1】：

移除 Viewbox 并将您的“边框”拆分为固定大小、水平拉伸和垂直拉伸的部分，如下图所示：

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

已修复
变量/拉伸
已修复
变量/拉伸
已修复

并且行高（从上到下）应该是：

已修复
变量/拉伸
已修复

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

【讨论】：