Silverlight est la principale plate-forme de développement d'applications pour Windows Phone 7. Dans un précédent tutoriel, nous avions expliqué comment configurer votre système pour le développement sous Windows Phone 7. Nous avons ensuite développé très simple application Silverlight qui fait pivoter un bouton autour d’une grille. Cet article vous présente les fonctionnalités plus avancées de Silverlight et vous permet de développer des applications significatives qui affichent les données de manière intéressante et unique..
Cet article vous présente un certain nombre de fonctionnalités Windows Phone 7 et Silverlight de niveau intermédiaire, notamment les ressources d'application, les styles, les modèles de données et la navigation dans les vues. Vous profiterez de la liaison de données et WP7 des services qui vous permettent de naviguer entre les pages rapidement et facilement. Vous devez connaître un peu le XAML et le C # avant de commencer ce tutoriel..
Créer votre projet
Dans ce didacticiel, vous allez créer un client Digg simple qui permet à un utilisateur de parcourir des histoires par sujet. Vous tirerez parti des fonctionnalités Silverlight et Windows Phone 7 de niveau intermédiaire, notamment des ressources d'application, des styles, des modèles de données et des services de navigation. Vous utiliserez la liaison de données pour afficher les informations de Digg et de divers WP7 des services pour permettre aux utilisateurs de contourner votre application.
Pour commencer, assurez-vous que les derniers outils de développement Windows Phone 7 sont installés sur votre ordinateur. Les outils ont été mis à jour le 12 juillet 2010, vous devrez peut-être désinstaller un ancien CTP et installer les outils Bêta..
Ouvrez Visual Studio 2010 et cliquez sur Nouveau projet dans la barre latérale gauche. Dans la boîte de dialogue qui s'affiche, sélectionnez «Application Windows Phone» parmi les modèles disponibles et nommez votre projet comme «SimpleDigg». Assurez-vous que la case à cocher «Créer un répertoire pour la solution» est cochée, puis cliquez sur «OK». Votre paramètre devrait ressembler à ceci:
Une fois votre projet créé, Visual Studio ouvre MainPage.xaml pour le modifier. Fermer ce fichier pour l'instant.
Création de classes de données Digg
Pour accéder aux données de Digg, nous utiliserons leur API officielle. En particulier, nous utiliserons les méthodes story.getAll et topic.getAll. Vous trouverez des exemples de réponses pour chaque appel aux adresses suivantes:
story.getAll
topic.getAll
Comme vous pouvez le voir, story.getAll renvoie les éléments de l'histoire. Les histoires ont beaucoup de données associées, mais nous allons nous concentrer sur 4 informations:
Titre
La description
Diggs
Lien
Créons la classe pour contenir ces données. Dans l'explorateur de solutions de Visual Studio (qui est ouvert par défaut dans la barre latérale droite), cliquez avec le bouton droit de la souris sur votre projet et choisissez «Ajouter> Nouveau dossier». Nommez ce nouveau dossier Digg. Cliquez avec le bouton droit sur le dossier que vous venez de créer et choisissez «Ajouter> Classe…». Nommez votre classe Récit et cliquez sur le bouton Ajouter.
Visual Studio ouvrira votre nouvelle classe pour l’édition. Dans la définition de classe, ajoutez quatre propriétés publiques comme suit:
chaîne publique Title get; ensemble; chaîne publique Description get; ensemble; chaîne publique Link get; ensemble; public int Diggs get; ensemble;
Maintenant, ajoutez la classe qui contiendra les données de sujet. Faites un clic droit sur votre Digg dossier à nouveau et choisissez “Ajouter> Classe…”. Nommez votre classe Sujet et ajoutez les propriétés suivantes à l'ouverture du fichier:
chaîne publique Nom get; ensemble; chaîne publique ShortName get; ensemble;
À ce stade, vous avez créé toutes les classes de données dont vous avez besoin pour ce tutoriel et êtes prêt à baliser les vues nécessaires pour le reste de l'application..
Créer des vues
Le client SimpleDigg a trois vues différentes qui doivent être créées. Elles sont:
Liste de sujets - Liste tous les sujets sur Digg
Liste d'histoires - Répertorie les histoires extraites de Digg en fonction d'un sujet particulier
Détail de l'histoire - Affiche des détails sur une histoire sélectionnée
Liste de sujets
La liste des sujets sera le premier écran que les utilisateurs verront au démarrage de votre application. Il comprend une liste de noms de sujets qui, lorsque l’on clique sur l’un des sujets, mène à une liste d’histoires dans ce sujet. Comme ce sera le premier écran visible par les utilisateurs, nous allons continuer et utiliser le fichier MainPage.xaml créé précédemment et existant déjà dans le projet. Ouvrez MainPage.xaml et vous devriez voir une représentation visuelle à gauche et le balisage de la vue à droite..
Cliquez sur le texte "Mon application" dans la représentation visuelle et notez qu’un TextBlock L'élément dans la représentation XAML est mis en évidence. Cette TextBlock a un Texte attribut actuellement occupé par la valeur "MON APPLICATION". Modifiez cette valeur comme vous le souhaitez. Je recommande «Simple Digg». Vous constaterez que le concepteur visuel est mis à jour en fonction de vos modifications..
Maintenant, répétez le processus avec la chaîne "nom de la page". Cliquez sur le texte, trouvez le bon TextBlock et modifier le Texte attribut. Cette fois, je recommande de le changer en «Sujets». Si vous avez tout fait correctement jusqu'à ce point, vous devriez avoir un StackPanel élément qui contient deux @ TextBlock @ s, chacun avec une valeur appropriée. Le XAML ressemble à ceci:
Maintenant, vous devez ajouter le conteneur de liste à votre page. Ouvrez la Boîte à outils Contrôles (située à gauche de Visual Studio) et faites glisser un élément ListBox dans la grande zone vide de votre page. Vous devez le modifier pour étirer la largeur et la hauteur de son conteneur. Placez donc votre curseur dans l'éditeur XAML et modifiez l'élément ListBox comme suit:
Ce balisage supprime tous les styles introduits par le concepteur visuel et renomme l'élément pour vous permettre d'accéder aux éléments qu'il contient. À ce stade, vous avez terminé le balisage de la vue Liste des rubriques et pouvez maintenant passer aux autres parties de l'application.
Liste des histoires
La vue de la liste des histoires est très similaire à la liste des sujets. Pour des raisons d'organisation, nous allons placer cette vue (et plus tard, la vue Détails de l'histoire) dans un dossier séparé. Cliquez avec le bouton droit sur le nom de votre projet dans l'explorateur de solutions et choisissez «Ajouter> Nouveau dossier». Nommez le nouveau dossier. Des vues. Ensuite, faites un clic droit sur le Des vues dossier et choisissez “Ajouter> Nouvel élément…” Sélectionnez le Page Portrait Windows Phone modèle et nommez-le Histoires.xaml. Votre boîte de dialogue devrait ressembler à ceci:
Maintenant, comme auparavant, modifiez le titre de l'application en «Simple Digg» et le nom de la page en «Histoires». Ensuite, faites glisser un contrôle ListBox sur l'espace vide situé sous le titre de votre page et modifiez son balisage de la manière suivante:
À ce stade, la vue de votre liste d’histoires est presque identique à votre liste de sujets. Les vraies différences apparaissent lorsque vous les remplissez avec des éléments de données.
Détails de l'histoire
La vue finale de votre application est la vue Détails de l'histoire. La vue Détails de l'histoire présentera les 4 éléments de données dont nous avons parlé précédemment:
Titre
La description
Diggs
Lien
Le nombre de Diggs et le titre occuperont le haut de la vue et la description de l'histoire suivra ci-dessous. Après cela, un lien permettra à l'utilisateur de naviguer vers l'histoire en question s'il le souhaite..
Comme auparavant, faites un clic droit sur le Des vues dossier de votre projet et choisissez Ajouter> Nouvel élément. Sélectionnez le Page Portrait Windows Phone modèle et nommez votre nouvelle vue Story.xaml. Cliquez sur Ajouter et Visual Studio créera Story.xaml et l'ouvrir pour l'édition.
Modifiez les blocs de texte du titre de l'application et du titre de la page pour qu'ils se lisent respectivement «Simple Digg» et «Story». Maintenant, faites glisser un StackPanel dans l'espace vide sous le titre de votre page. Faites glisser un autre StackPanel dans le précédent StackPanel. Ce StackPanel contiendra le titre de l'histoire et le nombre de Digg. Vous voulez que ces éléments soient alignés les uns à côté des autres, alors changez le Orientation propriété à Horizontal.
Enfin, faites glisser un TextBlock et un Bouton dans ton premier StackPanel. le TextBlock contiendra la description de l'histoire tandis que la Bouton permettra à l'utilisateur de visiter la source de l'histoire. Vous allez devoir modifier en profondeur la propriété de ces éléments et, au lieu de les parcourir un par un, assurez-vous simplement que votre balisage ressemble à ce qui suit:
Vous pouvez voir que nous avons supprimé le plus explicite la taille et Largeur propriétés et changé Texte et prénom propriétés à quelque chose d'un peu plus descriptif. Cela semble un peu moche en ce moment, mais nous réglerons cela plus tard. Si vous avez tout balisé correctement, votre volet de concepteur visuel devrait alors ressembler à ceci:
À ce stade, les bases de toutes les vues nécessaires sont terminées. Vous pouvez appuyer sur F5 pour lancer l'application pour confirmer que tout fonctionne, mais vous obtiendrez simplement un écran vide avec «Sujets» en haut..
Personnalisation du mappeur de navigation
Vous devez ensuite vous assurer que vous pouvez diriger les utilisateurs autour de votre application. Pour ce faire, vous utiliserez la cartographie de navigation de Silverlight avec quelques règles simples. Ouvrez votre projet App.xaml déposer et placer votre curseur à l'intérieur de l'ouverture Application élément et ajoutez un nouvel espace de nom comme suit:
xmlns: nav = "espace de noms clr: System.Windows.Navigation; assembly = Microsoft.Phone"
Ceci fait référence à l'espace de noms Windows System Navigation (une fonctionnalité Silverlight) et vous permet d'utiliser les différentes classes de la bibliothèque qu'il contient. Maintenant, trouvez le Ressources.application élément dans App.xaml et ajoutez les éléments suivants:
Le code que vous venez de créer crée divers mappages d'URI pour les vues de votre application. Ils correspondent respectivement à la liste des sujets, à la liste des histoires et aux vues détaillées des histoires. Comme vous pouvez le constater, le mappage de navigation Silverlight vous permet de définir des variables de requête dans vos mappages personnalisés. Cela nous sera utile plus tard, lorsque nous allons renseigner les données..
Vous n'en avez pas fini avec le mappage d'URI, cependant. Vous devez indiquer à votre application de l'utiliser UriMapper, alors ouvrez le App.xaml code derrière en cliquant sur la flèche à côté de App.xaml et ouverture App.xaml.cs. À l'intérieur de la App méthode après l'appel à InitializePhoneApplication () ajoutez la déclaration suivante:
RootFrame.UriMapper = Ressources ["UriMapper"] en tant que UriMapper;
Cette instruction indique à votre application d’utiliser le UriMapper que vous venez de définir dans XAML pour votre application de téléphone. Maintenant, commençons à renseigner des données.
Remplir la liste des sujets
La première chose à faire est de renseigner la liste des sujets. Nous le ferons lorsque l'utilisateur accédera pour la première fois au MainPage.xaml page. Pour vous assurer que cela se produit, vous allez remplacer le OnNavigatedTo méthode pour la Page d'accueil classe. Ouvrir MainPage.xaml.cs en cliquant sur la flèche à côté de MainPage.xaml. Placez votre curseur après le constructeur et ajoutez le code suivant:
protection annulée de remplacement OnNavigatedTo (System.Windows.Navigation.NavigationEventArgs e) base.OnNavigatedTo (e); WebClient digg = nouveau WebClient (); digg.DownloadStringCompleted + = new DownloadStringCompletedEventHandler (digg_DownloadStringCompleted); digg.DownloadStringAsync (new Uri ("http://services.digg.com/1.0/endpoint?method=topic.getAll")); void digg_DownloadStringCompleted (expéditeur d'objet, DownloadStringCompletedEventArgs e)
Vous pouvez voir cela à l'intérieur du OnNavigatedTo méthode vous créez un WebClient object, attribuez-lui un gestionnaire d'événements pour le téléchargement d'une chaîne, puis indiquez-lui de télécharger la chaîne à partir de Digg. topic.getAll URL de la méthode. Nous savons que la chaîne à télécharger sera au format XML. Nous devons donc nous assurer que notre gestionnaire d'événements peut analyser le code XML. Pour ce faire, nous utiliserons les bibliothèques Linq disponibles dans le framework .NET. Avant de pouvoir utiliser ces classes de bibliothèque, nous devrons toutefois ajouter une référence à la bibliothèque. Cliquez avec le bouton droit de la souris sur l’élément «Références» dans le volet Explorateur de solutions et choisissez «Ajouter une référence…». Dans la liste qui apparaît, sélectionnez System.Xml.Linq et cliquez sur "OK".
Maintenant, il vous suffit de renseigner le gestionnaire d’événements que vous avez créé. Changement digg_DownloadStringCompleted il ressemble donc à ce qui suit:
void digg_DownloadStringCompleted (expéditeur de l'objet, DownloadStringCompletedEventArgs e) if (e.Error! = null) return; XElement topicXml = XElement.Parse (e.Result); var topics = du sujet dans topicXml.Descendants ("topic"), sélectionnez le nouveau sujet Nom = topic.Attribute ("nom"). Valeur, Nom abrégé = topic.Attribute ("nom_brève"). Valeur; TopicsList.ItemsSource = topics;
Tout d’abord, vous vérifiez si le téléchargement s’est terminé avec succès. Si c'était le cas, vous analysez la chaîne résultante et générez une collection de rubriques à l'aide de Linq to XML. Si cela vous intéresse, vous pouvez en savoir plus sur Linq to XML sur le site officiel de MSDN..
Enfin, vous attribuez le ItemsSource propriété du Liste de sujets aux sujets que vous avez analysés. Si vous voyez une ligne sinueuse sous Sujet, placez votre curseur après celle-ci, cliquez sur la flèche vers le bas qui apparaît sous le mot et sélectionnez «using SimpleDigg.Digg». À ce stade, vos sujets sont renseignés. Lancez donc votre émulateur de téléphone en appuyant sur F5. Vous devriez voir quelque chose comme:
Comme vous pouvez le constater, votre liste a été remplie mais les données correctes ne sont pas affichées. Prenons-en soin maintenant.
Modèles de données
Les modèles de données sont l’un des outils les plus puissants de votre boîte à outils Silverlight. Ils vous permettent de définir le balisage à afficher pour les objets arbitraires. Nous allons maintenant définir les DataTemplates pour les sujets et les histoires Digg. Ouvrir App.xaml et placez votre curseur à l'intérieur du Ressources.application élément. Ajoutez l'élément suivant:
Ce DataTemplate fournit contient un simple TextBlock élément qui est lié à la prénom propriété de l'objet affiché. Si vous vous en souvenez, le Digg.Topic la classe contient un prénom propriété qui est définie sur le prénom attribut renvoyé par l'appel de l'API Digg Topics. Retournez à votre MainPage.xaml et trouver le ListBox élément. Ajouter une nouvelle propriété ItemTemplate au ListBox comme suit:
ItemTemplate = "StaticResource TopicTemplate"
Cette ligne de code indique à l’application d’utiliser votre fichier précédemment créé. DataTemplate ressource pour afficher les objets de sujet qui composent la ListBoxcollection de. Si vous appuyez sur F5 et exécutez votre application, vous verrez que les noms de rubrique sont correctement affichés maintenant:
Récupérer et afficher des histoires
À ce stade, nous sommes prêts à commencer à chercher des histoires par sujet et à les énumérer. Tout d'abord, nous devons dire à l'application que lorsqu'un titre de sujet est sélectionné, l'application doit accéder à la liste des histoires. Ouvrir MainPage.xaml et trouvez votre ListBox élément. Ajouter le SelectionChanged et permettez à Visual Studio de créer un nouveau gestionnaire d’événements. Dans MainPage.xaml.cs, changez votre gestionnaire d’événements pour qu’il se présente comme suit:
Si vous exécutez votre application maintenant (en appuyant sur F5), vous pouvez voir que vous accédez à la page Histoires chaque fois que vous sélectionnez un sujet. Maintenant, nous devons simplement renseigner la liste d’histoires et les afficher correctement. Comme nous l'avons fait plus tôt, nous allons remplacer la OnNavigatedTo méthode pour y arriver. Ouvrir Vues / Histoires.xaml.cs et ajoutez le code suivant:
protection annulée de remplacement OnNavigatedTo (System.Windows.Navigation.NavigationEventArgs e) base.OnNavigatedTo (e); Nom de chaîne; NavigationContext.QueryString.TryGetValue ("Sujet", nom sortant); Client WebClient = nouveau WebClient (); client.DownloadStringCompleted + = new DownloadStringCompletedEventHandler (client_DownloadStringCompleted); client.DownloadStringAsync (nouvel Uri ("http://services.digg.com/1.0/endpoint?method=story.getAll&topic=" + nom)); void client_DownloadStringCompleted (expéditeur de l'objet, DownloadStringCompletedEventArgs e) if (e.Error! = null) return; XElement storyXml = XElement.Parse (e.Result); var stories = de story dans storyXml.Descendants ("story"), sélectionnez une nouvelle Digg.Story Title = story.Element ("title"). Valeur, Description = story.Element ("description"). Valeur, Diggs = Int32. Analyse (story.Attribute ("diggs"). Valeur), Link = story.Attribute ("lien"). Valeur; StoriesList.ItemsSource = stories;
Beaucoup de cela semblera familier. La seule partie qui peut sembler étrange est la récupération du nom de la rubrique. Si vous vous en souvenez, vous avez cartographié / Sujets / topic à /Views/Stories.xaml?Topic=topic. Autrement dit, vous autorisez la variable de chaîne de requête de sujet à être transmise dans un format convivial. Lorsque nous avons navigué à partir de la liste des sujets, nous avons passé le nom abrégé du sujet dans l'URI relatif. Dans le code ci-dessus, lors de la navigation dans la liste d'histoires, nous récupérons cette variable et l'utilisons pour appeler l'URL de l'API Digg avec un sujet spécifique..
Nous savons que si nous lançons notre application à ce stade, nous n'obtiendrons pas le genre de présentation que nous souhaitons pour notre liste d'histoires. Définissons un autre DataTemplate à utiliser dans cette vue. S'ouvrir App.xaml et ajoutez le code suivant à votre Ressources.application élément.
Maintenant, ouvrez Vues / Histoires.xaml et modifiez votre ListBox élément de sorte qu'il se lit comme suit:
Exécutez votre application en appuyant sur F5 et cliquez sur un nom de sujet. Attendez un moment, et vous verrez vos histoires apparaître. Nous devons ensuite afficher les détails de l’histoire sur la page de détail..
Affichage des détails de l'histoire
Afin d'afficher les détails de l'histoire, nous devons d'abord autoriser la navigation vers la page de détail de l'histoire, puis nous allons gérer l'affichage des données. Dans la liste des histoires, nous avons plusieurs éléments d’histoire. Lorsque l’un d’eux est sélectionné, nous souhaitons le stocker. Récit object quelque part et ensuite l'utiliser sur la page de détails de l'histoire. Pour ce faire, nous allons ajouter un gestionnaire d’événements au SelectionChanged événement comme suit:
Ici, vous stockez l’histoire sélectionnée dans la PhoneApplicationService la classe Etat comme le recommandent les meilleures pratiques du modèle d’exécution. Si vous avez une ligne ondulée rouge sous PhoneApplicationService puis placez votre curseur à l'intérieur du mot, puis sélectionnez le menu déroulant qui apparaît et choisissez «à l'aide de Microsoft.Phone.Shell»..
Maintenant, nous devons récupérer ceci à l’autre bout. Ouvrez votre Vues / Story.xaml.cs et ajoutez le code suivant qui remplace OnNavigatedTo:
protection annulée de remplacement OnNavigatedTo (System.Windows.Navigation.NavigationEventArgs e) base.OnNavigatedTo (e); Digg.Story story = PhoneApplicationService.Current.State ["Story"] en tant que Digg.Story; this.DataContext = story;
Ici, vous interceptez la navigation vers la vue des détails de l’histoire, récupérez l’histoire stockée dans PhoneApplicationServicede Etat propriété, puis supprimez l'histoire de la PhoneApplicationServicede Etat collection. Vous définissez ensuite le DataContext pour la vue de l'histoire récupérée. C’est la clé, car nous allons utiliser cette liaison pour faire afficher les données appropriées.
Ouvrez votre balisage pour l'affichage des détails de l'histoire dans Vues / Story.xaml. Modifiez-le pour utiliser les liaisons comme suit:
Si vous lancez votre application maintenant (appuyez sur F5), vous pourrez accéder à la liste complète des sujets de la liste des sujets à la liste des articles. La vue des détails de l'histoire devrait ressembler à ceci:
Il n'y a qu'une dernière chose à faire. Ajouter un gestionnaire d’événements click au bouton Lien dans Vues / Story.xaml comme suit:
Changer votre gestionnaire d'événements, Link_Click, à lire comme suit:
Si vous voyez une ligne ondulée rouge sous WebBrowserTask, puis placez votre curseur sur la classe, puis sélectionnez «using Microsoft.Phone.Tasks» dans le menu déroulant qui apparaît. Ce code lance le navigateur Web Windows Phone 7 en cliquant sur le bouton et le dirige vers l'URL de l'article..
Finir
Vous avez un client Digg pleinement fonctionnel, bien que simple, à ce stade. Vous pouvez parcourir les histoires par sujet, voir les détails de l'histoire et visiter l'histoire complète dans le menu déroulant. WP7 navigateur web. Dans ce tutoriel, nous avons:
Classes créées pour stocker les données Digg
Création et personnalisation des vues d'application à l'aide du concepteur visuel
URI de navigation personnalisés et utilisation du service de navigation Windows Phone 7
Modèles et styles de données implémentés pour afficher des histoires et des sujets
Remplacez les gestionnaires d'événements OnNavigatedTo et OnNavigatedFrmo pour fournir les fonctionnalités appropriées à chaque page.
Utiliser les tâches Windows Phone 7 pour lancer un navigateur Web
Certains des sujets que nous avons abordés sont trop approfondis dans un simple tutoriel, vous voudrez donc probablement en savoir plus à leur sujet. Les ressources suivantes devraient vous aider à démarrer:
Modèles de données
Présentation des modèles de données
Tutoriels WPF: Modèles de données
modes
Tutoriels WPF: Styles
Visite guidée WPF - Styles
Programmation Windows Phone 7
Guide de programmation
Commencer
J'espère que vous avez apprécié ce tutoriel. Si vous avez des questions ou souhaitez voir quelque chose de différent dans un futur tutoriel sur Windows Phone 7, faites-le moi savoir dans les commentaires..
Share
Accentsconagua
