Build 2015 – Day 3

Par Benoît,
Pôle .Net MCNEXT

Bonjour à tous,

Dernier jour de Build et donc derniers comptes rendus.
Première session autour des API d’Office 365 appelées depuis une application mobile.
Viens ensuite la conversion d’une application 8.x vers une application universelle Windows 10.
Un retour sur les nouveaux outils de VS2015 (Blend,  Profiling Tools,…) et enfin une session Xamarin avec notamment les outils Xamarin Inspector et Xamarin Test Cloud.

Benoît

Lire la suite

[Build 14] – From 4 to 40 inches Developing Windows Applications across Multiple Form-Factors

Mail de John
Jeudi 3 avril 2014 10:41

From 4 to 40 inches Developing Windows Applications across Multiple Form-Factors

Rappel de la différence entre la layout et les assets.
Layout: Physical Size and Shape, Viewing Distance, Effective Resolution
Assets: Detail Level, Scale Factor, Mastering

Il ne faut plus se demander quelle est la taille de mon application. Il faut se demander quelle forme a mon application (tall, thin, wide).

Démonstration de l’adaptabilité du layout et de la taille du contenu d’un jeu de morpion.
La résolution effective de l’application est importante, pas la taille de l’application.

Démonstration de l’utilisation des VisualState dans Blend pour s’adapter à la taille de l’application. (Utilisation d’un petit helper une classe de base d’une page qui change le VisualState en fonction de la taille).

Choisir de bons assets en fonction de la résolution. Si une image a beaucoup de détails en grande résolution et qu’on la redimensionne en une image à faible résolution elle sera très pixélisée. Il faut choisir une image avec moins de détails à faible résolution quitte à ce que l’image ne soit pas tout à fait la même que celle à haute résolution.

La densité relative des pixels d’une image est importante pas la densité réelle de pixels (DPI).
Il est important d’appliquer les conventions de nommage pour les assets (exemple image.scale-240.png) qui permettra de choisir automatiquement la bonne image en fonction de la résolution. Il faut quand même préciser la taille d’affichage de l’image car sinon le moteur de layout (HTML ou XAML) multipliera la taille de l’image au lieu de s’adapter au DPI.

Génération des assets :
– Déterminer la taille désirée de l’image en pixels effectifs
– Déposer ces assets dans le dossier partagé
– Multiplier la taille du layout par 2.4
– Déposer ces assets dans le projet Phone
– Vérifier que le résultat est le bon sur les appareils cibles (les émulateurs et simulateurs sont insuffisants pour une vérification d’assets)
– Si le resultat est bon vous avez fini
– Sinon essayez un scale factor supplémentaire de 1.4 ou 1.8

Création des masters assets :
– Dans l’idéal utilisez des assets vectoriels
– Sinon des bitmaps ayant un scale factor supérieur ou égal à 400%
– Exportez cet asset dans les scale factor cible nécessaires
– Ne pas oublier le niveau de détail
– Ne pas s’inquiéter si on a un asset à basse résolution

Mais où est le code ?
La plupart du temps il est inutile d’écrire du code pour gérer ce sujet.
Cependant voice quelques informations utiles pour la suite.
DisplayInformation.GetForCurrentView() :
– ResolutionScale (Windows (enum))
– RawPixelsPerViewPixel (WP (double))
– RawDpiX, RawDpiY (Ignore unless measuring real-world objects (ruler, hardware,etc..))
– LogicalDpi (avoid unless working with Direct2D or legacy code that assumes 96 DPI)

Silverlight : Information importante pour la migration d’application Silverlight vers WinRT. La résolution effective minimale pour les téléphones a changée. Il faut multiplier les constantes de taille par 0.8.

Utilisez les bons mots !
– Bien : Effective resolution / shape / scale factor
– Mal : physical resolution / orientation / DPI
Architecturez pour un layout flexible. Préférez l’utilisation de composants à celle de pages monolithiques :
– Laissez le moteur de layout faire son travail
– Focalisez-vous sur le bon set d’assets
– Commencez avec des master assets de haute résolution
– Ne générez que les scales factor nécessaires
– Assurez-vous que le niveau de détail est approprié

