Créer votre première application Windows Store avec Blend, partie 1 : la page maître (XAML et C#)

Article
06/05/2015

Les outils XAML de Blend for Visual Studio vous permettent de développer une application Windows Store plus rapidement et facilement. Dans ce didacticiel, vous générez PickaFlick, une application simple qui sert à parcourir une liste de nouveaux films. Cette liste est générée via une API Rotten Tomatoes. Si vous souhaitez suivre ce didacticiel, vous devez vous inscrire pour obtenir une clé d'API que vous insérerez dans le code.

En outre, il vous faudra utiliser une version complète ou une version d'évaluation de Microsoft Visual Studio Professional, Premium, ou Ultimate afin d'installer NuGet, requis pour la réalisation de ce didacticiel. NuGet est n'est pas disponible pour Visual Studio Express et une licence valide de développeur Windows Store.

Page d'accueil de l'application PickaFlick

Application PickaFlick dans Blend

Dans la première partie de ce didacticiel, vous allez créer la page d'accueil de l'application. En cours de route, vous apprendrez à :

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

Aucune expérience de XAML ou C# n'est nécessaire pour suivre ce didacticiel. Toutefois, pour réussir à utiliser Blend, il est utile d'avoir un niveau d'expérience intermédiaire de XAML et de C#.

Créer un projet à partir d'un modèle de projet

Blend et Visual Studio comportent les mêmes modèles de projet qui vous aident à commencer à développer votre application Windows Store. Pour plus d'informations sur les modèles que Blend et Visual Studio proposent pour le développement d'autres types d'applications, voir Modèles permettant d'accélérer le développement de vos applications.

Pour créer un projet

Dans Blend, dans le menu Fichier, cliquez sur Nouveau projet.

Dans la boîte de dialogue Nouveau projet, une liste de types de projet apparaît sur le côté gauche. Lorsque vous cliquez sur un type de projet, les modèles de projet associés à ce type apparaissent sur le côté droit.
Dans la liste des types de projets, cliquez sur XAML (Windows Store).
Dans la liste des modèles de projet, cliquez sur Application vide (XAML).
Dans la zone de texte Nom, tapez PickaFlick.
Dans la zone de texte Emplacement, vérifiez l'emplacement du projet.
Dans la liste Langue, cliquez sur Visual C#.
Dans la liste Version, cliquez sur 8.1. Cliquez sur OK.

Afficher comment l'interface utilisateur Blend reflète les modifications apportées à votre application

L'espace de travail par défaut de Blend comporte une interface visuelle pour concevoir des applications Windows Store : l'aire de conception, les panneaux, les configurations de l'espace de travail, les modes de conception et les menus. Pour plus d'informations, consultez Espace de travail de l'application Blend (XAML).

Lorsque vous travaillez sur un projet, les modifications effectuées dans un domaine de l'application sont répercutées dans l'interface.

Dans la partie gauche supérieure, cliquez sur l'onglet Projets pour afficher les dossiers et les fichiers générés automatiquement lorsque vous créez un projet à partir du modèle Application vide :

Références Contient des fichiers et références de projet tels que les fichiers DLL.
Ressources Contient les ressources du projet, notamment les ressources d'image par défaut pour votre application Windows Store.
Propriétés Contient des informations d'assembly générales.
App.xaml Déclare des ressources partagées et gère des événements globaux au niveau de l'application. App.xaml est requis pour afficher l'interface utilisateur.
MainPage.xaml Page de démarrage par défaut de votre application.
package.appxmanifest Contient des métadonnées qui décrivent votre application, notamment le nom complet, les logos, la description d'application, les déclarations, les fonctions et les packages de déploiement.

Panneau Projets dans Blend

Pour plus d'informations, consultez Panneau Projets (XAML).

Sous le volet Projets, dans la partie inférieure gauche de l'interface, se trouve le volet Objets et chronologie. Le volet Objets et chronologie montre la structure de MainPage.xaml.

Le volet Objets et chronologie fournit une vue de la hiérarchie d'objets de la page sur laquelle vous travaillez. Lorsque vous travaillez directement dans le volet Objets et chronologie, vous pouvez modifier rapidement et facilement la hiérarchie d'objets au fur et à mesure.

Pour plus d'informations, consultez Panneau Objets et chronologie (XAML).

En affichant le projet en mode Fractionné, l'aire de conception et le code de MainPage.xaml sont visibles simultanément. Lorsque vous modifiez des éléments affichés sur l'aire de conception, le code est mis à jour automatiquement. Si le code de MainPage.xaml ne s'affiche pas, cliquez sur l'icône mode Fractionné dans l'angle supérieur droit de l'aire de conception.

Dans cette procédure, vous ajouterez une couleur d'arrière-plan à MainPage.xaml, et vérifierez que le code est mis à jour à mesure que vous travaillez.

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

Dans le volet Objets et chronologie, cliquez sur Grille.
Dans le volet Propriétés, dans la catégorie Pinceau, cliquez sur l'icône Pinceau de couleur unie.
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.

Ajouter les images à votre projet

L'application PickaFlick est générée avec des images créées par un concepteur graphique. Outre le fait d'apporter un intérêt visuel, l'image ChickenSprite sert également de bouton sur lequel l'utilisateur clique pour démarrer l'application.

Les images suivantes sont incluses dans l'exemple de projet :

ChickenSprite
Extrait de film
Logo principal
SmallLogo-Chicken
Temp

Vous pouvez ajouter des images au projet en :

utilisant la commande Ajouter un élément existant du menu Projet ;
en effectuant un copier-coller ;
déplaçant des données avec la méthode glisser-déplacer.

Pour cet exemple, vous effectuerez un copier-coller des images.

Pour ajouter les images à votre projet

Si vous avez téléchargé l'exemple de projet, ouvrez le dossier PickaFlick Assets, appuyez sur Ctrl+A, puis sur Ctrl+C.
Dans Blend, dans le volet Projets, cliquez avec le bouton droit sur le dossier Ressources, puis cliquez sur Coller.

Ajoutez maintenant les images à l'aire de conception lorsque vous appliquez un style à votre application.

Appliquer un style à des images et à des éléments

Trois images composent l'affichage visuel de MainPage.xaml : le logo (le bouclier), une image d'arrière-plan (l'extrait de film vert) et le bouton (le poulet). Chacune de ces images est implémentée de manière différente. La première, le logo (MainLogo.png), est un contrôle Image simple. Le deuxième, l'extrait de film (FilmStrip.png) est une image étroite qui est répétée pour donner l'apparence d'une image beaucoup plus grande. L'extrait de film est implémenté à l'aide d'un code d'exécution de C#. La troisième image, le bouton représentant un poulet (ChickenSprite.png) est initialement un contrôle Image, et devient un contrôle Button à l'aide de l'option Créer un contrôle.

Lorsque vous générez une application, vous modifiez l'apparence de cette dernière essentiellement en appliquant des propriétés aux éléments que vous ajoutez à l'aire de conception dans le volet Propriétés. Vous pouvez réorganiser les propriétés du volet Propriétés de trois façons : par catégorie, par nom ou par source.

Blend - Panneau Propriétés - Organiser par

Si vous réorganisez les propriétés par catégorie, les propriétés apparaissent groupées par catégorie, les catégories étant organisées par ordre alphabétique. Si vous réorganisez les propriétés par nom, une liste alphabétique de toutes les propriétés disponibles s'affiche. Si vous réorganisez les propriétés par source, les propriétés sont groupées par Local, Liaison et Ressource ou par Autre et organisées par ordre alphabétique au sein de ces catégories.

Ajouter un contrôle Image et lui appliquer un style

Dans la procédure suivante, vous ajouterez le logo principal et lui appliquerez un style pour l'application PickaFlick à l'aide d'un contrôle Image.

Pour ajouter le logo principal et lui appliquer un style

Dans le volet Projets, double-cliquez sur MainLogo.png pour l'ajouter à l'aire de conception.

L'image apparaît sur l'aire de conception, et un contrôle Image est ajouté au volet Objets et chronologie.

Dans le volet Propriétés, dans la catégorie Commun, notez que l'attribut Source du contrôle Image est Assets/MainLogo.png.
Pour faciliter la gestion du contrôle Image qui contient l'image du logo principal, dans la partie supérieure du volet Propriétés, dans la zone de texte Nom, tapez MainLogo. Notez que dans le volet Objets et chronologie, le contrôle Image a été renommé MainLogo.
Dans la catégorie Disposition du volet Propriétés, à droite de Marge, cliquez sur l'indicateur Propriétés avancées , puis sur Réinitialiser.

Conseil

L'étiquette de l'indicateur Propriétés avancées change selon les ressources et les liaisons de données.Dans le cas présent, l'étiquette est Locale.
Dans la catégorie Commun, dans la liste Étirer, cliquez sur Aucun.

Le logo principal apparaît alors au centre de l'aire de conception.

Ajouter une image restituée au moment de l'exécution

L'extrait de film (FilmStrip.png) est une image étroite qui est répétée pour donner l'apparence d'une image beaucoup plus grande. La propriété TileBrush.TileMode, propriété qui prend en charge la mosaïque d'images, n'est pas prise en charge dans les applications du Windows Store, l'application PickaFlick utilise le code C# pour réorganiser une série de contrôles Image dans le conteneur de disposition, dans le cas présent, un contrôle Grid nommé FilmStrip.

Créer le conteneur de disposition de l'extrait de film

Blend n'étant pas optimisé pour utiliser des codes, il vous faudra créer la grille principale dans Blend, puis basculer vers Visual Studio pour développer le code.

Pour créer le conteneur d'images de l'extrait de film

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

Conseil

Pour trouver Grid, tapez Grid dans la zone Rechercher, ou ouvrez Contrôles, cliquez sur Panneaux, puis sur Grid.
Dans le volet Objets et chronologie, renommez le second contrôle Grid en cliquant dessus, puis en tapant FilmStrip.
Après avoir sélectionné FilmStrip dans le volet Propriétés, dans la catégorie Disposition, affectez à Largeur la valeur 2560 (pour s'adapter au plus grand nombre de périphériques), et affectez à Hauteur la valeur 218 (la hauteur de FilmStrip.png).

Notez que l'ornement du contrôle s'étend sur toute la partie supérieure de l'aire de conception.
Dans la catégorie Disposition, définissez VerticalAlignment sur Centrer .

Notez que l'ornement du contrôle est désormais au centre de l'aire de conception.

Basculer vers Visual Studio et revenir

Maintenant que vous avez créé la grille de l'extrait de film, vous êtes prêt pour basculer vers Visual Studio et terminer le code.

Vous pouvez basculer facilement entre Blend et Visual Studio tout en travaillant sur un projet. Vous pouvez même ouvrir un même fichier projet simultanément dans Blend et Visual Studio sur le même ordinateur. Lorsque vous enregistrez une modification apportée à un fichier dans un outil et que vous basculez ensuite vers l'autre outil, il vous suffit de recharger le fichier pour actualiser votre vue du projet.

Important

Vous pouvez copier et coller du code dans Blend ou Visual Studio.Toutefois, Visual Studio est l'outil recommandé pour l'écriture et la modification de code C#.Cette étape montre comment vous pouvez basculer facilement entre Blend et Visual Studio même si vous travaillez sur un seul projet.

Si vous ajoutez de nouveaux fichiers à votre projet lorsque vous travaillez dans Visual Studio, vous devez enregistrer le projet avec Enregistrer tout (Ctrl+Shift+S) ou générer et exécuter l'application avant de revenir à Blend.Lorsque vous basculez vers Blend, vous recevez un message qui vous demande si vous souhaitez recharger votre projet.Cliquez sur Oui et les nouveaux fichiers sont ajoutés à votre projet dans Blend.

Ensuite, basculez vers Visual Studio pour créer le code qui restituera l'image de l'extrait de film lorsque la page principale de l'application sera chargée.

Créer une nouvelle classe

Au cours de la procédure suivante, vous allez créer un fichier de classe appelé TileCanvas.cs. Il s'agit du code qui réorganise la série de contrôles Image qui seront contenus par le contrôle Grid (FilmStrip) que vous avez créé dans Blend.

Pour créer TileCanvas.cs

Cliquez avec le bouton droit sur le projet dans le volet Projets, dans Blend, puis cliquez sur Modifier dans Visual Studio.
Dans Visual Studio, dans l'Explorateur de solutions, cliquez avec le bouton droit sur le projet, sur Ajouter puis sur Classe.
Dans la boîte de dialogue Ajouter un nouvel élément, sélectionnez Classe. Dans la zone de texte Nom, tapez TileCanvas.cs, puis cliquez sur Ajouter.

Dans TileCanvas.cs, ajoutez après using System.Threading.Tasks;les instructions Using suivantes :

using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Windows.UI.Xaml.Media.Imaging;
using Windows.Foundation;

Supprimez class TileCanvas {} et remplacez-le par le code suivant (basé sur le TileCanvas.cs de Rob Fonseca-Ensor, disponible dans la page https://gist.github.com/robfe/3077863#file-tilecanvas-cs et utilisé sous autorisation selon les termes de la licence Apache 2.0) :

public class TileCanvas : Canvas
    {
        public static readonly DependencyProperty ImageSourceProperty = DependencyProperty.Register("ImageSource", typeof(ImageSource), typeof(TileCanvas), new PropertyMetadata(null, ImageSourceChanged));

        private Size lastActualSize;

        public TileCanvas()
        {
            LayoutUpdated += OnLayoutUpdated;
        }

        public ImageSource ImageSource
        {
            get { return (ImageSource)GetValue(ImageSourceProperty); }
           set { SetValue(ImageSourceProperty, value); }
        }

        private void OnLayoutUpdated(object sender, object o)
        {
            var newSize = new Size(ActualWidth, ActualHeight);
            if (lastActualSize != newSize)
            {
                lastActualSize = newSize;
                Rebuild();
            }
        }

        private static void ImageSourceChanged(DependencyObject o, DependencyPropertyChangedEventArgs args)
        {
            TileCanvas self = (TileCanvas)o;
            var src = self.ImageSource;
            if (src != null)
            {
                var image = new Image { Source = src };
                image.ImageOpened += self.ImageOnImageOpened;
                image.ImageFailed += self.ImageOnImageFailed;

                //add it to the visual tree to kick off ImageOpened
                self.Children.Add(image);
            }
        }

        private void ImageOnImageFailed(object sender, ExceptionRoutedEventArgs exceptionRoutedEventArgs)
        {
            var image = (Image)sender;
            image.ImageOpened -= ImageOnImageOpened;
            image.ImageFailed -= ImageOnImageFailed;
            Children.Add(new TextBlock { Text = exceptionRoutedEventArgs.ErrorMessage, Foreground = new SolidColorBrush(Colors.Red) });
        }

        private void ImageOnImageOpened(object sender, RoutedEventArgs routedEventArgs)
        {
            var image = (Image)sender;
            image.ImageOpened -= ImageOnImageOpened;
            image.ImageFailed -= ImageOnImageFailed;
            Rebuild();
        }

        private void Rebuild()
        {
            var bmp = ImageSource as BitmapSource;
            if (bmp == null)
            {
                return;
            }

            var width = bmp.PixelWidth;
            var height = bmp.PixelHeight;

            if (width == 0 || height == 0)
            {
                return;
            }

            Children.Clear();
            for (int x = 0; x < ActualWidth; x += width)
            {
                for (int y = 0; y < ActualHeight; y += height)
                {
                    var image = new Image { Source = ImageSource };
                    Canvas.SetLeft(image, x);
                    Canvas.SetTop(image, y);
                    Children.Add(image);
                }
            }
            Clip = new RectangleGeometry { Rect = new Rect(0, 0, ActualWidth, ActualHeight) };
        }
    }

Appuyez sur Ctrl+S pour enregistrer vos modifications.

Modifier MainPage.xaml.cs

Ajouter une référence à l'espace de noms Windows.UI.Xaml.Media.Imaging à la page vous permet d'utiliser un URI pour référencer une source de l'image. Cet URI pointe vers FilmStrip.png.

Pour ajouter une référence à l'espace de noms Windows.UI.Xaml.Media.Imaging

Dans l'Explorateur de solutions, développez MainPage.xaml, puis double-cliquez sur MainPage.xaml.cs pour l'ouvrir. Après using Windows.UI.Xaml.Navigation;, ajoutez l'instruction suivante :
```
using Windows.UI.Xaml.Media.Imaging;
```

Ajouter un événement PageLoaded

TileCanvas.cs fournit le code qui remplit la grille FilmStrip avec les contrôles Image. Référencer l'espace de noms Windows.UI.Xaml.Media.Imaging fournit la capacité de pointer vers un URI d'image spécifique. Pour terminer le code, vous devez ajouter un événement Page_Loaded qui appelle TileCanvas.cs et définit l'URI d'image lors du chargement de MainPage.xaml.

Pour ajouter un événement PageLoaded à MainPage.xaml

Dans l'Explorateur de solutions, double-cliquez sur MainPage.xaml pour l'ouvrir.
En mode XAML, cliquez à l'intérieur de l'en-tête Page situé dans la partie supérieure de la page. Dans le volet Propriétés, cliquez sur le bouton Événements .
Double-cliquez dans la zone de texte Chargé pour ajouter un événement Page_Loaded à MainPage.xaml.

MainPage.xaml.cs s'ouvre et le code suivant est ajouté à la page :
```
private void Page_Loaded(object sender, RoutedEventArgs e) {}
```

Collez le code ci-dessous entre les accolades qui suivent private void Page_Loaded(object sender, RoutedEventArgs e) :

            TileCanvas tc = new TileCanvas();
            BitmapImage img = new BitmapImage();
            Uri baseUri = new Uri("ms-appx:///");
            img.UriSource = new Uri(baseUri, "Assets/FilmStrip.png");
            tc.ImageSource = img;
            FilmStrip.Children.Add(tc);

Appuyez sur Ctrl+Shift+S pour enregistrer toutes vos modifications apportées au projet.

Revenez à Blend. Un message apparaît vous demandant si vous souhaitez recharger le projet. Cliquez sur Oui.
Appuyez sur F5 pour générer et exécuter le projet. Notez que l'extrait de film couvre l'affichage de l'application comme escompté, mais il est devant le logo principal qui, masqué, n'est plus visible. Appuyez sur Alt+F4 pour fermer l'application.
Dans Blend, dans le volet Objets et chronologie, vous remarquerez que FilmStrip est situé sous MainLogo dans la hiérarchie d'objets. La superposition d'objets (également connue sous le nom ZIndex) dans un fichier XAML est déterminée par l'ordre de la hiérarchie. Cliquez sur FilmStrip et faites-le glisser afin qu'il apparaisse avant MainLogo dans la hiérarchie.

Conseil

Vous pouvez également définir le ZIndex dans le volet Propriétés, et choisir d'afficher des éléments dans le volet Objets et chronologie dans l'ordre de ZIndex en cliquant sur Organiser selon l’ordre de plan dans la partie inférieure gauche du volet.

Conseil

Le point d'insertion est indiqué par l'ornement bleu.
Appuyez sur F5 pour générer et exécuter l'application. Notez que l'extrait de film apparaît désormais derrière le logo principal comme escompté. Appuyez sur Alt+F4 pour fermer l'application.

Créer le bouton représentant un poulet

La troisième image dans l'application PickaFlick est l'image de bouton (ChickenSprite.png). Pour créer rapidement un bouton à partir d'une image, ajoutez un contrôle Image à l'aire de conception, puis convertissez cette image dans un contrôle utilisateur Button. Vous pouvez alors modifier le modèle Button généré automatiquement lorsque vous créez un contrôle Button.

Créer une image dans un contrôle utilisateur

Dans la procédure suivante, vous ajouterez l'image de poulet à l'aire de conception, puis vous le convertirez en un contrôle Button à l'aide de la commande Créer un contrôle.

Pour créer le contrôle ChickenButton

Assurez-vous que l'option Grille est sélectionnée dans le volet Objets et chronologie. Dans le volet Projets, ouvrez le dossier Ressources, puis double-cliquez sur ChickenSprite.png pour l'ajouter à l'aire de conception.
Dans le volet Objets et chronologie, renommez le contrôle Image en cliquant dessus, puis en tapant ChickenSprite. Appuyez sur Entrée.
Dans le menu Outils, cliquez sur Créer un contrôle.

La boîte de dialogue Créer un contrôle s'ouvre.
Dans la boîte de dialogue Créer un contrôle, dans la liste Contrôles, cliquez sur Bouton.
Dans la zone de texte Nom (Clé), tapez ChickenButton.
Sous Définir dans, Ce document est sélectionné. Dans la liste déroulante Ce document, Page : <aucun nom> apparaît. Cliquez sur OK.

Le contrôle ChickenSprite Image est désormais un contrôle Button. Notez que le modèle de bouton apparaît à présent dans le volet Objets et chronologie (connu également sous le nom mode d'édition de modèle). Le modèle figure dans la partie supérieure du volet (ChickenButton (modèle de bouton)) et la hiérarchie d'objets de modèle est affichée (Grid, le contrôle ChickenSprite et ContentPresenter).

Blend - Modèle de bouton - Objets et chronologie

Appliquer un style à un modèle de contrôle

Vous êtes maintenant prêt à personnaliser le modèle de contrôle. Commencez par supprimer le ContentPresenter (il s'agit du contrôle qui affiche le texte « Bouton » sur l'aire de conception). Vous modifierez le type de conteneur, puis l'affichage afin que le conteneur affiche uniquement la moitié supérieure de l'image. L'autre moitié de l'image sera masquée.

Pour modifier le modèle de bouton

Pour supprimer le ContentPresenter, dans le volet Objets et chronologie, cliquez avec le bouton droit sur [ContentPresenter], puis cliquez sur Supprimer.
Pour modifier le type de conteneur de disposition, cliquez avec le bouton droit sur Grille, cliquez sur Modifier le type de disposition, puis sur Viewbox.
Pour redimensionner le Viewbox à la moitié de la hauteur de l'image, dans le volet Propriétés, sous la catégorie Disposition, affectez à Hauteur la valeur 180.
L'image est redimensionnée pour s'ajuster à la hauteur de la Viewbox. Pour corriger ce problème, dans la catégorie Apparence du volet Propriétés, définissez Étirer sur Aucun.

L'image s'étend désormais sur la largeur du contrôle Viewbox, et seule la moitié supérieure de l'image est visible.
Maintenant que la modification du modèle est terminée, quittez le mode d'édition de modèle en cliquant sur l'icône Rétablir l’étendue à dans la partie supérieure du volet Objets et chronologie.
Pour déplacer le contrôle Button au centre de l'affichage de l'application, dans la catégorie Disposition, à droite de Marge, cliquez sur l'icône Propriétés avancées , puis sur Réinitialiser. Cliquez sur l'icône Centrer en regard de HorizontalAlignment.

Ajouter une modification d'état visuel

Lors de l'exécution de l'application PickaFlick, le ChickenButton est le contrôle qui, lorsqu'on clique dessus, ouvre la page de détails des films. Lorsque vous placez le pointeur de la souris sur ChickenButton, le poulet bouge. Cet effet interactif est une modification d'état visuel appliquée au contrôle. Par défaut, seule la moitié supérieure de l'image apparaît. Lorsque vous pointez sur l'image, la partie inférieure masquée de l'image devient visible, remplace la vue par défaut et simule une animation.

Pour ajouter une modification de l'état, il vous faudra modifier le modèle ChickenButton.

Pour ajouter une modification d'état visuel au contrôle ChickenButton

Dans le volet Objets et chronologie, cliquez avec le bouton droit Bouton, pointez sur Modifier le modèle, puis cliquez sur Modifier actuel.

Vous pouvez aussi cliquer sur Modèle dans la barre de fil d'Ariane sous l'onglet de document.
Dans le volet Objets et chronologie, cliquez sur ChickenSprite.
Dans le volet États, cliquez sur PointerOver.
Dans le volet Propriétés, dans la catégorie Disposition, affectez à la Marge supérieure la valeur -179.

Avertissement

En affectant à la Marge supérieure la valeur -180, vous rendez les moitiés supérieures et inférieures de l'image visibles.
Désactivez l'enregistrement de l’état en cliquant sur l'indicateur de mode d’enregistrement dans la fenêtre de conception, sous les onglets de document.
Pour quitter le mode d'édition de modèle, cliquez sur l'icône Rétablir l’étendue à dans la partie supérieure du volet Objets et chronologie.

Appuyez sur F5 pour générer et exécuter votre application. Pointez sur l'image de poulet pour vérifier qu'elle change d'état. Appuyez sur Alt+F4 pour fermer l'application.

Vous êtes maintenant prêt à créer la page de détails. Pour continuer, reportez-vous à Créer votre première application Windows Store avec Blend, partie 2 : la page de détails (XAML et C#).