Créer votre première application Windows Store avec Blend, partie 2 : la page de détails (XAML et C#)

La collection d'outils XAML de Blend for Visual Studio vous permet de développer une application Windows Store plus rapidement et facilement. Dans ce didacticiel, vous générerez une application simple, PickaFlick, dans laquelle vous pouvez rechercher de nouveaux films dans une liste générée par une API Rotten Tomatoes.

En téléchargeant ce projet à partir de la galerie d'échantillons, vous pouvez passer en revue non seulement le code mais aussi toutes ses ressources, ce qui vous permet de suivre son déroulement et de générer le projet au fur et à mesure.

Dans la première partie de ce didacticiel, vous avez créé la page d'accueil de PickaFlick. Dans la partie 2, vous :

• Add an item template to your project

• Switch to Visual Studio and back again

• Set the DataContext

• Create a view of the data

• Create and style the data bindings

• Preview for different device displays

• Add a built-in behavior

Ajouter un modèle d'élément à votre projet

En plus des modèles de projet, Blend et Visual Studio comportent des modèles d'éléments qui contiennent le code utilisé couramment. Vous pouvez facilement en ajouter un à un projet pour contribuer à accélérer le développement de l'application. Consultez Modèles permettant d'accélérer le développement de vos applications.

Pour l'application PickaFlick, vous ajouterez un modèle d'élément pour une page vierge au projet existant. Cette page sera la page d'affichage des films de votre application.

Pour ajouter un modèle d'élément de page vierge

1. Dans le volet Projets, cliquez avec le bouton droit sur le fichier projet, puis cliquez sur Nouvel élément.

   La boîte de dialogue Nouvel élément s'ouvre.

   

2. Dans la liste des modèles d'élément, cliquez sur Page vierge.

3. Dans la zone de texte Nom, tapez MovieDisplay.xaml, puis cliquez sur OK pour ajouter le modèle d'élément.

Vous pouvez désormais modifier l'arrière-plan de MovieDisplay.xaml.

Pour changer l'arrière-plan de MovieDisplay.xaml

1. Dans le volet Objets et chronologie, cliquez sur Grille.

2. Dans le volet Propriétés, dans la catégorie Pinceau, cliquez sur l'icône Pinceau de couleur unie .

3. Dans la zone de texte Valeur hexadécimale, tapez #D5BF9A, puis appuyez sur Entrée.

   

   La balise Grid dans le mode code comprend désormais l'attribut Background="#FFD5BF9A" (la valeur par défaut Alpha est 100 %, ou FF), et la nouvelle couleur d'arrière-plan est affichée sur l'aire de conception.

Basculer vers Visual Studio et revenir

L'application PickaFlick requiert un sérialiseur JSON afin de convertir les objets JSON en objets .NET qui peuvent être utilisés par les applications Windows Store conçues à l'aide de C#. Vous pouvez écrire votre propre sérialiseur JSON ou en télécharger un à l'aide du Gestionnaire de package NuGet dans Microsoft Visual Studio. Pour accomplir cette tâche, vous pouvez facilement basculer vers Visual Studio depuis Blend.

Au cours de cette procédure, vous basculerez vers Visual Studio pour télécharger Json.NET, un sérialiseur JSON, vous enregistrerez vos modifications et reviendrez à Blend afin de poursuivre votre travail.

Pour installer Json.NET à l'aide du Gestionnaire de package NuGet

1. Dans le panneau Projets, cliquez avec le bouton droit sur PickaFlick, puis cliquez sur Modifier dans Visual Studio.

   Visual Studio ouvre le projet PickaFlick. Lorsque vous êtes invité à recharger les fichiers, cliquez sur Recharger tout.

   Conseil

   Étant donné que vous avez déjà ouvert Visual Studio au cours de la première partie de ce didacticiel, il est possible qu'il soit masqué par Blend après que vous ayez cliqué sur Modifier dans Visual Studio.

2. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le fichier projet, puis cliquez sur Gérer les packages NuGet.

   

3. Dans la boîte de dialogue Gérer les packages NuGet, dans la zone de texte Rechercher, tapez Json.Net. Appuyez sur Entrée.

4. Dans la Liste de résultats, cliquez sur le bouton Installer à droite de Json.NET.

   

5. Une fois l'installation du package terminée, cliquez sur Fermer.

   La page d'accueil de Json.NET apparaît dans la fenêtre de document, et une référence à Newtonsoft.Json s'affiche dans le dossier Références dans l'Explorateur de solutions.

Ajouter le code PickaFlick à votre projet

Le code de l'application PickaFlick entraîne l'extraction des données du site web Rotten Tomatoes et, à partir de ces données, génère des objets .NET que vous pouvez ensuite utiliser directement dans votre application.

Pour ajouter le code à votre projet

1. Cliquez avec le bouton droit sur l'Explorateur de solutions, cliquez sur Ajouter, puis sur Nouveau dossier.

   

2. Dans l'Explorateur de solutions, cliquez sur le nouveau dossier, puis tapez DataModel.

   

3. Cliquez avec le bouton droit sur le dossier DataModel, pointez sur Ajouter, puis cliquez sur Nouvel élément ou appuyez sur Ctrl+Maj+A.

4. Dans la boîte de dialogue Ajouter un nouvel élément, cliquez sur Classe, puis tapez MovieData.cs. Cliquez sur Ajouter.

5. Dans MovieData.cs, remplacez class MovieData {} par ce qui suit :

   // This class represents a movie. It contains properties the describe the movie.
       public class MovieData
       {
           public MovieData(string title, string summary, string image)
           {
               this.Title = title;
               this.Summary = summary;
               this.Image = image;
   
           }
           public string Title { get; set; }
           public string Summary { get; set; }
           public string Image { get; set; }
       }
   

6. Appuyez sur Ctrl+Maj+A. Assurez-vous que Classe est sélectionné. Dans la boîte de dialogue Ajouter un nouvel élément, cliquez sur Classe, puis tapez PickaFlickQuery.cs. Cliquez sur Ajouter.

7. Dans PickaFlickQuery.cs, ajoutez ce qui suit using System.Threading.Tasks; :

   using System.IO;
   using System.Runtime.InteropServices.WindowsRuntime;
   using Windows.Foundation;
   using Windows.Foundation.Collections;
   using System.Collections.ObjectModel;
   using System.Net;
   using System.Net.Http;
   using Newtonsoft.Json;
   using System.IO.Compression;
   

8. Remplacez class PickaFlickQuery {} par le code suivant :

       public class PickaFlickQuery
       {
           protected Uri Uri { get; private set; }
           // A collection class used to store a list of MovieData objects.
           public ObservableCollection<MovieData> results = new ObservableCollection<MovieData>();
           private bool hasExecutedQuery;
   
           public PickaFlickQuery(Uri uri)
           {
               this.Uri = uri;
           }
   
           // Executes a query to obtain information about movies.
           // This property also stores the movies in a collection class.
           public ObservableCollection<MovieData> Results
           {
               get
               {
                   if (!hasExecutedQuery)
                   {
                       this.ExecuteQuery();
                   }
   
                   return this.results;
               }
           }
   
           // Calls a service to obtain a list of movies. This method stores each movie
           // in a collection object.
           private async void ExecuteQuery()
           {
               try
               {          
                   HttpClient httpClient = new HttpClient();
   
                   var response = await httpClient.GetAsync(this.Uri);
   
                   string responseText = "";
   
                   IEnumerable<string> headerValues = Enumerable.Empty<string>();
   
                   if (response.Content.Headers.TryGetValues("Content-Encoding", out headerValues))
                   {
                       foreach (string headerValue in response.Content.Headers.GetValues("Content-Encoding"))
                       {
                           if (headerValue == "gzip")
                           {
                               using (var responseStream = await response.Content.ReadAsStreamAsync())
                               using (var decompressedStream = new GZipStream(responseStream, CompressionMode.Decompress))
                               using (var streamReader = new StreamReader(decompressedStream))
                               {
                                   responseText = streamReader.ReadToEnd();
                               }
                           }
                       }   
                   }
                   if (responseText == "")
                   {
                       var stream = await response.Content.ReadAsStreamAsync();
                       var streamReader = new StreamReader(stream);
                       responseText = streamReader.ReadToEnd();
                   }
   
               
                   // Convert the stream to JSON so that it is easier to iterate through
                   // each item in the stream.
                   dynamic myObj = JsonConvert.DeserializeObject(responseText);
                   dynamic movies = myObj.movies;
   
                   // Iterate through the collection of JSON objects to obtain information
                   // each movie in the collection.
                   foreach (dynamic movie in movies)
                   {
                       string title = movie.title;
                       string summary = movie.synopsis;
                       string image = movie.posters.detailed;
   
                       // Create a Moviedata object by using movie information and add 
                       // that object to a collection.
                       results.Add(new MovieData(title, summary, image));
                    }
                
                   hasExecutedQuery = true;
               }
               catch (Exception)
               {
                   hasExecutedQuery = false;
                   showErrorMessage();
               }
           }
           private async void showErrorMessage()
           {
               var msg = new Windows.UI.Popups.MessageDialog
                   ("The service is unavailable or there was a problem with the service.");
   
               msg.Commands.Add(new Windows.UI.Popups.UICommand("Try again?"));
   
               msg.Commands.Add(new Windows.UI.Popups.UICommand("I'll try again later."));
   
               msg.DefaultCommandIndex = 0;
               msg.CancelCommandIndex = 1;
   
               var results = await msg.ShowAsync();
   
               if (results.Label == "I'll try again later.")
               {
                   hasExecutedQuery = true;
                   this.Results.Clear();
               }
               else
               {
                   hasExecutedQuery = false;
                   this.Results.Clear();
               }
   
   
           }
   
       }
   

9. Appuyez sur Ctrl+Maj+A. Assurez-vous que Classe est sélectionné. Dans la boîte de dialogue Ajouter un nouvel élément, cliquez sur Classe, puis tapez PickaFlickViewModel.cs. Cliquez sur Ajouter.

10. Dans PickaFlickViewModel.cs, remplacez class PickaFlickViewModel {} par ce qui suit :

    // Provides an object that returns movie data. You can bind to this class in the designer.
        // For example, by referencing this class in the ItemSource property of a GridView control. 
        public class PickaFlickViewModel
        {
    // A Rotten Tomatoes API key is required. See https://go.microsoft.com/fwlink/?LinkId=313841 
            private static readonly string apikey = "Insert API Key Here";
            private static readonly string baseUrl = "http://api.rottentomatoes.com/api/public/v1.0";
            private static readonly string moviesSearchUrl = baseUrl + "/lists/movies/box_office.json?apikey=" + apikey;
    
            private static readonly Uri uri = new Uri(moviesSearchUrl);
    
            private readonly PickaFlickQuery query = new PickaFlickQuery(uri);
            
            // Property that returns a collection of MovieData objects. 
            public PickaFlickQuery Query
            {
                get
                {
                    return this.query;
                }
            }
        }
    

    Important

    Si vous disposez d'une clé d'API Rotten Tomatoes, remplacez le texte « Insert API Key Here » par la clé.Sans la clé, l'application ne s'exécutera de la manière escomptée.

11. Appuyez sur Ctrl+Shift+S pour enregistrer toutes vos modifications, puis basculez vers Blend.

12. Dans Blend, la question de recharger le projet vous est posée. Cliquez sur Oui.

    

Définir le DataContext

En définissant le DataContext, vous spécifiez les données sources des objets affichés dans votre application.

Pour définir le DataContext

1. Appuyez sur Ctrl+B pour générer le projet et rendre les modifications que vous avez effectuées dans Visual Studio disponibles dans Blend.

2. Assurez-vous que MovieDisplay.xaml est ouvert en cliquant sur l'onglet MovieDisplay.xaml situé en haut de la fenêtre de document. Dans le volet Objets et chronologie, cliquez sur Grille.

3. Dans le volet Propriétés, à droite de DataContext, cliquez sur Nouveau.

   

4. Dans la boîte de dialogue Sélectionner un objet, cliquez sur PickaFlickViewModel. Cliquez sur OK.

   Conseil

   Si la liste est trop longue pour être facilement lisible, désactivez la case à cocher Afficher tous les assemblys (située dans le coin inférieur gauche de la boîte de dialogue).

   

Créer une vue des données

Vous pouvez facilement créer un GridView lié aux données qui affiche les données pour votre application cinématographique en faisant glisser le nœud Results de la section DataContext du volet Données vers l'aire de conception. Le GridView ainsi qu'un DataTemplate associé sont créés automatiquement, et les données sont affichées dans l'aire de conception.

Dans l'application PickaFlick, le contrôle de GridView n'est pas utilisé. En revanche, un contrôle FlipView vous permet de parcourir facilement les éléments d'une liste. Ajouter une FlipView à votre projet est un moyen simple pour créer cette vue, puis pour faire glisser le nœud Résultats directement sur le FlipView dans le volet Objets et chronologie.

Pour créer une vue des données à l'aide d'un contrôle FlipView

1. Dans le volet Ressources, cliquez sur Contrôles, puis double-cliquez sur FlipView.

   

2. Dans la section Contexte de données du volet Données, cliquez sur Results : (MovieData), puis faites-le glisser pour le déposer sur le contrôle FlipView dans le volet Objets et chronologie.

   Conseil

   Si le nœud Résultats n'est pas visible, développez les nœuds dans la section Contexte de données jusqu'à sa localisation.

   

   Les données apparaissent alors sur l'aire de conception à l'intérieur du contrôle FlipView. Vous êtes à présent prêt à personnaliser la disposition des données.

   

   Conseil

   Si une exception d'accès non autorisé est déclenchée et affichée sur l'aire de conception, vérifiez de nouveau la clé d'API et assurez-vous qu'elle est correctement entrée dans le code.

Appliquer un style à la vue de données

Le Flipview est en place et les données sont chargées, mais l'affichage du film n'est pas correct. Pour qu'il apparaisse tel que vous le souhaitez, appliquez le style au modèle de données générées, puis affinez les liaisons de données afin que s'affichent les données voulues.

Personnaliser le modèle de données

Lorsque vous avez fait glisser le volet Résultats sur le FlipView, un modèle de données a été généré automatiquement. Vous pouvez modifier le modèle en le personnalisant pour qu'il ressemble davantage aux données affichées dans l'exemple d'application finie.

Pour modifier le modèle généré

1. Dans le volet Objets et chronologie, cliquez avec le bouton droit sur FlipView, pointez sur Modifier des modèles associés, puis sur Modifier les éléments générés (ItemTemplate), puis cliquez sur Modifier actuel.

   

2. Appuyez sur la touche Ctrl et, dans le volet Objets et chronologie, cliquez sur Bordure et StackPanel. Cliquez avec le bouton droit, puis cliquez sur Supprimer.

3. Dans le volet Objets et chronologie, cliquez sur Grille. Dans la catégorie Disposition du volet Propriétés, à droite de Largeur, cliquez sur Définir à Automatique . Répétez l’opération pour Hauteur.

4. À droite de Marge, cliquez sur Propriétés avancées , puis sur Réinitialiser.

À présent, vous êtes prêt pour concevoir votre modèle personnalisé.

Créer la grille de disposition

Le volet de disposition Grid est le volet par défaut pour les projets Blend. Suivre les règles de conception pour les applications Windows Store conjointement avec le volet de disposition Grid vous permet d'appliquer un style à une application qui respecte les instructions de style de Windows 8. Pour plus d'informations sur les règles, voir Disposition d'une page d'application.

Conformément à ces règles, l'unité de mesure de base pour une application Windows Store est de 20 × 20 pixels, et chaque unité se divise en sous-unité de 5 x 5 pixels. La disposition est basée sur une grille définie par un en-tête, une marge de gauche et une zone de contenu. Selon les règles, les éléments majeurs de la grille sont :

• l'en-tête de page   La ligne de base de l'en-tête de page doit être de cinq unités ou de 100 pixels, à partir du haut de la page.

• la marge de gauche   La marge de gauche doit être de six unités ou de 120 pixels, à partir du bord gauche de la page.

• la région de contenu   La marge supérieure doit être de sept unités ou 140 pixels, à partir du haut de la page.

Vous pouvez modifier des objets à l'aide des ornements, représentés par des poignées. Les ornements d'objet apparaissent dans les angles et au milieu des contours des objets. Les ornements s'affichent également aux extrémités des lignes de repère et du quadrillage. Lorsque vous créez une grille, vous pouvez utiliser un ornement d'insertion pour placer le quadrillage à l'emplacement voulu.

Il existe trois options de redimensionnement de lignes et de colonnes différentes qui affectent l’organisation des objets dans la grille. Les options de redimensionnement sont les suivantes :

• Pixel   Utilise les valeurs en pixels pour définir des tailles fixes.

• Étoile (*)   Utilise des valeurs étoiles et a un effet similaire au pourcentage pour les largeurs.

• Auto   Utilise une largeur relative, ce qui signifie que le redimensionnement des objets dans la grille s’effectuera en fonction de celui de l’objet parent.

La grille de disposition comporte des colonnes dont la largeur s'exprime en pixels et en étoiles.

Pour créer les colonnes de la grille de disposition

1. Le modèle original est composé de deux colonnes (identifiées par un ornement de colonne de grille) et d'une ligne. Cliquez sur l'ornement de colonne de grille et faites-le glisser vers la droite.

   

2. Dans l'éditeur de valeurs qui s'affiche, cliquez sur la flèche de déroulement pour ouvrir la liste, puis cliquez sur Pixel.

   

3. Dans l'éditeur de valeurs numériques, tapez 120.

   

4. Pointez sur la partie supérieure de la grille, à gauche du premier ornement créé, puis cliquez sur l'ornement orange d'insertion. Répétez cette opération deux fois.

   Vous disposez désormais de cinq colonnes.

5. Dans l'éditeur de valeurs de la deuxième colonne, tapez 1. Conservez Étoile (*) comme valeur de l'option Redimensionnement.

6. Dans l'éditeur de valeurs de la troisième colonne, tapez 40. L'option Redimensionnement doit être définie sur Pixel.

7. Dans l'éditeur de valeurs de la quatrième colonne, tapez 1. Conservez Étoile (*) comme valeur de l'option Redimensionnement.

8. Dans l'éditeur de valeurs de la cinquième colonne, tapez 120. L'option Redimensionnement doit être définie sur Pixel.

Pour créer les lignes de disposition

1. Sur l'aire de conception, pointez sur la ligne bleue pointillée à gauche de la grille, puis cliquez sur l'ornement orange d'insertion qui apparaît.

   

2. Dans l'éditeur de valeurs qui s'affiche, cliquez sur la flèche de déroulement pour ouvrir la liste, puis cliquez sur Pixel. Dans l'éditeur de valeurs numériques, tapez 100.

3. Pointez sur un emplacement situé sous le quadrillage que vous venez de créer, puis cliquez sur l'ornement orange d'insertion qui apparaît.

4. Ouvrez la liste de l'éditeur de valeurs, puis cliquez sur Pixel. Dans l'éditeur de valeurs numériques, tapez 40.

   Ce paramètre place le second quadrillage 40 pixels sous le premier, au niveau du 140e pixel.

À présent, vous devez avoir cinq colonnes et trois lignes.

Vous êtes maintenant prêt à ajouter du contenu à la grille. Le premier objet à ajouter est le logo.

Pour ajouter le logo et lui appliquer un style

1. Assurez-vous que l'option Grille est sélectionnée dans le volet Objets et chronologie. Dans le volet Projets, dans le dossier Ressources, double-cliquez sur SmallLogo-Chicken.png pour l'ajouter à l'aire de conception.

2. Dans le volet Propriétés, sous la catégorie Disposition, définissez HorizontalAlignment sur Centrer  et VerticalAlignment sur Bas .

3. À droite de Marge, cliquez sur Propriétés avancées , puis sur Réinitialiser.

4. Dans la catégorie Commun, affectez à Étirer la valeur Aucun.

   

Créer des liaisons de données et leur appliquer un style

Pour terminer le modèle, continuez à lui ajouter des objets, puis liez des données à ces objets. Pour que les données apparaissent telles que vous le souhaitez, modifiez l'affichage des objets. Le type d'objets utilisé est déterminé par le type de données que vous souhaitez lier. Par exemple, l'image de l'affiche du film est liée à un contrôle Image, alors que le titre et le résumé du film sont liés aux contrôles TextBlock.

Pour ajouter et positionner le titre du film

1. Après avoir sélectionné Grille dans le volet Objets et chronologie, dans le volet Ressources, double-cliquez sur TextBlock pour l'ajouter à l'aire de conception.

   Un nouvel objet Textblock est ajouté dans l'angle supérieur gauche de l'aire de conception. Pour quitter le mode édition de texte, appuyez sur Échap.

2. Pour positionner le Textblock dans la colonne et la ligne souhaitées de la grille, dans la catégorie Disposition, du volet Propriétés, définissez les valeurs suivantes :

   • Ligne   0

     Cela positionne le Textblock dans la ligne supérieure.

   • RowSpan   1

     Le titre ne doit pas s'étendre au-delà d'une ligne unique.

   • Colonne   1

     La numérotation des colonnes et des lignes commençant à 0, ce paramètre positionne le Textblock dans la deuxième colonne.

   • ColumnSpan   3

     Étendre plusieurs colonnes permet de garantir l'affichage de titres plus longs sur une ligne unique.

   Le TextBlock apparaît désormais dans la partie supérieure droite de la deuxième colonne.

3. Définissez VerticalAlignement sur Bas , afin de positionner le TextBlock où vous le souhaitez à l'intérieur de la ligne.

Vous êtes maintenant prêt à appliquer le style au texte du TextBlock. Dans la procédure suivante, vous définirez la police et la taille du texte, puis modifierez sa couleur.

Pour appliquer le style au texte dans le TextBlock

1. Conformément aux règles relatives aux polices (applications du Windows Store), la police de l'en-tête d'une application Windows 8 est Segoe UI Light 42 points.

   Dans la catégorie Texte du volet Propriétés, sélectionnez Segoe UI Light dans la liste Police.

2. Vous pouvez définir la taille en la sélectionnant dans la liste située à droite de la liste Police ou en la saisissant directement dans l'éditeur de valeurs. Pour l'en-tête, tapez 42pt, puis appuyez sur Entrée.

   

3. Notez que le bouton de caractères flotte au-dessus de la ligne de base du bloc de texte.

   

   L'espace supplémentaire est réservé aux hampes descendantes (partie inférieure d’une lettre minuscule, comme pour la lettre « g », par exemple). Vous souhaitez que la base du texte principal reste sur la ligne de base, tout en conservant l'espace suffisant les éventuelles hampes inférieures sous la ligne de base. Pour ajuster la ligne de base, dans la catégorie Disposition, affectez à la marge inférieure la valeur -18.

   Le texte se trouve à présent sur la ligne de base.

   

4. Dans la catégorie Pinceau du volet Propriétés, cliquez sur la pipette de couleur .

   

   Pointez sur l'image représentant un poulet dans la partie supérieure gauche de l'aire de conception. Notez que la couleur du texte dans le TextBlock change en fonction de l'emplacement du pointeur sur l'image représentant un poulet. Lorsque vous trouvez la nuance de rouge qui vous convient, cliquez sur l'image pour définir la couleur de la police.

   

Vous êtes à présent prêt à lier les données du titre du film au TextBlock.

Pour lier les données du titre du film à l'objet TextBlock

1. Dans la catégorie Commun, à droite de Texte, cliquez sur Propriétés avancées , puis sur Créer une liaison de données.

2. Dans la boîte de dialogue Créer une liaison de données pour [TextBlock].Text, cliquez sur Titre, puis sur OK.

   

Vous allez ensuite ajouter l'illustration du film et lui appliquer un style.

Pour ajouter et positionner l'illustration du film

1. Après avoir sélectionné Grille dans le volet Objets et chronologie, dans le volet Projets, dans le dossier Ressources, double-cliquez sur Temp.png pour l'ajouter à l'aire de conception.

   Un nouvel objet Image est ajouté avec Temp.png en tant que Source à l'aire de conception.

2. Dans la catégorie Disposition du volet Propriétés, définissez les éléments suivants :

   • Ligne   3

   • RowSpan   1

   • Colonne   1

   • ColumnSpan   1

3. Définissez HorizontalAlignment sur Centrer  et VerticalAlignment sur Haut.

4. À droite de Marge, cliquez sur Propriétés avancées , puis sur Réinitialiser.

Ne vous préoccupez pas des proportions de l'image temporaire. Vous corrigerez l'affichage après avoir lié l'image du film à l'objet Image.

Pour lier l'illustration du film à l'objet Image

1. Dans la catégorie Commun, à droite de Source, cliquez sur Propriétés avancées , puis sur Créer une liaison de données.

2. Dans la boîte de dialogue Créer une liaison de données pour [Image].Source, cliquez sur Image, puis sur OK.

   

3. Dans la catégorie Commun, dans la liste Étirer, cliquez sur Uniforme.

Vous allez ensuite ajouter le résumé et lui appliquer un style. Certains résumés de film peuvent être assez longs et dépasser la hauteur de l'écran. Pour permettre un défilement du résumé, il vous faudra ajouter un objet ScrollViewer au modèle, puis un TextBlock au ScrollViewer afin d'afficher le texte.

Pour ajouter et positionner le résumé du film

1. Après avoir sélectionné Grille dans le volet Objets et chronologie, dans le volet Ressources, double-cliquez sur ScrollViewer pour l'ajouter à l'aire de conception.

   Un nouvel objet ScrollViewer est ajouté dans l'angle supérieur gauche de l'aire de conception.

2. Après avoir sélectionné ScrollViewer dans le volet Objets et chronologie, dans la catégorie Disposition, à droite de Largeur, cliquez sur Définir à Automatique . Répétez l’opération pour Hauteur.

3. Pour positionner le Textblock, dans la catégorie Disposition du volet Propriétés, définissez les valeurs suivantes :

   • Ligne   2

   • RowSpan   1

   • Colonne   3

   • ColumnSpan   1

   Le ScrollViewer apparaît désormais dans la partie supérieure gauche de la troisième ligne dans la quatrième colonne.

4. Après avoir sélectionné ScrollViewer dans le volet Objets et chronologie, dans le volet Ressources, double-cliquez sur TextBlock pour ajouter un second TextBlock à l'aire de conception.

   Un nouvel objet Textblock est ajouté à l'objet ScrollViewer. Pour quitter le mode édition de texte, appuyez sur Échap.

Il sera plus facile d'appliquer le style au texte après avoir lié l'élément TextBlock aux données du résumé des films.

Pour lier les données du résumé du film à l'objet TextBlock

1. Dans la catégorie Commun, à droite de Texte, cliquez sur Propriétés avancées , puis sur Créer une liaison de données.

2. Dans la boîte de dialogue Créer une liaison de données pour [TextBlock].Text, cliquez sur Résumé, puis sur OK.

   

Vous êtes maintenant prêt à appliquer le style au texte du résumé.

Pour appliquer le style au texte dans le TextBlock

1. Les règles relatives aux polices (applications du Windows Store) recommandent l'utilisation de la police Segoe UI SemiLight pour le corps du texte d'une application Windows 8.

   Dans la catégorie Texte du volet Propriétés, sélectionnez Segoe UI SemiLight dans la liste Police.

2. Pour définir la taille, sélectionnez sa valeur dans la liste située à droite de la liste Police, ou cliquez dans l'éditeur de valeurs, puis utilisez les flèches haut ou bas pour choisir la taille de police. Appuyez sur Entrée. Sélectionnez la taille de police voulue en consultant l'affichage sur l'aire de conception.

3. Dans la catégorie Pinceau du volet Propriétés, cliquez sur la pipette de couleur  pour sélectionner une couleur à partir de l'affichage, ou cliquez dans l'éditeur de couleurs pour sélectionner une couleur de la palette.

   

Obtenir un aperçu de l'affichage sur les différents périphériques

La vue active de votre application proposée par Blend vous permet de voir si elle apparaît telle que vous le souhaitez, sans avoir à l'exécuter. Vous pouvez également obtenir un aperçu de votre application dans différents affichages à l'aide du volet Périphérique.

Pour activer l'affichage dans le volet Périphérique

• Pour activer l'option d'affichage, quittez le mode d'édition de modèle en cliquant sur Rétablir l’étendue à .

Ajouter un comportement intégré

Si vous exécutez votre application, la page principale s'affiche et l'image du bouton représentant un poulet est modifiée lorsque vous placez le pointeur de la souris sur celle-ci. Si vous cliquez sur le bouton, rien ne se passe, car aucun déclencheur d'événement lié à un clic n'a été défini pour le contrôle. Utilisez un comportement intégré pour ajouter un comportement NavigateToPageAction au bouton qui vous conduira à la page d'affichage du film.

Ajouter un comportement NavigateToPageAction au contrôle bouton

1. Basculez vers MainPage.xaml. Après avoir sélectionné Bouton dans le volet Objets et chronologie, dans le volet Ressources, dans la catégorie Comportements, double-cliquez sur NavigateToPageAction pour l'ajouter à Bouton.

   EventTriggerBehavior et NavigateToPageAction apparaissent dans le volet Objets et chronologie.

   

2. La catégorie Commun apparaît dans le volet Propriétés. Dans la liste déroulante TargetPage, cliquez sur MovieDisplay.xaml.

   

   Conseil

   Vous pouvez aussi cliquer sur EventTriggerBehavior dans le volet Objets et chronologie, puis, dans le volet Propriétés, cliquer sur le bouton Actions (Collection).Dans la boîte de dialogue DependencyObjectCollection Editor: Actions, dans la section Propriétés, dans la liste déroulante TargetPage, cliquez sur MovieDisplay.

Appuyez sur F5 pour générer et exécuter votre application. Pour ouvrir la page de détails des films, cliquez sur le bouton représentant un poulet. Cliquez sur les nouvelles versions en utilisant les flèches situées à droite et à gauche de l'écran.

Appuyez sur Alt+F4 pour fermer l'application.

Étapes suivantes

Dans une application réelle, l'étape suivante consisterait à publier votre application. Pour plus d'informations sur l'obtention de votre application dans le Windows Store, voir Vue d'ensemble de la publication d'une application dans le Windows Store.