Репликация 9-фрагментной функциональности в WPF

Question

Мне очень нравится функция 9 слайсов во Flash / Flex. Это отличный быстрый способ создания жидкостных векторных макетов. Взгляните на:

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

Я использую выбранный объект в AI-файле для настройки сетки с 9 срезами (я не использую 9-е для масштабирования углов!). Я только хочу, чтобы эта правильная часть оставалась статичной, а остальное - в масштабе. Теперь также следует помнить, что он должен масштабироваться, поэтому он должен быть векторным. Я не могу разложить часть, которую хочу повторить, как растровое изображение.

Так что сгибать это легко, WPF не так уж и много. Мой вопрос к сообществу WPF: как вы можете повторить 9-фрагмент в WPF? Я играл с экспортом с помощью AI-> XAML Exporter. Встраивание объекта пути в строку сетки ведет себя слишком странно и непоследовательно.

Это берет экспортированный путь и пытается сбросить его в сетку. Я должен отметить, что эта Сетка не используется для имитации 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 пикселей слева от того места, где оно должно было быть.

Просто добавив 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>

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>