Créez un « Hello, World ! » Application UWP (XAML) avec .NET 9

2025-05-07

Ce tutoriel vous apprend à utiliser XAML, C# et .NET 9 avec AOT natif (à l’avance) pour créer une application simple « Hello, World ! » pour la plateforme Windows universelle (UWP) sur Windows. Avec un seul projet dans Microsoft Visual Studio, vous pouvez créer une application qui s’exécute sur toutes les versions prises en charge de Windows 10 et Windows 11.

Ici, vous allez apprendre à :

Créez un projet UWP ciblant .NET 9 dans Visual Studio.
Écrivez XAML pour modifier l’interface utilisateur sur votre page de démarrage.
Exécutez le projet sur le bureau local dans Visual Studio.
Utilisez un SpeechSynthesizer pour faire parler l’application lorsque vous appuyez sur un bouton.

Conditions préalables

Qu’est-ce qu’une application Windows universelle ?
Téléchargez Visual Studio (et Windows). Si vous avez besoin d’aide, découvrez comment vous préparer.
Nous partons également du principe que vous utilisez la disposition de fenêtre par défaut dans Visual Studio. Si vous modifiez la disposition par défaut, vous pouvez la réinitialiser dans le menu Fenêtre à l’aide de la commande Réinitialiser la disposition de la fenêtre .

Remarque

Ce tutoriel utilise Visual Studio 2022. Si vous utilisez une autre version de Visual Studio, il peut sembler un peu différent pour vous.

Étape 1 : Créer un projet dans Visual Studio

Lancez Visual Studio.
Dans le menu Fichier , sélectionnez Nouveau > projet pour ouvrir la boîte de dialogue Nouveau projet .
Filtrez la liste des modèles disponibles en choisissant C# dans la liste déroulante Langues et UWP dans la liste déroulante Types de projets pour afficher la liste des modèles de projet UWP disponibles pour les développeurs C#.

(Si vous ne voyez pas de modèles UWP, vous manquez peut-être les composants pour la création d’applications UWP. Vous pouvez répéter le processus d’installation et ajouter la prise en charge UWP en ouvrant Visual Studio Installer à partir de votre menu Démarrer de Windows. Pour plus d’informations, consultez Configurer Visual Studio pour le développement UWP .)
Choisissez le modèle d’application vide UWP .

Important

Veillez à sélectionner le modèle d’application vide UWP . Si vous sélectionnez le modèle Application vide UWP (.NET Native), il cible le runtime .NET Native, et non .NET 9. Les applications ciblant .NET Native n’ont pas accès aux dernières fonctionnalités .NET et C#, ainsi qu’à la sécurité et aux performances. Pour plus d’informations sur les différences entre les deux types de projet, consultez Moderniser votre application UWP avec une préversion de la prise en charge UWP pour .NET 9 et Native AOT.
Sélectionnez Suivant, puis entrez « HelloWorld » comme nom du projet. Cliquez sur Créer.

Remarque

S’il s’agit de la première fois que vous avez utilisé Visual Studio, vous pouvez voir une boîte de dialogue Paramètres vous demandant d’activer le mode Développeur. Le mode développeur est un paramètre spécial qui permet à certaines fonctionnalités, telles que l’autorisation d’exécuter des applications directement, plutôt que uniquement à partir du Windows Store. Pour découvrir plus d’informations, veuillez consulter Activer votre appareil pour le développement. Pour continuer avec ce guide, sélectionnez Le mode Développeur, cliquez sur Oui, puis fermez la boîte de dialogue.
La boîte de dialogue Version cible/Version minimale s’affiche. Les paramètres par défaut sont corrects pour ce tutoriel. Sélectionnez OK pour créer le projet.
Lorsque votre nouveau projet s’ouvre, ses fichiers sont affichés dans le volet Explorateur de solutions à droite. Vous devrez peut-être choisir l’onglet Explorateur de solutions au lieu des onglets Propriétés ou GitHub Copilot Chat pour afficher vos fichiers.

Bien que l’application vide UWP soit un modèle minimal, elle contient toujours beaucoup de fichiers. Ces fichiers sont essentiels à toutes les applications UWP à l’aide de C#. Chaque projet UWP que vous créez dans Visual Studio les contient.

Qu’est-ce qui se trouve dans les fichiers ?

Pour afficher et modifier un fichier dans votre projet, double-cliquez sur le fichier dans l’Explorateur de solutions. Développez un fichier XAML comme un dossier pour voir son fichier de code associé. Les fichiers XAML s’ouvrent en vue fractionnée qui affiche à la fois la surface de conception et l’éditeur XAML.