John

[Blend] Opérations sur les Path

Dans un précédent article je vous avais présenté comment convertir un objet en Path. Dans cet article nous allons voir comment combiner plusieurs objets en un seul Path.

Nous partirons d’une page contenant un canvas et 3 rectangles.

Etat initial

Etat initial

Dans l’onglet « Objects and Timeline » nous allons sélectionner chacun des rectangles en utilisant la combinaison Ctrl + Clic gauche. On commence par le vert, puis le rouge et enfin le bleu. L’ordre de sélectionner a en effet un impact sur le résultat de l’opération suivante.

Sélection des rectangles

Sélection des rectangles

Lorsque chacun des rectangles a été sélectionné on va les fusionner. Pour cela il faut naviguer dans le menu « Object » et dans le sous-menu « Combine » on sélectionne « Unite ».

Sélection de l'opération d'union

Sélection de l’opération d’union

Le résultat est un Path qui représente l’union des trois rectangles. On remarque que la couleur et le nom de l’élément choisis par Blend correspond au dernier rectangle sélectionné. Ici c’est donc le bleu qui l’emporte.

Résultat de l'union

Résultat de l’union

Vous avez sans doute remarqué d’autres opérations disponibles dans le menu Combine. Voici donc un description de chaque opération. Le résultat, en sélectionnant toujours le rectangle rouge en dernier, est quant à lui visible dans le diaporama en dessous.

Substract

La soustraction va retirer du dernier rectangle sélectionné l’union des deux autres.

Intersect

L’intersection va conserver la forme correspondant à la zone où tous les rectangles se superposent.

Divide

La division va découper la forme résultant de l’union des rectangles avec les bords de chaque rectangle laissant ainsi l’aspect général intact mais fournissant plus de bords.

Exclude Overlap

Cette opération va conserver à l’écran toutes les zones qui ne se superposent pas dans sélection.

Pour mieux comprendre le résultat vous pouvez d’abord effectuer l’opération sur bleu et vert, puis sur la forme résultant et rouge.

Manipulation des Path

Certaines opérations sur les Path sont disponibles dans le menu « Object » et le sous-menu « Path ». Une opération intéressante est « Release Compound Path ». Cette opération va générer autant de Path que possible en suivant les divisions d’une forme.

Diaporama des résultats


Conclusion

Blend dispose de capacités de manipulations d’objets très puissantes et qui sont malheureusement assez peu connues.
Maintenant c’est à vous de tester tout cela et de créer des interfaces toujours plus riches.

Liens utiles :

http://msdn.microsoft.com/en-us/library/vstudio/jj171064.aspx

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

What’s New in Visual Studio & Blend for XAML Developers (3-321)

Session animée par Unni Ravindranathan

La session commence par le fait que l’on apprend que les templates de création de projet ont été mis à jour.

Édition du xaml

  • Améliorations de l’éditeur
  • Nouvelle expériences dans Blend
  • Amélioration dans la performance et la robustesse du designer

Diagnostics

  • Détection des problèmes de responsivité de l’UI
  • Profiling de la consommation d’énergie

Debug d’async

Windows Azure Mobile Services Integration

Store integration

Coded UI testing

.NET

  • Possibilité de voir la valeur de retour des méthodes dans la watch
  • 64 bit edit and continue est maintenant supporté

C++

  • Améliorations de l’éditeur

API Deprecation

  • Ajout du support de la dépréciation des API dans le XAML aussi

Démo Hub avec toutes les nouvelles fonctionnalités de VS2013

Partie spéciale Blend :

  • Retour des behaviors dans Blend
  • Ajouts des règles et des guides dans Blend qui peuvent se réutiliser de page en page
  • Amélioration de la partie device
  • Retour et amélioration de la partie Data
  • Gestion des commandbar
  • Édition des Template avec les données courantes

Une session très intéressante avec pas mal de fonctionnalités que l’on attendait pas/plus.

John Thiriet