---

Connect(); 2016

Volume 31, numéro 12

Cet article a fait l'objet d'une traduction automatique.

Xamarin - Xamarin et la plateforme Windows universelle

Par Bruno Whitney ; 2016

Si vous utilisez Xamarin pour cible iOS et Android, vous connaissez les avantages du développement pour plusieurs plateformes à l’aide d’un langage de programmation et code partagé. Vous savez également sur les avantages de l’utilisation de Xamarin.Forms pour réutiliser votre interface Utilisateur Android et iOS tout en conservant la liberté de tirer parti des capacités de plate-forme unique.

Ce que vous connaissez peut-être pas d’est que vous pouvez utiliser ces mêmes outils pour cibler la plate-forme de Windows universelle (UWP), atteindre plus de 400 millions d’appareils et augmenter les téléchargements et engagement sur des appareils iOS et Android en même temps.

Pourquoi cibler la UWP ?

Pourquoi devez vous ciblez votre application pour la série UWP ? Engagement envers l’application, c’est pourquoi. En tant que développeurs, nous voulons atteindre. Nous voulons yeux sur notre contenu. Nous voulons que nos applications à utiliser et les utiliser régulièrement : pour tirer le meilleur parti des achats dans l’application, publier, contenu contributions pour générer écosystème de l’application et ainsi de suite.

La série UWP vous permet d’écrire des applications qui s’exécutent sur les ordinateurs de bureau, les tablettes, téléphones, Xbox, HoloLens et Internet des objets (IoT) de périphériques. C’est plus de 400 millions de sockets potentiels pour votre application. Mais il n’est pas uniquement sur le nombre de périphériques basés sur Windows. Il également sur boosting engagement sur tous les périphériques que vous prenez en charge. Envisagez d’expérience NPR avec son application, un NPR (one.npr.org).

NPR une offre un flux d’actualités radio publique, des récits et podcasts à ses utilisateurs organisé. Cibler Windows considérablement augmenté engagement avec un contenu NPR. Un billet de blog Microsoft (bit.ly/2e30plQ) proposés Ben Schein, responsable produit chez NPR, que dire, « 70 % des écouteurs de NPR utilisent des périphériques Windows, et nous l’avons vu une augmentation de 50 pour cent de leur temps à l’écoute depuis Windows 10 ont fait leur apparition. Et c’était avant que nous avons mis à niveau de notre application. » Comme un bonus inattendu, NPR trouvée également lorsque «... nous avons publié l’application Windows, nous avions un pic imprévu dans iOS et Android téléchargements, ainsi. »

Il parle au fait que nous vivons dans un monde de plusieurs appareil. Nous savons personnes ont des appareils iOS et Android, et nous savons qu’ils ont des PC au bureau ou chez eux. Il est judicieux qu’ils basculent entre ces périphériques en fonction de leur et qu’ils le font dans la journée. Avec votre application disponible sur toutes les personnes de périphériques utilisation rend plus probable qu’ils devront coopérer avec votre application et de votre contenu.

Envisagez une journée normale où quelqu'un remplace le bus fonctionne. Sur le bus, elle commence à travailler sur une tâche sur son téléphone, telles que la lecture d’un rapport. Une fois qu’elle obtient fonctionne, elle voudrez sélectionnent cette tâche sur un poste de travail en exportant le rapport dans Microsoft Excel pour une analyse plus. Sur le trajet de retour de bus, elle peut commencer à regarder une vidéo. Lorsqu’il arrive accueil, elle peut passer à un PC, ou pour une expérience de salon grand écran avec une console Xbox et de sélection regarder où elle s’est arrêté.

Dans chacun de ces cas, reach n’est tout simplement sur les périphériques de que votre application peut s’exécuter, même si cela est clairement importante. Couverture concerne également comment votre application permet de transition d’utilisateurs entre les périphériques qu’elles tentent d’effectuer leurs tâches sur l’appareil le mieux adapté au moment.

Quelle est la série UWP ?

La série UWP fournit une plate-forme d’application commune qui est disponible sur chaque appareil fonctionnant sous Windows 10.

Outre un ensemble commun d’API disponible sur tous les périphériques basés sur Windows 10, spécifique au périphérique API permettre de tirer le meilleur parti d’un périphérique. Je vais maintenant étudier certains des principaux avantages que du UWP fournit aux développeurs.

Adaptative et l’interface Utilisateur de magnifiques le UWP est conçu pour aider votre application de s’adapter aux différentes tailles d’écran et les types d’entrée. Il fournit des contrôles d’interface Utilisateur et les contrôles de disposition qui s’adaptent au périphérique sur lequel ils sont exécutés qu’il s’agisse d’un écran de petite téléphone ou un écran de centre de divertissement de grande taille.

