wpf - 在 WPF 中复制 9 切片功能

Question

我真的很喜欢 Flash/Flex 中的 9 切片功能。这是制作液体矢量布局的一种非常快速的方法。看看:

我正在使用 AI 文件中选定的对象来设置 9 切片网格(我没有使用 9 来缩放角!)。我只希望正确的部分保持静态，其余部分按比例缩放。现在，还要注意它必须缩放，因此它必须是矢量。我无法将我想要重复的部分平铺为光栅化图形。

所以 Flex 这很容易，WPF 就不那么容易了。我向 WPF 社区提出的问题是如何在 WPF 中复制 9 切片？我尝试过使用 AI->XAML 导出器导出这些内容。将路径对象嵌入到网格行中的行为太奇怪且不一致。

这是获取导出的路径并尝试将其放入网格中。我应该注意这个网格不是用来模仿 9 切片的。我只是用它来布局对象。我只是想让下面的路径适合最右上角。它甚至不这样做......

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid ShowGridLines="True">
        <Path Fill="Red" Data="F1 M 200.0,42.5 L -200.0,42.5 L -200.0,-42.5 L 200.0,-42.5 L 200.0,42.5 Z" Grid.Row="0" Grid.Column="1"/>
    </Grid>
</Page>

Answer 1

您的路径包含负坐标，当您在点 (-200,0) 处绘制某些内容时，它将在其应在的位置左侧绘制 200 像素。

只需将 200 添加到所有 X 坐标以使您的路径基于 (0,0) 而不是 (-200,0)，您将得到此有效路径:

 <Path Fill="Red" Data="F1 M 400.0,42.5 L 0.0,42.5 L 0.0,-42.5 L 400.0,-42.5 L 400.0,42.5 Z" Grid.Row="0" Grid.Column="1"/>

或者，您可以使用转换将其插入到位，这也可以:

<Path Fill="Red" Data="F1 M 200.0,42.5 L -200.0,42.5 L -200.0,-42.5 L 200.0,-42.5 L 200.0,42.5 Z" Grid.Row="0" Grid.Column="1">
    <Path.RenderTransform>
        <TranslateTransform X="200"/>
    </Path.RenderTransform>
 </Path>