如何在Canvas缩放中创建多个Path元素以适合其父级?

时间:2015-01-14 07:47:18

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

我在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#中使用Paths的传统方式是

    <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文件,而不是从头开始重新创建它们。

1 个答案:

答案 0 :(得分:2)

无需转换为第二种格式。使用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>