如何在 Canvas 中制作多个 Path 元素以适应其父级？答案

【问题标题】：How can I make multiple Path elements inside a Canvas scale to fit its parent?如何在 Canvas 中制作多个 Path 元素以适应其父级？
【发布时间】：2015-01-14 07:47:17
【问题描述】：

我在 Illustrator 中创建了一系列形状，并将它们导出为 .ai 文件。当我在 Blend for Visual Studio 中导入此文件时，我得到如下所示的内容：

<Canvas x:Name="ManyPaths" Grid.Row="0">
    <Path Data="F1M0,53.135L0.004,102.44 22.03,151.59 55.042,0z" Fill="#FF8B1A34" Height="151.59" Canvas.Left="0.017" Stretch="None" Canvas.Top="182.406" Width="55.042"/>
    <Path Data="F1M0.003,34.152L22.027,49.15 0,0z" Fill="#FF991937" Height="49.15" Canvas.Left="0.02" Stretch="None" Canvas.Top="284.846" Width="22.027"/>
</Canvas>

路径有很多，为简洁起见，我不会在这里全部列出。放在一起时，它们会形成一个固定大小的矩形。我想在我的应用程序顶部使用这个矩形作为标题图像。我可以在 Blend 中调整 Canvas 元素的大小，但我无法获得适合 Canvas 的集体路径，也无法随之调整其大小。由于我正在为各种尺寸的屏幕进行设计，因此我希望标题图像可以缩放。我已经尝试将它嵌套在网格中，但这不起作用。

看起来在 C# 中执行路径的传统方式是

    <Path Grid.Row="1" Stroke="Black" StrokeThickness="2" Fill="Green">
        <Path.Data>
            <PathGeometry>
                <PathGeometry.Figures>
                    <PathFigure StartPoint="100,100">
                        <QuadraticBezierSegment Point1="165,25" Point2="225,100" />
                    </PathFigure>
                </PathGeometry.Figures>
            </PathGeometry>
        </Path.Data>
    </Path>

我不确定是否有办法将第一种格式转换为第二种格式，但如果可能的话，我想重用我的 .ai 文件，而不是从头开始重新创建它们。

【问题讨论】：

标签： c# windows canvas path windows-store-apps

【解决方案1】：

无需转换为第二种格式。使用 Data 属性更简洁明了。

您可以将 Canvas 包装在 ViewBox 中，以使其扩展到其容器。 Stretch 属性可以控制它是均匀拉伸还是扭曲（你可能想要均匀）

<Viewbox Stretch="Uniform" Grid.Row="0">
    <Grid x:Name="ManyPaths" >
        <Path Data="F1M0,53.135L0.004,102.44 22.03,151.59 55.042,0z" Fill="#FF8B1A34" Height="151.59" Canvas.Left="0.017" Stretch="None" Canvas.Top="182.406" Width="55.042"/>
        <Path Data="F1M0.003,34.152L22.027,49.15 0,0z" Fill="#FF991937" Height="49.15" Canvas.Left="0.02" Stretch="None" Canvas.Top="284.846" Width="22.027"/>
    </Grid>
</Viewbox>

【讨论】：