在 WPF 中复制 9 片功能答案

【问题标题】：Replicating 9-slice functionality in WPF在 WPF 中复制 9 片功能
【发布时间】：2019-12-16 05:27:26
【问题描述】：

我真的很喜欢 Flash/Flex 中的 9 片功能。这是制作液体矢量布局的好方法。看看：

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

所以 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>

【问题讨论】：

标签： wpf xaml

【解决方案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>

【讨论】：

【解决方案2】：

你有一个 6 片，而不是 9 片。

从我有限的理解来看，9-slice 基本上设置了一个 3x3 的网格，其中四个角不缩放，中心顶部和底部单元格仅水平缩放，左右中心单元格仅垂直缩放，中心水平缩放和垂直。

以下是这样做的。它的行为是否与 9-slice 完全一样，我无法告诉你，因为我从未真正使用过它。

  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="50" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="50" />
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition Height="50" />
    <RowDefinition Height="*" />
    <RowDefinition Height="50" />
  </Grid.RowDefinitions>

【讨论】：