Pour accélérer et obtenir une bonne cohérence entre les différentes interfaces sur des applications Windows Store et Windows Phone, je pratique régulièrement 2 astuces. La première permet de créer des pages à partir d'un ou plusieurs modèles partagés, la deuxième permet de partager au maximum les styles entres les différentes plateformes cibles d'une même application.
Créer vos modèles de page
Je décris ci-dessous une procédure vous permettant de créer un modèle de page. Celui peut alors être simplement réutilisé lorsque vous choisissez "Ajouter un nouvel élément", il apparaît dans le formulaire de création comme ci-dessous.
Bien que la procédure détaillée porte sur une page d'application Windows Store avec XAML/C#, la même procédure pourra être appliquée pour des pages d'applications Windows Store avec HTML/CSS, ou encore Windows Phone 7 et 8.
- Exporter votre page comme modèle de nouveaux éléments.
Cliquer dans le menu sur Fichier > Exporter le modèle pour ouvrir le la fenêtre de dialogue. Choisissez ensuite "modèle d'élément" et le projet dans lequel la page à exporter comme modèle est située. Choisissez l'élément à exporter. Choisissez les références à exporter (elles sont ajoutées au moment de l'import dans le projet). Choisissez le titre, la description, l'icône et décochez l'importation automatique.
- Dézipper le fichier créé dans un sous-dossier du même nom que le fichier zip. Vous pouvez supprimer le fichier zip d'origine. Ouvrez le fichier MyTemplate.vstemplate quelques modifications y sont à réaliser.
- Indiquer le groupe de plateforme auquel appartient le modèle.
Il vous suffit d'ajouter la ligne suivante dans la balise TemplateData pour une application Windows Store:<TemplateGroupID>WinRT-Managed</TemplateGroupID>
pour une application Windows Phone 7 ou 8 utilisez :<TemplateGroupID>Windows Phone</TemplateGroupID>
- (Rendre le modèle non-visible par défaut)
Lorsque vous ajouterez un élément dans un site site Web par exemple ce modèle n'apparaîtra pas. Il faut ajouter la ligne suivante dans le noeud TemplateData.<ShowByDefault>false</ShowByDefault>
- Faire apparaître le modèle de page dans la catégorie supérieure.
Si vous souhaitez voir le modèle dans votre catégorie personnalisée et aussi dans la catégorie parente Visual C#, il suffit d'ajouter la ligne suivante dans le noeud TemplateData.
<NumberOfParentCategoriesToRollUp>1</NumberOfParentCategoriesToRollUp>
- Importer le modèle dans Visual Studio.
Enregistrez les modifications précédentes. Naviguez vers le répertoire "C:\Users\nomutilisateur\Documents\Visual Studio 2012\Templates\ItemTemplates". Créez un nouveau répertoire "Mes Modèles". Et déplacez le répertoire contenant le modèle dans celui-ci.
Vous pouvez maintenant ajouter de nouvelles pages à votre application suivant votre nouveau modèle. Pour aller plus loin, vous pouvez envisager d'intégrer vos modèles de page à une extension de Visual Studio .vsix afin de les diffuser largement.
Répartir et partager vos styles dans différents fichiers
L'idée est de construire plusieurs fichiers de styles qui seront plus ou moins partagés avec les différentes plateformes. Pour le développement d'une solution sur les 3 plateformes en XAML/C#, j'utilise la configuration suivante avec trois types de fichiers selon leur niveau de partage :
- Les couleurs. L'ensemble de color, brush, .. constituent une partie importante de la charte graphique, le fichier contenant celles-ci est partagé sur l'ensemble des applications Windows Store, Windows Phone 7 et 8. Pensez simplement à retirer la référence xmlns:local qui est ajoutée automatiquement à la création d'un dictionnaire de ressources.
- Les styles de textes, boutons, et contrôles de base : Même s'ils sont en général communs aux 3 plateformes, vous ne souhaitez pas utiliser la même taille de texte pour un titre sur la tablette que sur le téléphone. 1 fichier est créé pour l'application Windows Store. 1 autre fichier du même nom est créé et partagé entre les applications Windows Phone 7 et 8.
- Les styles et modèles d'un composant spécifique à une plateforme. Le fichier correspondant est bien entendu créé uniquement pour la dite plateforme par exemple le contrôle Pivot de Windows Phone.
Remarque : le contrôle Pivot existe sur Windows Phone 7 et 8 mais dans une librairie différente. Pour partager le fichier de style, il faudra déclarer l'espace de nom controls pour la réutilisation dans l'application Windows Phone 7 comme dans l'exemple ci-dessous. Notez aussi les références aux dictionnaires de ressources précédents.
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="CustomColors.xaml"/>
<ResourceDictionary Source="CustomStyles.xaml"/>
</ResourceDictionary.MergedDictionaries>
<!-- Pivot's style -->
<Style x:Key="MainPagePivotStyle" TargetType="controls:Pivot">
<Setter Property="Margin" Value="0,50,0,0" />
</Style>
</ResourceDictionary>
Pour partager un même fichier, il suffit de les créer dans le premier projet de "base" (je choisis celui de Windows Store, puis Windows Phone 8). Ensuite, il suffit d'ajouter de les Ajouter en tant que lien dans les autres projets compatibles.
Cliquer sur
Ajouter un élément existant. Dans la fenêtre de choix, naviguez vers le projet de "base" et choisissez le fichier souhaité à importer, enfin cliquer sur "Ajouter en tant que lien".
Le partage des styles complète bien les librairies portables et le modèle d'architecture MVVM afin de partager un maximum de code. Vous pouvez consulter l'article du MSDN magazine de juin 2013 à ce sujet
ici.
have a nice day.