Figure 1 présente un exemple de l’interface Utilisateur ADAPTATIVE. Notez l’emplacement du contrôle bouton et d’image appel sur le périphérique mobile. Lorsque l’application s’exécute sur le téléphone, la taille de l’appel du bouton change et sa position ajuste, rendant l’interface Utilisateur plus facile à utiliser avec une seule main. L’emplacement de l’image est ajustée sur le téléphone pour prendre en compte le plus petit écran.

Figure 1 une Interface adaptative

Les contrôles intégrés acceptent le type d’entrées disponibles sur le périphérique, qu’ils soient entrée tactile, stylo, clavier, souris ou contrôleur Xbox.

Vous pouvez écrire de superbes applications avec la nouvelle API de composition. Vous pouvez également créer des animations (y compris les animations de trame clé) et appliquer des effets tels que les ombres portées, miniatures d’éclairage, flous, opacité, mise à l’échelle des effets d’animation, rotation de la teinte, éléments de ListView parallaxe, ordre de défilement, sépia, contraste et bien plus encore. Consultez ces effets pour vous par clonage et l’exécution du projet WindowsUIDevLabs sur GitHub (bit.ly/2e3PDqo).

Les applications UWP peuvent fournir des vignettes dynamiques et les notifications, comme indiqué dans Figure 2, pour présenter des informations en un clin de œil pour votre application. Vignettes dynamiques et notifications peuvent améliorer engagement envers l’application jusqu'à 20 %, car ils apportent aux utilisateurs à votre application.

Figure 2 des mosaïques en direct et une Notification

ADAPTATIF Code prend parti des forces de l’appareil le UWP vous permet de personnaliser l’expérience pour tirer parti des forces de divers types de périphériques. Vous pouvez écrire du code adaptatif qui tire parti des fonctionnalités d’un périphérique spécifique uniquement lorsque l’application est en cours d’exécution sur ce type d’appareil ou cibler votre application à un type spécifique de périphérique. Visual Studio filtre les API disponibles à ceux de la catégorie de périphérique que vous ciblez. Le Windows Store s’étend des applications disponibles pour le type de périphérique utilisé. Les applications UWP sont disponibles sur tous les appareils.

Cortana APIs fournissent la possibilité d’ajouter des commandes vocales à votre application. Actions d’application de s’inscrire sur le portail de Cortana et Cortana vous propose des actions qui concernent votre application au bon moment et au lieu.

Pour vous aider à écrire des applications attrayantes pour la série UWP, Visual Studio fournit exceptionnelle de codage et outils de débogage. Les ressources sont disponibles pour vous aider à écrire votre application, telles que des exemples de code (bit.ly/1RhG46l), extraits de tâches (bit.ly/2dINSo9), une communauté active de développeurs à partir de laquelle vous pouvez obtenir, d’aide et de bibliothèques, telles que le Kit d’outils UWP Community (bit.ly/2b1PAJY), qui fournit des services pour Twitter et Facebook, des contrôles personnalisés et des animations. Vous pouvez ensuite produire un package peut être installé sur tous les périphériques UWP.

Obtenir votre application client mains, avec moins de Friction le Windows Store réduit les coûts par l’installation en facilitant la distribuer à un public plus large. Elle gère des ventes au-delà des limites géographiques, ce qui vous évite d’avoir à comprendre l’infrastructure des opérations bancaires et des taxes lois dans d’autres pays et permet de réduire la friction d’atteindre les régions en dehors de votre propre. La banque gère également le Gestionnaire de licences pour les applications qui partagent le contenu entre les périphériques sans que vous ayez à construire une infrastructure pour gérer ces problèmes.

Le magasin fournit l’expérience à laquelle vous êtes habitué à partir d’un magasin d’applications, telles que les mises à jour automatiques, Gestionnaire de licences, essais et ainsi de suite. Il convertit un grand réseau en mettant à disposition de votre application à des centaines de millions d’utilisateurs de Windows 10.

La série UWP fournit les fonctionnalités pour créer des applications riches, exécutez-les dans une vaste gamme de périphériques et les rendre disponibles pour vos clients. Comme vous le verrez, il n’est pas difficile de cibler la UWP à partir de Xamarin.

Ajouter un projet UWP à votre application Xamarin.Forms existante

Je vais vous montrer comment un projet UWP a été ajouté à l’exemple de code de James Montemagno cotations boursières sur GitHub (bit.ly/2dYHEvs), qui est une solution Xamarin.Forms ciblant iOS, Android et la série UWP.

