Modèles de projet en C#, VB et C++ pour les applications du Windows Store

Cette rubrique fournit des informations approfondies sur les modèles de projet pour une application du Windows Store en C++, C# ou Visual Basic. Outre un bref résumé de chaque modèle, vous trouverez des informations d’implémentation concernant le modèle de navigation, le modèle de données, la gestion de l’état d’affichage, ainsi que d’autres détails. Une grande partie de ces informations d’implémentation s’applique à plusieurs modèles.

Pour en savoir plus sur les modèles de projet pour JavaScript, voir Modèles de projet JavaScript pour les applications du Windows Store. Pour en savoir plus sur les modèles de projet pour Blend, voir Créer un projet.

Pour obtenir ces modèles, vous devez disposer d’une version de Visual Studio qui prend en charge le développement Windows. Pour plus d’informations, voir Obtenir les outils.

Important  Les informations présentées dans cette rubrique ont été mises à jour pour Windows 8.1. Pour obtenir des informations sur la migration vers les nouveaux modèles, voir Windows 8 vers Windows 8.1 pour les développeurs XAML et Recibler votre application Windows 8 vers Windows 8.1.

Feuille de route : comment cette rubrique s’articule-t-elle par rapport aux autres ? Voir les rubriques suivantes :

Modèles de navigation

Le modèle de navigation utilisé dans les modèles de projet d’application Hub, Grille et Fractionner est le modèle de navigation recommandé pour les applications du Windows Store en C++, C# ou Visual Basic. Dans ce modèle, les pages XAML sont chargées dans un cadre central comme contenu de la fenêtre par défaut, et les utilisateurs peuvent ensuite naviguer vers d’autres pages à l’aide de ce cadre. Le chargement des pages se produit si nécessaire, généralement en réponse à des actions de l’utilisateur. Les développeurs Web parlent souvent de « navigation sur une seule page » pour faire référence à ce type de modèle de navigation. Le modèle de navigation est implémenté dans Common\NavigationHelper. Le modèle de navigation sur une seule page fournit une transition plus fluide (de type application) entre les pages et facilite également la gestion de l’état de l’application via le contexte unique couvrant l’ensemble de l’application.

D’autres modèles de projet, tels que le modèle Vide, n’incluent pas ce fichier NavigationHelper. Pour ce modèle, vous devez implémenter une navigation personnalisée si vous n’ajoutez pas le fichier de projet NavigationHelper manuellement. Pour obtenir des informations sur la navigation et un exemple d’utilisation de la navigation sur une seule page dans une application du Windows Store en C++, C# ou Visual Basic, voir Démarrage rapide : navigation entre les pages.

Pour vous aider à choisir le meilleur modèle de navigation pour votre application, voir Modèles de navigation. En outre, voir le Modèle de navigation plat en action dans le cadre de notre série Fonctionnalités d’application de A à Z.

Modèle d’affichage par défaut

DefaultViewModel est utilisé par chaque modèle d’élément Page complexe. DataContext est lié au DefaultViewModel défini sur la page elle-même : DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}". La propriété DefaultViewModel est de type ObservableDictionary, qui est un mappage des chaînes (clés) aux objets (valeurs). DefaultViewModel est fourni par commodité et peut être remplacé par un modèle d’affichage fortement typé, le cas échéant.