Remarque

Qu’est-ce que XAML ? Xaml (Extensible Application Markup Language) est le langage utilisé pour définir l’interface utilisateur de votre application. Il peut être entré manuellement ou créé à l’aide des outils de conception Visual Studio. Un fichier .xaml a un fichier .xaml.cs code-behind qui contient la logique. Ensemble, le code-behind et le XAML forment une classe complète. Pour plus d’informations, consultez la vue d’ensemble du code XAML.

App.xaml et App.xaml.cs

App.xaml est le fichier dans lequel vous déclarez des ressources utilisées dans l’application.
App.xaml.cs est le fichier code-behind pour App.xaml. Comme toutes les pages code-behind, il contient un constructeur qui appelle la InitializeComponent méthode. Vous n’écrivez pas la InitializeComponent méthode. Il est généré par Visual Studio et son objectif principal est d’initialiser les éléments déclarés dans le fichier XAML.
App.xaml.cs est le point d’entrée de votre application.
App.xaml.cs contient également des méthodes permettant de gérer l’activation et la suspension de l’application.

MainPage.xaml

MainPage.xaml est l’emplacement où vous définissez l’interface utilisateur de votre application. Vous pouvez ajouter des éléments directement à l’aide du balisage XAML, ou vous pouvez utiliser les outils de conception fournis par Visual Studio.
MainPage.xaml.cs est la page de code associée au fichier MainPage.xaml. C’est là que vous ajoutez votre logique d’application et vos gestionnaires d’événements.
Ensemble, ces deux fichiers définissent une nouvelle classe appelée MainPage, qui hérite de Page, dans l’espace HelloWorld de noms.

Package.appxmanifest

Fichier manifeste qui décrit votre application : son nom, sa description, sa vignette, sa page de démarrage, etc.
Inclut une liste de dépendances, de ressources et de fichiers que votre application contient.

Ensemble d’images de logo

Les ressources/Square150x150Logo.scale-200.png et Wide310x150Logo.scale-200.png représentent votre application (taille moyenne ou large) dans le menu Démarrer.
Ressources/Square44x44Logo.png représente votre application dans la liste des applications du menu Démarrer, de la barre des tâches et du gestionnaire de tâches.
Les ressources/StoreLogo.png représentent votre application dans le Microsoft Store.
Ressources/SplashScreen.scale-200.png est l’écran de démarrage qui s’affiche au démarrage de votre application.
Les ressources/LockScreenLogo.scale-200.png peuvent être utilisées pour représenter l’application sur l’écran de verrouillage, lorsque le système est verrouillé.

Étape 2 : Ajouter un bouton

Utilisation de la vue du concepteur

Ajoutons un bouton à notre page. Dans ce tutoriel, vous utilisez uniquement quelques-uns des fichiers répertoriés précédemment : App.xaml, MainPage.xaml et MainPage.xaml.cs.

Double-cliquez sur MainPage.xaml pour l’ouvrir dans l’éditeur XAML.

Remarque

Vous ne verrez pas de vue de conception lors de l’utilisation du modèle UWP Blank App qui utilise .NET 9. Si vous souhaitez utiliser un projet UWP avec une vue de conception XAML, vous pouvez utiliser le modèle D’application vide UWP (.NET Native) à la place. Comme indiqué précédemment, le modèle d’application vide UWP (.NET Native) est un peu différent du modèle d’application vide UWP , mais il a la même structure de base. La principale différence est que le modèle Application vide UWP (.NET Native) utilise .NET Native pour compiler votre application. Consultez Moderniser votre application UWP avec la version préliminaire de la prise en charge UWP pour .NET 9 et Native AOT pour obtenir des informations sur les avantages de l'utilisation du nouveau modèle .NET 9.
Ajoutez le code XAML suivant à l’élément <Grid> dans MainPage.xaml. Vous pouvez le taper ou le copier et le coller à partir de là :
```
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top"/>
```
À ce stade, vous avez créé une application très simple. Il s’agit d’un bon moment pour générer, déployer et lancer votre application et voir ce qu’elle ressemble. Vous pouvez déboguer votre application sur l’ordinateur local, dans un simulateur ou un émulateur, ou sur un appareil distant. Voici le menu de l’appareil cible dans Visual Studio :