Je vais supposer que vous avez Visual Studio 2015 Update 3 s’exécutant sur Windows 10 et que Xamarin est installé et up-to-date.

Si vous souhaitez suivre les étapes, cloner l’exemple de code, supprimez le projet MyStocks.Forms.UWP et ajouter de nouveau avec les étapes suivantes :

1. Ajouter un projet UWP à la solution Xamarin.Forms.
2. Ajoutez une référence à partir du projet UWP à Xamarin.Forms.
3. Ajoutez une référence pour le Portable classe bibliothèque (PCL) qui contient les formulaires partagées.
4. Modifier le code dans le projet UWP utilise Xamarin.Forms et chargement de l’application à partir du projet PCL partagé.

Examinons ces une étape à la fois.

Ajouter un projet de UWP vide à votre Solution existante de Xamarin.Forms une fois que vous avez chargé la solution MyStocks.Forms dans Visual Studio, cliquez sur le nœud solution et choisissez Ajouter | Nouveau projet. Dans la boîte de dialogue Ajouter un nouveau projet, accédez à Visual c# | Windows | Universal et sélectionnez application vide (Windows Universal). Nommez le projet MyStocks.Forms.UWP et cliquez sur OK.

Ensuite, vous verrez la boîte de dialogue Nouveau projet Windows universel, ce qui vous invite à choisir les versions minimales de plate-forme qui prend en charge votre application UWP. Cliquez sur OK pour sélectionner les valeurs par défaut.

Maintenant que vous avez ajouté un projet UWP à votre solution de Xamarin, avec le bouton droit de nœud des références du projet UWP nouveau et sélectionnez Manage NuGet Packages.

Lorsque la fenêtre du package NuGet s’affiche, sélectionnez Parcourir, tapez « forms » dans la zone de recherche pour restreindre la liste, puis sélectionnez Xamarin.Forms dans la liste. Sélectionnez la dernière version disponible dans la liste déroulante située à droite, remarquez de quelle version il s’agit et cliquez sur Installer (voir Figure 3).

Figure 3 le Gestionnaire de Package NuGet

Vérifiez vos projets ciblent la même Version si vous avez d’autres projets Xamarin.Forms dans votre solution, assurez-vous qu’ils utilisent la même version de Xamarin.Forms que vous avez ajouté à votre projet UWP. Pour savoir quelle version de Xamarin.Forms utilisent les autres projets, sélectionnez un projet (par exemple, MyStocks.Forms.Android), cliquez sur son nœud Références et sélectionnez Manage NuGet Packages. Vérifiez Qu'installé est sélectionné, tapez « forms » dans la zone de recherche pour restreindre la liste, puis recherchez Xamarin.Forms dans la liste des packages NuGet installés. Vérifiez que la version correspond à la version de Xamarin.Forms vous utilisez dans votre projet MyStocks.UWP. Mettre à jour s’il s’agit d’une version antérieure (voir Figure 4).

Correspond à la figure 4, vérifier les Versions de Xamarin.Forms

Ajouter une référence à la bibliothèque PCL qui contient les formulaires partagé vous souhaitez que l’interface Utilisateur pour le projet UWP à utiliser l’interface Utilisateur partagé dans le projet Xamarin.Forms. Pour cela, le nouveau projet UWP doit faire référence à la bibliothèque PCL qui contient les formulaires partagés. Dans le projet My.Stocks.Forms.UWP, cliquez sur le nœud Références et choisissez Ajouter une référence. Dans le Gestionnaire de références qui s’affiche, assurez-vous que les projets | Solution est sélectionné, puis sélectionnez MyStocks.Forms pour ajouter la référence (voir Figure 5).

Figure 5 Ajout d’une référence à l’ordinateur Portable : bibliothèque de classes

Modifier le Code dans le projet Xamarin.Forms utiliser UWP et chargement de l’application à partir du projet PCL partagé maintenant je dois remplacer le code dans le modèle d’application, qui a été ajouté en tant que partie du nouveau projet UWP, afin qu’il utilisera Xamarin.Forms pour charger l’application à partir du projet PCL partagé. Insérez le code en surbrillance suivant le début de l’élément App::OnLaunched, qui se trouve dans MyStocks.Forms.UWP | App.Xaml | App.Xaml.cs :

protected override void OnLaunched(LaunchActivatedEventArgs e)
{
  // Initialize Xamarin.Forms here
  Xamarin.Forms.Forms.Init(e);
  #if DEBUG
  ...
}

Dans le constructeur MainPage, c'est-à-dire dans MyStocks.Forms.UWP | MainPage.xaml | MainPage.xaml.cs, ajoutez le code en surbrillance suivant pour charger le projet Xamarin.Forms :

public MainPage()
{
  this.InitializeComponent();
  this.LoadApplication(new MyStocks.Forms.App());
}

Dans le même fichier, supprimez l’héritage de MainPage de Page :

public sealed partial class MainPage : Page

Apportez les modifications suivantes à MainPage.xaml (MyStocks.Forms.UWP | MainPage.xaml) :

• À l’intérieur de la balise < Page >, ajoutez : xmlns:forms="using:Xamarin.Forms.Platform.UWP » :

<Page
    x:Class="MyStocks.Forms.UWP.MainPage"
    xmlns:forms="using:Xamarin.Forms.Platform.UWP"
    ...

• Modifier la balise d’ouverture < Page > à < forms : WindowsPage et assurez-vous que la balise de fermeture passe de < / Page > à < / formulaires : WindowsPage >

La page hérite désormais de Xamarin.Forms.Platform.UWP.WindowsPage.

Ajouter le projet MyStocks.Forms.UWP à la Configuration de Build après l’ajout d’un projet UWP à votre projet Xamarin.Forms, assurez-vous qu’il est configuré pour générer. Tout d’abord, avec le bouton droit sur le nœud du projet MyStocks.Forms.UWP et sélectionnez Définir comme projet de démarrage.

Avec le bouton droit sur le nœud de solution, puis sélectionnez Gestionnaire de Configuration. Dans la boîte de dialogue Gestionnaire de Configuration, vérifiez que les cases à cocher MyStocks.Forms.UWP pour la génération et le déploiement sont activées.

Si vous avez été suivi ces étapes, vous avez supprimé initialement le projet MyStocks.Forms.UWP. Le nouveau projet MyStocks.Forms.UWP n’a pas l’image d’arrière-plan ou les packages NuGet qui ont été ajoutés au projet d’origine pour obtenir la valeur d’un symbole de cotation, accéder à l’API Twitter et ainsi de suite. Pour afficher le résultat de la procédure pour ajouter un projet UWP exemple d’application de James Montemagno, cloner une copie actualisée de son projet GitHub sur le lien fourni précédemment, ou installer les packages NuGet suivants à votre projet MyStocks.Forms.UWP : linqtotwitter, Microsoft.Bcl, Microsoft.BCL.Build, Microsoft.Bcl.Compression, Microsoft.Net.Http, Newtonsoft.Json et Xam.Plugins.TextToSpeech.

Vous avez maintenant ajouté un projet UWP à votre solution de Xamarin. Le projet UWP charge et exécute l’application Xamarin.Forms à partir du modèle application vide UWP. Figure 6 montre l’application en cours d’exécution sur Android, iOS et Windows 10.

Figure 6 application sur différents systèmes d’exploitation

Xamarin.Forms effectue le travail de contrôles de mappage à partir du projet de formulaire partagée au projet UWP a été ajouté. Xamarin.Forms offre également un moyen d’introduire la spécificité de la plateforme, si vous avez besoin, tout en partageant des autres parties de l’interface Utilisateur. Consultez l’article de Petzold, « Incorporation de vues dans votre Xamarin.Forms applications natives, » ce problème et Kevin Ashley septembre 2016, « Cross-Platform productivité avec Xamarin » (bit.ly/2dYKr8a), pour plus de détails.

Dans le projet UWP passe des fonctionnalités spécifiques à votre application UWP, telles que les vignettes dynamiques, des icônes personnalisées, des notifications et ainsi de suite.

Pour résumer

Si vous n’utilisez pas Xamarin.Forms pour votre interface Utilisateur, vous pouvez toujours ajouter un projet UWP à votre solution. Vous pouvez partager du code à l’aide d’un projet de ressource partagé, PCL ou une bibliothèque Standard de .NET. Voir « Création d’Applications inter-plateformes » sur le site de développement de Xamarin (bit.ly/2e3bV0C) pour plus d’informations sur les meilleures pratiques.

Microsoft a acheté Xamarin et continue à investir dans le projet open source (bit.ly/1MZsCFE). Nous encourageons vos commentaires et vos contributions !

---

Tyler Whitney est un développeur de contenu senior chez Microsoft.  Il est écrit sur Windows Embedded Compact et écrit désormais sur le développement de Windows 10.

Merci aux experts techniques Microsoft suivants d'avoir relu cet article : Jim Cox, la norme Estabrook, James Montemagno et Jason ShortJim Cox. Responsable de programme chez Microsoft.

Jason courte, programme senior chez Microsoft.

James Montemagno, responsable de programme Xamarin chez Microsoft.

Norme Estabrook (développeur de contenu Senior chez Microsoft).