Question

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

http://www.screencast.com/users/rfairchild/folders/Jing/media/e1493b02-e258-4283-b5e0-d72e517112ae

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

所以Flex很容易，但WPF并不是那么容易。我对WPF社区的问题是你如何在WPF中复制9切片？我玩弄了这些AI-＆gt; XAML Exporter。将路径对象嵌入到网格行中的行为太奇怪且不一致。

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

<Grid ShowGridLines="True">

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

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

Answer 1

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

只需在所有X坐标上添加200，使路径基于（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>

Answer 2

你自己有6片，而不是9片。

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

以下是这样做的。无论它是否与9切片完全相同，我都无法告诉你，因为我从未真正使用它。

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

在WPF中复制9切片功能

2 个答案: