3

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

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

这是我需要拉伸矢量路径中的点以适合父框的控件。 这是我要缩放以填充父框的内容

这是我得到的不良结果。

在此处输入图像描述

有没有什么好方法可以在不缩放线条图厚度的同时拉伸填充几何图形？

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

这是我为感兴趣的人提供的控制代码：

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

1 回答 1

3

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

内容装饰器

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

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

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

  1. 固定的
  2. 可变/拉伸
  3. 固定的

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

于 2013-03-05T23:22:26.043 回答