Réplication de la fonctionnalité 9 tranches dans WPF

Question

J'adore la fonction 9 tranches de Flash/Flex. C'est un excellent moyen de créer des mises en page vectorielles liquides. Jetez un oeil à:

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

J'utilise l'objet sélectionné dans le fichier AI pour installer une grille 9 tranches (je ne suis pas en utilisant 9s à coins échelle!). Je veux seulement que cette partie droite reste statique et le reste à l'échelle. Maintenant, sachez aussi qu'il doit s'agrandir, donc il doit être vectoriel. Je ne peux pas coller la partie que je veux répéter en tant que graphique pixellisé.

Donc Flex c'est facile, WPF pas tellement. Ma question à la communauté WPF est comment pouvez-vous répliquer la tranche 9 dans WPF? J'ai joué avec l'exportation de ceux-ci avec l'exportateur AI-> XAML. L'incorporation de l'objet trajectoire dans une ligne de grille se comporte de manière trop étrange et incohérente.

Ceci prend un chemin exporté et essaie de le déposer dans une grille. Je devrais noter que cette grille n'est pas utilisée pour imiter une tranche de 9. Je l'utilise juste pour mettre en page des objets. Je veux simplement que le chemin ci-dessous s'insère dans le coin supérieur droit. Il n'a même pas le faire ....

<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

Vous avez vous-même un 6-il tranche, pas 9 tranches. De mon point de vue limité, 9-tranches définit une grille 3x3 où les quatre coins ne sont pas à l'échelle, les cellules du haut et du bas du centre ne sont horizontales, les cellules centrales gauche et droite uniquement verticalement et les échelles centrales horizontalement et verticalement.

Ce qui suit fait cela. Que ce soit ou non se comporte exactement comme 9-tranche, je ne peux pas vous dire que je ne l'ai jamais utilisé.

<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

Votre chemin contient des coordonnées négatives, lorsque vous dessinez quelque chose au point (-200,0), il sera tiré au sort 200 pixels à gauche de l'endroit où il aurait dû être.

En ajoutant simplement 200 à toutes les coordonnées X pour rendre votre chemin basé à (0,0) et non (-200,0) vous obtiendrez ce chemin qui fonctionne: alternativement

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

vous pouvez utiliser une transformation pour le mettre en place, cela fonctionnera également:

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