Lors d’un précédent article, nous annoncions la sortie de Windows 8 en Release Preview. Dès lors, nous avons tous migré nos applications sur cette dernière version avec quelques appréhensions sur la liste assez longue des breakings changes la veille des DevKings.

Finalement cela a été une très bonne surprise puisque nous avons eu le droit à une nouvelle version des outils de développement pour WinRT qui sont maintenant très performants et stables : Visual Studio 2012 RC et Expression Blend for Visual Studio RC.

Un très bon duo pour développer efficacement des applications Windows 8, ce que nous allons voir dans cet article.

Nous nous intéresseront d’abord aux évolutions des outils permettant de produire efficacement des interfaces pour des applications “metro style apps”. Puis nous verrons également d’autres outils mis à la disposition des développeurs pour gagner du temps et être efficace dans le développement.

Visual Studio

Cette nouvelle version de Visual Studio apporte de nombreux changements !

Ceux qui sont habitués à utiliser Expression Blend reconnaîtront les différents panneaux : ToolBox, Document Outline, Properties, etc.

Les nouvelles fonctionnalités :

Un designer comme sur Blend, permettant de modifier :

– Les propriétés d’un contrôle de manière aussi détaillée que dans Blend

– Les styles et templates

– Visualiser l’arborescence des contrôles

Pour exploiter au maximum des fonctionnalités du designer, il faut créer des données de test. Cela vous permettra d’avoir un aperçu immédiat de vos pages sans avoir à lancer votre application. Pour cela, prenons l’exemple sur une page de mon application SmartShopping :

Dans mon ViewModel, j’utilise le code suivant, qui va me générer des données si je suis en mode debug et designer :

  public GroupedItemsPageViewModel()
        {
#if DEBUG
            if (Windows.ApplicationModel.DesignMode.DesignModeEnabled)
            {
                LoadDesignData();
            }
#endif
        }
 private void LoadDesignData()
        {
            UserName = "Nathalie";

            SmartShoppingDataSource datasourcesample = new SmartShoppingDataSource();
            Groups = datasourcesample.ItemGroups;
        }
 
Dans ma page XAML, il suffit de déclarer le namespace d et mc puis déclarer le DataContext de la façon suivante :

Le designer vous fournira ainsi un retour visuel immédiat. Dans ma page (cf. l'image ci-dessous), j'ai ainsi un aperçu des ItemTemplate de ma GridView :

Les plus :


- Reset Layout : la possibilité de faire un "reset" d'un contrôle qui a été glissé déposé et qui comporte ainsi des marges, une hauteur et largeur. Pour cela cliquez-droit sur le contrôle et cliquez sur "Reset Layout" => "All", le contrôle est ainsi remit à zéro.

Go to source : en sélectionnant un contrôle ou une propriété utilisant un style, en faisant en clique droit, vous aurez la possibilité de faire un "View Source" ou "Go to source" pour afficher le code XAML correspondant. Très pratique quand vous voulez éditer le code Xaml d'un style très rapidement.

Expression Blend
Maintenant que certaines fonctionnalités de Blend sont intégrées à Visual Studio, que devient Expression Blend ?
Celui-ci conserve tous ce que possède Visual Studio, il reste très utile si vous avez besoin de faire des animations : StoryBoard et VisualState.
Les plus

Blend est doté d'une nouvelle fonctionnalité spécifique à WinRT et très pratique. Cette fonctionnalité vous permet d'avoir un aperçu de votre application dans les différentes vues pour les Metro Style Apps : FullScreenLandscape, Filled, FullScreenPortrait et Snapped.



Comme sur Visual Studio on retrouve la nouveauté "Reset Layout" qui réinitialise toutes nos valeurs en un clic (marges, taille, alignement).



Les manques
N'oublions pas que cette version de Blend n'est pas terminée car ce n'est qu'une version RC. Nous retrouvons cependant quasiment toutes les fonctionnalités de Blend 4.
Le seul manque que j'ai remarqué est le panneau "Data", qui nous permettait de créer des données exemple. Très pratique dans les précédentes version de Blend, cette fonctionnalité n'est pas encore disponible. En attendant, vous pouvez utiliser l'astuce donnée ci-dessus utilisant un ViewModel et la propriété DesignModeEnabled pour générer des données de test à afficher dans votre designer et ainsi avoir le même rendu que sur Visual Studio :

Les thèmes
Pour l'instant nous n'avons pas la possibilité comme sur Windows Phone, de récupérer la couleur d'accentuation (AccentColor) de l'utilisateur. Cependant nous avons le choix entre l'utilisation d'un thème clair ou un thème foncé comme l'image ci-dessous :

Attention, ce choix de thème clair ou thème foncé est propre à notre application. En effet, dans les paramètres de personnalisation du device de l'utilisateur, ce dernier peut choisir uniquement une couleur d'accentuation mais pas de thème clair ou foncé.
Par défaut, les Templates de projet utilisent le thème foncé. Pour changer celui-ci, ouvrez votre fichier App.xaml et ajoutez la ligne suivante :

Pour ensuite modifier les styles de vos contrôles (pas forcément tous ajoutés dans le fichier StandardStyle.xaml en fonction du Template utilisé), vous les trouverez tous dans le fichier generic.xaml qui se situe dans :

C:\Program Files (x86)\Windows Kits\8.0\Include\winrt\xaml\design
Autres outils
Guidelines metro
Un site très complet mis à disposition des développeurs : design.windows.com
Ce dernier regroupe de très nombreuses ressources (documentation, guidelines metro, ressources graphiques, cas d'études, etc.). Vous trouverez également de nombreux projets démo qui portent sur une fonctionnalité en particulier, déclinés dans tous les langages : C++, C#, JavaScript, etc.
Memo Metro style apps GUIDELINES
Un mémo réalisé par moi-même qui résume les points importants dont vous aurez besoin pour réaliser votre application "metro style app".
Voici l'article qui parle de ce mémo : https://devndesign.fr/2012/06/windows-8-memo-sur-les-guidelines-metro-pour-developper-de-belles-applications-windows-8/

=> Télécharger directement le mémo.
Conclusion
De très bons outils pour développer, plus performants et stables que jamais. Si vous avez déjà des connaissances dans le développement XAML (WPF, Silverlight ou Windows Phone), vous ne serez pas perdu. Commencez dès maintenant à créer votre première application Windows 8 !
Pour finir, voici une vidéo qui détaille encore plus les nouvelles fonctionnalités de Visual Studio et Blend : https://blendinsider.com/technical/video-demo-overview-of-xaml-authoring-features-in-blend-and-visual-studio-2012-04-30/