Conception d’une application pour Windows 8 avec Blend 5

Donnez votre avis !

Depuis votre smartphone, sur :

http://notes.mstechdays.fr

De nombreux lots à gagner toutes les heures !!!

Claviers, souris et jeux Microsoft…

Merci de nous aider à améliorer les TechDays

http://notes.mstechdays.fr

Conception d'applications

Windows 8 avec Blend 5

Eric Ambrosi

Architecte UX

I-Breed & Peps Interactive

Blend 5 pour Windows 8

http://www.tweened.org

ROAD MAP

Blend 5 pour Windows 8

FORM FACTOR

LE PROJET « GIFT SHOP »

RESPONSIVE BITMAP

CHOISIR LE THÈME A MODIFIER

MISE EN PLACE DU PROJET

SKINNING CONTROLS & PAGES

APPLICATION BAR

QUESTIONS / RÉPONSES

FORM FACTOR

Blend 5 pour Windows 8

Blend permet d’afficher un aperçu au design time de plusieurs combinaisons différentes.

Plusieurs facteurs différents ont un impact sur l’affichage :

• Thème

• Résolution & DPI

• Orientation Portrait / Paysage

• Le Snapped mode et le Filled mode exclusifs à Windows 8

Démo – Thème

LE PROJET « THE GIFT SHOP »

Blend 5 pour Windows 8

Intégration graphique

RESPONSIVE BITMAP

Blend 5 pour Windows 8

Windows 8 offre un redimensionnement dynamique de l’interface utilisateur selon la

résolution et la densité d’affichage correspondant au DPI.

Afin d’optimiser l’affichage des images sur chaque support, on les fournit en plusieurs résolutions.

Elles sont choisies dynamiquement à l’exécution via une convention de nommage valable sur les deux frameworks.

Sur les fichiers bitmap

\illustration.scale-100.jpg ; \illustration.scale-140.jpg ; \illustration.scale-180.jpg

Sur les répertoires

\scale-100\illustration.jpg ; \scale-140\illustration.jpg ; \scale-180\illustration.jpg

<Image Width =“100“ Height=“100” Source=“illustration.jpg“ Margin=“8,8,0,0”/>

Démo – Intégration du logo

CHOISIR UN THÈME DE BASE

Blend 5 pour Windows 8

XAML

1.Récupérer les thèmes.

Les dictionnaires de thèmes sont récupérables dans le themeresources.xaml

C:\Program Files (x86)\Windows Kits\8.0\Include\WinRT\Xaml\Design

2.Stocker le thème choisit dans un dictionnaire de ressource

3.Créer une liaison pour référencer le thème choisi, puis compiler

HTML 5 / CSS 3

Modifier l’accès à la feuille de style par défaut au sein de toutes les pages.

<link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />

Démo – Thème

SKINNING CONTROL - XAML

Blend 5 pour Windows 8

Démo - GridView

SKINNING CONTROL – HTML 5

Blend 5 pour Windows 8

Démo - WinJS.UI.ListView

APPLICATION BAR

Blend 5 pour Windows 8

Win RT– La librairie d’icônes est fournie via la police de caractère Segoe UI Symbol

– Les icônes sont donc au format vectoriel

– Des styles de boutons prêts à l’emploi sont commentés dans le dictionnaire StandardStyles.xaml

– Ces styles héritent d’un style principal « AppButtonBarStyle » qui contient un modèle dédié

APPLICATION BAR

Blend 5 pour Windows 8

Win JS– Dé-commenter le code qui gère la barre d’application dans le code HTML 5 de base

– Ajouter un bouton

<button data-win-control="WinJS.UI.AppBarCommand"

data-win-options="{

id:'homeButton',

label:'Home',

icon:'home',

section:'global',

tooltip:'Go to the home page',

type: 'button‘

}"></button>

MERCI !!!

Blend 5 pour Windows 8

eric@i-breed.com

www.tweened.org

Formez-vous en ligne

Retrouvez nos évènements

Faites-vous accompagner

gratuitement

Essayer gratuitement nos

solutions IT

Retrouver nos experts

Microsoft

Pros de l’ITDéveloppeurs

www.microsoftvirtualacademy.comhttp://aka.ms/generation-app

http://aka.ms/evenements-

developpeurshttp://aka.ms/itcamps-france

Les accélérateurs

Windows Azure, Windows Phone,

Windows 8

http://aka.ms/telechargements

La Dev’Team sur MSDN

http://aka.ms/devteam

L’IT Team sur TechNet

http://aka.ms/itteam