Chaque page est ensuite liée aux propriétés qui doivent être définies dans DefaultViewModel du code-behind. Prenez par exemple GroupedItemsPage. Sur cette page, la propriété Source de CollectionViewSource est liée à la propriété Groups (Source="{Binding Groups}". Groups est une clé d’une paire clé-valeur stockée dans DefaultViewModel (this.DefaultViewModel["Groups"] = sampleDataGroups;).

Mappage de l’état d’affichage d’application à l’état visuel

Dans les modèles intégrés à Windows 8, LayoutAwarePage fournissait du code pour gérer l’état d’affichage, mais ce code n’est pas nécessaire dans Windows 8.1. Seuls SplitPage et la page FileOpenPicker contiennent du code pour la gestion de l’état d’affichage. Chaque page doit maintenant gérer toutes les tailles de fenêtres dont la largeur est au moins de 500 pixels.

Modèle de projet Hub pour les applications du Windows Store

Le modèle de projet Hub vous permet de créer une application du Windows Store qui affiche le contenu dans une vue panoramique horizontale et qui séduit visuellement les utilisateurs grâce aux différentes manières qu’il propose pour accéder au contenu. La page Hub principale comporte différentes sections pour représenter le contenu, par exemple les nouveaux éléments, les éléments en surbrillance et les catégories d’élément. Parmi les exemples d’application figurent des applications de shopping, des applications d’information, des applications sportives et des applications multimédias. Ce modèle est disponible dans Microsoft Visual Studio 2013.

Par défaut, une application Hub affiche une page d’accueil comportant plusieurs sections disposées horizontalement. Si l’utilisateur appuie sur l’en-tête d’une section interactive (signalé par le signe « > »), l’application ouvre la page de la section qui répertorie les éléments associés à la section. Si l’utilisateur choisit un élément dans la page d’accueil ou dans la page de la section, une vue en mode pleine page affiche les détails de l’élément. Cette illustration montre une page d’accueil comportant au moins trois sections.

Modèle de projet Application hub

Les sections du modèle de projet Hub contiennent des exemples de contenu plutôt que des recommandations en matière de contenu. Vous pouvez facilement ajouter ou supprimer des sections de manière à répondre aux spécifications de contenu de votre application.

Les sections du modèle comportant du contenu statique, vous pouvez facilement fournir des ressources globalisées. Le fichier de ressources globalisées contient les chaînes localisées des paramètres régionaux en-us.

Pour obtenir un exemple montrant comment générer une application de gestion immobilière qui présente les données d’un service, voir Création d’une application du Windows Store qui utilise des données d’un service.

Fichiers du modèle de projet Hub

Le modèle de projet Hub inclut les fichiers .xaml suivants :

  • App.xaml, chargé en premier, qui fournit un balisage pour l’hôte de contenu (où chaque page est chargée dans la fenêtre principale).
  • HubPage.xaml, qui affiche les sections et les éléments sur la page d’accueil. Les utilisateurs peuvent choisir un élément pour afficher des informations sur cet élément, ou ils peuvent choisir une étiquette de section pour afficher des informations sur la section correspondante.
  • SectionPage.xaml, qui affiche une catégorie d’éléments. Les utilisateurs peuvent choisir un élément pour afficher celui-ci en mode pleine page.
  • ItemPage.xaml, qui est l’affichage en pleine page d’un élément.

Le modèle inclut les fichiers .cs|.vb|.cpp|.h suivants :

  • App.xaml.cs|.vb|.cpp|.h, qui spécifie comment l’application se comporte quand elle démarre.
  • HubPage.xaml.cs|.vb|.cpp|.h, qui spécifie le comportement associé à la page d’accueil.
  • SectionPage.xaml.cs|.vb|.cpp|.h, qui spécifie le comportement associé à la page de détails du groupe.
  • ItemPage.xaml.cs|.vb|.cpp|.h, qui spécifie le comportement associé à l’affichage en pleine page d’un élément.
  • SampleDataSource.cs|.vb|.cpp|.h, qui est l’objet source de données qui expose les données à l’application.

Le modèle inclut également les fichiers suivants :

  • SampleData.json, qui contient les exemples de données de l’application.
  • package.appxmanifest, qui décrit le package d’application pour Windows.
  • Un fichier PFX qui est utilisé pour signer le fichier appxmanifest. (Ce fichier est inclus en tant que fichier projet pour la prise en charge de la génération à partir d’une ligne de commande.)
  • Plusieurs fichiers image, tels que SplashScreen.png pour l’image de l’écran de démarrage et StoreLogo.png, qui est utilisé pour le Windows Store.
  • Un exemple de fichier de ressources qui contient des chaînes de localisation (Resources.resw).

Modèle de projet Grille pour les applications du Windows Store

Le modèle Application grille constitue un excellent point de départ pour personnaliser une application du Windows Store pour Windows et permettre aux utilisateurs de parcourir des catégories à la recherche de contenu auquel ils souhaitent se consacrer totalement. Exemples d’applications possibles : applications de shopping, d’information, de photo ou vidéo.

L’application Grille commence par une page d’accueil dans laquelle figure une liste de groupes. Un groupe est un ensemble nommé d’éléments, à l’image d’un rayon d’un grand magasin virtuel qui contient des articles individuels. Si l’utilisateur sélectionne un groupe, l’application ouvre la page de détails du groupe qui affiche une liste des éléments du côté droit. L’utilisateur peut sélectionner un élément sur la page d’accueil ou la page de détails du groupe. S’ouvre alors un affichage en pleine page qui peut être utilisé pour montrer les détails de l’élément. La page d’accueil est présentée ici.

Modèle de projet Application grille

Fichiers projet pour le modèle Grille

Le modèle Application grille inclut les fichiers .xaml suivants :

  • App.xaml, chargé en premier, qui fournit un balisage pour l’hôte de contenu (où chaque page est chargée dans la fenêtre principale).
  • GroupedItemsPage.xaml, qui est la page d’accueil. Il permet à un utilisateur d’afficher les groupes et les éléments. L’utilisateur peut sélectionner soit un élément pour naviguer vers l’affichage en pleine page de l’élément, soit une étiquette de groupe pour naviguer vers la page de détails du groupe.
  • GroupDetailPage.xaml, qui permet non seulement à un utilisateur d’afficher les détails du groupe à gauche et les éléments à droite, mais aussi de sélectionner un élément pour naviguer vers l’affichage en pleine page de l’élément.
  • ItemDetailPage.xaml, qui est l’affichage en pleine page d’un élément.

Le modèle inclut les fichiers .cs|.vb|.cpp|.h suivants :

  • App.xaml.cs|.vb|.cpp|.h, qui spécifie comment l’application se comporte lorsqu’elle est démarrée.
  • GroupedItemsPage.xaml.cs|.vb|.cpp|.h, qui spécifie le comportement associé à la page d’accueil.
  • GroupDetailPage.xaml.cs|.vb|.cpp|.h, qui spécifie le comportement associé à la page de détails du groupe.
  • ItemDetailPage.xaml.cs|.vb|.cpp|.h, qui spécifie le comportement associé à l’affichage en pleine page de l’élément.
  • SampleDataSource.cs|.vb|.cpp|.h, qui est l’objet source de données qui expose les données à l’application.

Le modèle Application grille inclut également les fichiers suivants :

  • Le fichier SampleData.json, qui contient l’exemple de données utilisée par l’application.
  • package.appxmanifest, qui décrit le package d’application pour Windows.
  • Un fichier PFX utilisé pour signer le fichier appxmanifest (ce fichier est inclus en tant que fichier projet pour la prise en charge de la génération à partir de la ligne de commande).
  • Plusieurs fichiers image, tels que SplashScreen.png pour l’image de l’écran de démarrage et StoreLogo.png qui est utilisé pour le Windows Store.

Modèle de projet Fractionner pour les applications du Windows Store

Le modèle Application fractionnée constitue un bon point de départ pour créer une application du Windows Store que vous pouvez ensuite personnaliser afin de permettre aux utilisateurs d’afficher une liste d’éléments et de détails sur ceux-ci dans un affichage à deux colonnes. Vous pouvez aussi faire en sorte que les utilisateurs puissent passer rapidement d’un élément à un autre et mettre à jour dynamiquement la liste. Citons en exemple un lecteur de News, une application répertoriant les résultats sportifs ou encore une application de messagerie.

L’application fractionnée commence par une page d’accueil dans laquelle figure une liste de groupes. Un groupe est un ensemble nommé d’éléments, par exemple une source d’informations qui fournit des sujets d’actualités. Lorsque l’utilisateur sélectionne un groupe en appuyant ou en cliquant dessus, l’application ouvre la page à affichage fractionné. La page à affichage fractionné est présentée ici.

Modèle de projet Application fractionnée

La page à affichage fractionné présente un affichage à deux colonnes (ou affichage maître/détail), où les détails côté droit sont modifiés lorsqu’un utilisateur sélectionne un élément côté gauche. Vous pouvez là encore imaginer une liste de sujets d’actualités à gauche avec les récits à droite.

Fichiers projet pour le modèle Fractionner

Le modèle Application fractionnée inclut les fichiers .xaml suivants :

  • App.xaml, chargé en premier, qui fournit un balisage pour l’hôte de contenu (où chaque page est chargée dans la fenêtre principale).
  • ItemsPage.xaml, qui est la page d’accueil. Il permet à un utilisateur de sélectionner un groupe pour naviguer vers la page à affichage fractionné de l’application.
  • SplitPage.xaml, qui est la page à affichage fractionné. Deux sections sont définies : une pour la liste d’éléments côté gauche et une autre pour les détails des éléments côté droit.

Le modèle inclut les fichiers .cs|.vb|.cpp|.h suivants :

  • App.xaml.cs|.vb|.cpp|.h, qui spécifie comment l’application se comporte lorsqu’elle est démarrée.
  • ItemsPage.xaml.cs|.vb|.cpp|.h, qui spécifie le comportement associé à la page d’accueil.
  • SplitPage.xaml.cs|.vb|.cpp|.h, qui spécifie le comportement associé à la page à affichage fractionné.
  • SampleDataSource.cs|.vb|.cpp|.h, qui est l’objet source de données qui expose les données à l’application.

Le modèle Application fractionnée inclut également les fichiers suivants :

  • Le fichier SampleData.json, qui contient l’exemple de données utilisée par l’application.
  • package.appxmanifest, qui décrit le package d’application pour Windows.
  • Un fichier PFX utilisé pour signer le fichier appxmanifest (ce fichier est inclus en tant que fichier projet pour la prise en charge de la génération à partir de la ligne de commande).
  • Plusieurs fichiers image, tels que SplashScreen.png pour l’image de l’écran de démarrage et StoreLogo.png qui est utilisé pour le Windows Store.

De quoi est accompagné un modèle ?

Quand vous ouvrez un modèle de projet Hub, Grille ou Fractionner, un dossier intitulé « Commun » s’affiche dans l’Explorateur de solutions. Ce dossier contient quelques classes et ressources sur lesquelles reposent votre projet et n’importe quel modèle d’élément que vous ajoutez. En raison de cette dépendance, ne modifiez pas le contenu de ce dossier. Toutefois, en cas de besoin, vous pouvez modifier les fichiers pour qu’ils se comportent différemment dans votre application et qu’ils agissent comme vous le souhaitez.

Voici une liste des éléments contenus dans le dossier Commun :

Nom de fichierDescriptionAction de votre part ?
BooleanNegationConverter .cs|.vb|.cpp|.hConvertisseur à utiliser en XAML. Ce fichier entraîne la négation d’un booléen. Ce fichier ne figure dans le dossier Commun que si vous ajoutez un modèle d’élément ShareTarget.Non.
BooleanToVisibilityConverter .cs|.vb|.cpp|.hConvertisseur à utiliser en XAML. Ce fichier convertit un booléen en état de visibilité.Non.
NavigationHelper .cs|.vb|.cpp|.h
  • Fournit des commandes utilisées pour la navigation avant et arrière.
  • Enregistre les raccourcis claviers et de souris courants utilisés pour avancer et reculer (et associe ces raccourcis à l’implémentation de la commande).
  • Fournit des événements pour LoadState et SaveState à utiliser lors de la navigation entre les pages. Ces événements indiquent à la fois l’état de la navigation ainsi que l’état de la gestion du cycle de vie des processus.
  • Gère les informations sur l’état à l’aide de SuspensionManager.
Non dans la plupart des cas. Vous souhaiterez peut-être personnaliser le comportement du modèle de navigation dans l’implémentation de votre application.
ReadMe.txtContient des informations importantes sur le modèle. Il est susceptible de changer au fur et à mesure de la mise à jour des modèles. Nous vous recommandons de lire ce fichier chaque fois que vous utilisez un nouveau modèle.Lisez le fichier.
RelayCommand .cs|.vb|.cpp|.hICommand utilisée par NavigationHelper pour les commandes GoBack et GoForward.Non dans la plupart des cas.
SuspensionManager cs|.vb|.cpp|.hGère l’enregistrement et la restauration de l’état transitoire de l’application. Par exemple, quand le système manque de ressources, l’état de l’application active est enregistré et l’application est suspendue. Quand l’utilisateur retourne à l’application, elle est relancée avec l’état enregistré. App.xaml et NavigationHelper utilisent cette classe pour activer la prise en charge de la gestion de la durée de vie des processus.Non dans la plupart des cas. Vous pouvez ajouter des types personnalisés lors de la lecture et de l’écriture d’informations sur l’état de la session.

 

Les modèles de projet Hub, Grille et Fractionner (contrairement aux modèles d’élément Grille et Fractionner) contiennent également un dossier DataModel. Ce dossier comprend à la fois un modèle de données et une méthode générant les données à utiliser au moment de la conception et de l’exécution. Si vous créez une application avec une structure similaire, vous pouvez gagner du temps en utilisant le modèle de données pour les éléments et les groupes. Les exemples de données se présentent sous la forme de chaînes codées en dur. Vous devez remplacer cet exemple de données par une couche d’accès aux données qui fait référence à vos propres données.

Modification des styles

Dans Windows 8, les styles de modèle de projet étaient définis dans le fichier StandardStyles.xaml. Étant donné que la plateforme prend maintenant en charge un grand nombre des styles utilisés dans les modèles, StandardStyles.xaml a été supprimé.

Dans Windows 8.1, les styles des éléments d’interface utilisateur sont spécifiés directement dans chaque page XAML à l’aide des valeurs StaticResource fournies par la plateforme. Vous pouvez modifier ces références à d’autres valeurs prises en charge dans votre code. Pour mettre en forme et afficher des données dans chaque page, un ou plusieurs DataTemplates peuvent être présents. Vous pouvez aussi modifier les valeurs StaticResource dans les modèles de données. Cet exemple de code montre le DataTemplate utilisé dans la Grille pour afficher les éléments de GroupedItemsPage.


<DataTemplate>
    <Grid HorizontalAlignment="Left" Width="250" Height="250">
        <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
            <Image Source="{Binding ImagePath}" Stretch="UniformToFill" 
                AutomationProperties.Name="{Binding Title}"/>
        </Border>
        <StackPanel VerticalAlignment="Bottom" Background="{StaticResource
            ListViewItemOverlayBackgroundThemeBrush}">
            <TextBlock Text="{Binding Title}" Foreground="{StaticResource
                ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}"
                Height="60" Margin="15,0,15,0"/>
            <TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource 
                ListViewItemOverlaySecondaryForegroundThemeBrush}" 
                Style="{StaticResource CaptionTextBlockStyle}"
                TextWrapping="NoWrap" Margin="15,0,15,10"/>
        </StackPanel>
    </Grid>
</DataTemplate>

Création de votre application

Maintenant que vous disposez d’une ébauche d’application, y compris de ses styles de base, vous pouvez commencer à la créer. Vous trouverez ci-dessous quelques ressources à utiliser en fonction de votre préférence de langage.

Rubriques associées

Modèle de navigation (C#/VB/C++ et XAML)
Ajout de données à un modèle de projet (en C#/VB/C++ et XAML)
Modèles d’élément en C#, VB et C++ pour les applications du Windows Store

 

 

Afficher:
© 2014 Microsoft. Tous droits réservés.