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

Question

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



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

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

这是采用导出的路径并尝试将其放入网格中。我应该注意这个 Grid 不是用来模拟 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>