[Blend] Convertir des objets en Path et les manipuler

Blend est un outil pleins de possibilités. Aujourd’hui je vais vous présenter une fonctionnalité assez méconnue et pourtant très pratique.

Pour ceux qui ne connaitrait pas, un Path est un objet XAML permettant décrivant un forme arbitraire. On peut s’en servir pour dessiner un rectangle, une croix ou même une théière, bref tout ce que l’on veux.  Ce Path peut servir de différentes manières. En WPF on peut s’en servir pour générer des Brush. On peut aussi s’en servir pour faire du clipping avec les PathGeometry. Dans WinRT 8.1 on peut les utiliser pour dessiner les formes des boutons des AppBarButton grâce aux PathIcon. Je vous renvoie à la MSDN pour plus d’informations sur les Path.

Mise en pratique

Supposons que comme moi le design n’est pas votre fort mais vous avez quand même cependant besoin d’un Path dans votre application.

Blend vous offre la possibilité d’en créer à partir de la plupart des objets XAML y compris des TextBlock.

Nous allons donc nous servir d’un TextBlock pour générer un joli Path en forme de X. Pour cela on va glisser un TextBlock sur la surface de travail et changer quelques-unes de ses propriétés pour le rendre plus jolie. Ici j’ai changé la police d’écriture, la taille de la police.

BlendConvertToPath1

Pour convertir ce TextBlock en Path il faut aller dans le menu Object, et sélectionner Convert To Path dans le sous-menu Path.

BlendConvertToPath2

Un Path est maintenant généré et remplace notre TextBlock dans le XAML.

En poussant le concept un peu plus loin on peut écrire un texte en Windings et le convertir en Path et avoir une jolie cloche comme dans l’image ci-dessous.

BlendConvertToPath3

Une fois que l’on dispose d’un Path on peut profiter d’une autre fonctionnalité de Blend, les combinaisons de formes.

Commençons par glisser un Rectangle sous notre Path.

BlendConvertToPath4

Dans la partie Object and Timeline sélectionner le Rectangle et le Path (en utilisant la combinaison Shift + Click) en commençant par le Path puisque l’ordre de sélection peut-avoir une influence sur le résultat des opérations.

BlendConvertToPath5

Dans le menu Object on va cette fois aller dans le sous-menu Combine et sélectionner une opération. Ici j’ai choisi Exclude Overlap qui va grosso-modo retirer la forme du Path dans le Rectangle.

BlendConvertToPath6

On se retrouve à présent avec un seul Path représentant le résultat de l’opération. Vous noterez la perte de certains styles comme la couleur.

BlendConvertToPath7

Et si on met justement un peu de couleur de fond et de couleur de bordure on remarque qui la forme de la cloche a bien été « creusée » dans le rectangle.

BlendConvertToPath8

Conclusion

Ces opérations sont très puissantes et les possibilités de création très importantes.

A vous maintenant d’essayer un peu tout cela en testant les diverses opérations pour créer des formes compliquées sans forcément pour cela avoir besoin de talents de graphistes.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s