Dot.Blog

C#, XAML, Xamarin, UWP/Android/iOS

Des contrôles de Mockup gratuits pour Silverlight

[new:28/02/2011]Vous avez Expression Blend, vous avez tout compris ! Savez-vous que vous pouvez agrémenter vos mockup avec des composants supplémentaires et gratuitement ? Il y a une astuce, bien entendu.

Les exemples des Blend

Blend est fourni avec de nombreux exemples auxquels on accède via la page “Welcome” qui s’affiche par défaut au lancement du logiciel. Beaucoup de gens, donc je fais parti, supprime cet écran pour démarrer plus vite. On en oublie parfois l’existence, et pourtant il y a des choses intéressantes !

MockupDemonstration

Cette démonstration, accessible depuis l’écran Welcome, onglet “Samples”, montre comment utiliser tout un tas de nouveaux composants spécialisés dans le sketching. Parfois, même pour des applications réelles, ce look crayonné peut-être très sympa !

(nota : si vous avez coupé l’affichage de l’écran Welcome, vous pouvez y accéder à tout moment via le menu Help de Blend).

Lancez la démo et regardez quelques uns des contrôles.

Ils sont tous regroupés dans une librairie. Mais pour les utiliser dans vos applications il faut penser à copier le nécessaire dans votre projet, ce qui n’est pas très pratique. Le mieux ne serait-il pas d’ajouter ces composants directement dans les palettes de Blend ?

Ajouter les contrôles à la palette de Blend

Bien sur que si, ça serait plus pratique ! En fin de manip vous obtiendrez donc plein de contrôles supplémentaires qui s’afficheront directement dans la palette Assets de Blend :

image

Un petit détail : tous ces contrôles s’utilisent dans un projet Sketching... Si vous tentez de les utiliser dans un projet Silverlight ou WPF standard cela ne marchera pas (et provoquera quelques exceptions, notamment des erreurs COM).

Pour une raison étrange que je n'ai pas élucidée, la palette montre 41 contrôles, mais en réalité dès qu'on en sélectionne un la palette se réduit pour diminuée de moitié. On le voit sur les contrôles sont en double... Mais les choses rentrent dans l'ordre ensuite et ça fonctionne bien !

Pour ajouter les contrôles à la palette de Blend il suffit d’aller les chercher là où se trouvent, dans les exemples de Blend, et de copier les fichiers nécessaires dans la librairie de Blend.

La source : Documents / Expression / Blend 4 / Samples / MockupDemonstration / MockupDemonstration / Libraries / Silverlight / Debug

(Si vous souhaitez ajouter les contrôles pour WPF, à la fin de l’aiguillage, après Libraries, prenez le chemin .NETFramework / Debug).

Il faut copier à la fois le fichier Microsoft.Expression.Prototyping.MockupsSL.dll et le sous répertoire Design.

Une fois le Ctrl-C effectué, allez dans le répertoire suivant :

Ordinateur / C: / Program Files(x86) / Microsoft Expression / Blend 4 / Libraries / Silverlight / 4.0

Et faites le Coller Ctrl-V.

Relancez Blend et vous devriez disposer des nouveaux contrôles comme le montre l’image ci-dessus.

Que trouve-t-on dans ces contrôles ?

Plein de choses !

Fausses fenêtres d’application, menus, écran de logon, symboles, pager ... Vraiment de quoi agrément tout projet de Sketching.

image

Un exemple de ce qu’on peut trouver dans cette bibliothèque.

Conclusion

Par définition un projet Sketching n’est pas un projet final, on ne s’attend pas à ce que son visuel soit parfait. Le look Sketching que Microsoft a créé pour ce type de projet est là pour le rappeler : c’est comme quelques notes griffonnées sur du papier.

Certes, mais tout le monde sait aussi que le “mal dessiné” d’un graphiste ça fait bien plus chouette que le “mal dessiné” de quelqu’un qui ne sait vraiment pas dessiner ! Les projets de Sketching ne servent pas qu’à tester une idée, ils faut aussi la présenter de façon séduisante, au moins un minimum, pour qu’elle soit reçue favorablement. Alors agrémenter les pages de quelques figures faussement mal dessinées et qui ajoutent une petite touche d’originalité ne peut qu’aider à atteindre l’objectif !

Stay Tuned !

blog comments powered by Disqus