Replicating 9-slice functionality in WPF

Question

I really love the 9-slice feature in Flash/Flex. It is a great quick way to make liquid vector layouts. Take a look at:

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

I am using the selected object in AI file to setup a 9-slice grid (I am not using 9s to scale corners!). I only want that right part to stay static and the rest to scale. Now, also be aware that it must scale, so it must be vector. I cannot tile the part I want to repeat as a rasterized graphic.

So Flex this is easy, WPF not so much. My question to the WPF community is how can you replicate the 9-slice in WPF? I've toyed with exporting these with the AI->XAML Exporter. Embedding the path object into a grid row behaves way too odd and inconsistent.

This is taking an exported path and trying to drop it into a Grid. I should note this Grid is not being used to mimic a 9-slice. I am just using it to layout objects. I simply want the path below to fit into the right-most top corner. It does not even do that....

<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

You've got yourself a 6-slice there, not a 9-slice.

From my limited understanding, 9-slice basically sets up a 3x3 grid where the four corners do not scale, the center top and bottom cells scales horizontally only, the left and right center cells scale vertically only, and the center scales horizontally and vertically.

The following does this. Whether or not it behaves exactly as 9-slice does, I can't tell you as I've never actually used it.

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

Answer 2

Your path contains negative coordinates, when you draw something at point (-200,0) it will be drawn 200 pixels to the left of where it should have been.

By simply adding 200 to all X coordinates to make your path based at (0,0) and not(-200,0) you will get this path that does work:

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

alternatively you can use a transform to push it into place, this will also work:

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