Par défaut, l’application s’exécute sur l’ordinateur local. Le menu de l’appareil cible fournit plusieurs options pour déboguer votre application sur des appareils à partir de la famille d’appareils de bureau.
- HelloWorld (cela l’exécute sur l’ordinateur local)
- WSL
- Télécharger de nouveaux émulateurs...
Exécutez l’application pour afficher le bouton en action. Pour démarrer le débogage sur l’ordinateur local, vous pouvez exécuter l’application en sélectionnant le débogage | Démarrez l’élément Débogage dans le menu, en cliquant sur le bouton Démarrer le débogage dans la barre d’outils (avec l’étiquette HelloWorld ) ou en appuyant sur F5.

L’application s’ouvre dans une fenêtre et un écran de démarrage par défaut s’affiche en premier. L’écran de démarrage est défini par une image (SplashScreen.png) et une couleur d’arrière-plan (spécifiée dans le fichier manifeste de votre application).

L’écran de démarrage disparaît, puis votre application s’affiche. Il ressemble à ceci :
Appuyez sur la touche Windows pour ouvrir le menu Démarrer , puis sélectionnez Tout pour afficher toutes les applications. Notez que le déploiement de l’application localement l’ajoute à la liste des programmes dans le menu Démarrer . Pour réexécuter l’application ultérieurement (pas en mode débogage), vous pouvez la sélectionner dans le menu Démarrer .

Cela ne fait pas encore grand-chose, mais félicitations, vous avez créé et déployé votre première application UWP sur votre ordinateur local !
Pour arrêter le débogage :

Cliquez sur le bouton Arrêter le ) dans la barre d’outils.

–ou–

Dans le menu Débogage , cliquez sur Arrêter le débogage.

–ou–

Fermez la fenêtre de l’application.
Modifiez le texte du bouton en modifiant la valeur de Content de Button à Hello, world!.
```
<Button x:Name="button" Content="Hello, world!" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top"/>
```
Si vous réexécutez l’application, le bouton est mis à jour pour afficher le nouveau texte.

Étape 3 : Gestionnaires d’événements

Un « gestionnaire d’événements » semble compliqué, mais il s’agit simplement d’un autre nom pour le code appelé lorsqu’un événement se produit (par exemple, l’utilisateur clique sur votre bouton).

Arrêtez l’exécution de l’application, si ce n’est pas déjà fait.
Commencez à taper Click dans l’éditeur XAML, et Visual Studio affiche une liste d’événements possibles. Sélectionnez Cliquer dans la liste.
Ensuite, sélectionnez-le <New Event Handler> dans la liste. Cela crée une méthode de gestionnaire d’événements dans le fichier code-behind (MainPage.xaml.cs) et ajoute l’événement Click à l’élément bouton de votre code XAML.

L’éditeur XAML ajoute automatiquement l’événement Click à l’élément bouton dans votre code XAML :
```
<Button x:Name="button" Content="Hello, world!" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top" Click="button_Click"/>
```
Cela ajoute également un gestionnaire d’événements au fichier code-behind (MainPage.xaml.cs). Le gestionnaire d’événements est une méthode qui sera appelée lorsque le bouton est cliqué. Le nom de la méthode est button_Click, et il a deux paramètres : object sender et RoutedEventArgs e.
```
private void button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{

}
```
L’événement Click est un événement standard pour les boutons. Lorsque l’utilisateur clique sur le bouton, la button_Click méthode est appelée.

Modifiez le code du gestionnaire d’événements dans MainPage.xaml.cs, la page code-behind. C’est là que les choses sont intéressantes. Nous allons le modifier, donc il ressemble à ceci :

private async void button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
    var mediaElement = new MediaElement();
    var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();
    Windows.Media.SpeechSynthesis.SpeechSynthesisStream stream = await synth.SynthesizeTextToStreamAsync("Hello, World!");
    mediaElement.SetSource(stream, stream.ContentType);
    mediaElement.Play();
}

Vérifiez que la signature de méthode inclut désormais le mot clé asynchrone , ou que vous obtiendrez une erreur lorsque vous essayez d’exécuter l’application.

Qu’est-ce que nous avons fait ?

Ce code utilise certaines API Windows pour créer un objet de synthèse vocale, puis lui donne du texte à dire. (Pour plus d’informations sur l’utilisation de SpeechSynthesis, consultez l’espace de noms SpeechSynthesis dans la documentation de l’API Windows Runtime (WinRT).)

Lorsque vous exécutez l’application et cliquez sur le bouton, votre ordinateur (ou téléphone) indique littéralement « Hello, World ! ».

Résumé

Félicitations, vous avez créé votre première application UWP pour Windows avec .NET 9 !

Pour savoir comment utiliser XAML pour la disposition des contrôles que votre application utilisera, essayez le didacticiel de grille ou passez directement aux étapes suivantes ?