Configuration du projet

Avant de commencer à coder l’application, nous allons examiner rapidement le projet Visual Studio et prendre en charge la configuration d’un projet. Lorsque Visual Studio crée un projet WinUI 3, plusieurs dossiers et fichiers de code importants sont générés. Ceux-ci sont visibles dans le volet de l’Explorateur de solutions de Visual Studio :

Les éléments répertoriés ici sont ceux avec lesquels vous interagirez principalement. Ces fichiers permettent d’obtenir l’application WinUI 3 configurée et en cours d’exécution. Chaque fichier a un objectif différent, décrit ci-dessous :

• Dossier Ressources

  Ce dossier contient le logo, les images et d’autres ressources multimédias de votre application. Il démarre avec des fichiers d’espace réservé pour le logo de votre application. Ce logo représente votre application dans le menu Démarrer de Windows, la barre des tâches Windows et dans le Microsoft Store lorsque votre application y est publiée.

• App.xaml et App.xaml.cs

  Le fichier contient des ressources XAML à l’échelle App.xaml de l’application, telles que des couleurs, des styles ou des modèles. Le fichier contient généralement du App.xaml.cs code qui instancie et active la fenêtre d’application. Dans ce projet, il pointe vers la classe MainWindow.

• MainWindow.xaml et MainWindow.xaml.cs

  Ces fichiers représentent la fenêtre de votre application.

• Package.appxmanifest

  Ce fichier manifeste de package vous permet de configurer des informations sur l’éditeur, des logos, des architectures de processeur et d’autres détails qui déterminent l’affichage de votre application dans le Microsoft Store.

Fichiers XAML et classes partielles

Xaml (Extensible Application Markup Language ) est un langage déclaratif qui peut initialiser des objets et définir des propriétés d’objets. Vous pouvez créer des éléments d’interface utilisateur visibles dans le balisage XAML déclaratif. Vous pouvez ensuite associer un fichier de code distinct pour chaque fichier XAML (généralement appelé fichier code-behind ) qui peut répondre aux événements et manipuler les objets que vous déclarez à l’origine en XAML.

Il existe généralement deux fichiers avec n’importe quel fichier XAML, le .xaml fichier lui-même et un fichier code-behind correspondant qui est un élément enfant de celui-ci dans l’Explorateur de solutions.

• Le fichier contient le .xaml balisage XAML qui définit l’interface utilisateur de votre application. Le nom de classe est déclaré avec l’attribut x:Class .
• Le fichier de code contient du code que vous créez pour interagir avec le balisage XAML et un appel à la InitializeComponent méthode. La classe est définie en tant que partial class.

Lorsque vous générez votre projet, la InitializeComponent méthode est appelée pour analyser le .xaml fichier et générer du code joint au code partial class pour créer la classe complète.

En savoir plus dans la documentation :

• Vue d’ensemble de XAML
• Classes et méthodes partielles (Guide de programmation C#)
• attribut x :Class, x :Class, directive

Mettre à jour MainWindow

La MainWindow classe incluse dans le projet est une sous-classe de la classe Window XAML, utilisée pour définir l’interpréteur de commandes de l’application. La fenêtre de l’application comporte deux parties :

• La partie cliente de la fenêtre est l’endroit où se trouve votre contenu.
• La partie non cliente est la partie contrôlée par le système d’exploitation Windows. Il inclut la barre de titre, où les contrôles de légende (boutons Min/Max/Close), l’icône de l’application, le titre et la zone de glisser sont. Il inclut également le cadre autour de l’extérieur de la fenêtre.

Pour que l’application Notes WinUI soit cohérente avec les instructions Fluent Design, vous allez apporter quelques modifications à MainWindow. Tout d’abord, vous allez appliquer le matériau Mica comme toile de fond de fenêtre. Mica est un matériau opaque et dynamique qui incorpore le thème et le papier peint de bureau pour peindre l’arrière-plan de la fenêtre. Ensuite, vous allez étendre le contenu de votre application dans la zone de barre de titre et remplacer la barre de titre système par un contrôle Xaml TitleBar . Cela améliore l’utilisation de l’espace et vous donne plus de contrôle sur la conception, tout en fournissant toutes les fonctionnalités requises de la barre de titre.

Vous allez également ajouter un frame en tant que contenu de la fenêtre. La Frame classe fonctionne avec la classe Page pour vous permettre de naviguer entre les pages de contenu de votre application. Vous allez ajouter les pages dans une étape ultérieure.

1. Double-cliquez MainWindow.xaml dans l’Explorateur de solutions pour l’ouvrir.

2. Entre les balises d’ouverture et de fermeture<Window.. > , remplacez tout XAML existant par ceci :

   <Window.SystemBackdrop>
       <MicaBackdrop Kind="Base"/>
   </Window.SystemBackdrop>
   
   <Grid>
       <Grid.RowDefinitions>
           <!-- Title Bar -->
           <RowDefinition Height="Auto" />
           <!-- App Content -->
           <RowDefinition Height="*" />     
       </Grid.RowDefinitions>
       <TitleBar x:Name="AppTitleBar"
                 Title="WinUI Notes">
           <TitleBar.IconSource>
               <FontIconSource Glyph="&#xF4AA;"/>
           </TitleBar.IconSource>
       </TitleBar>
   
       <!-- App content -->
       <Frame x:Name="rootFrame" Grid.Row="1"/>
   </Grid>
   

3. Enregistrez le fichier en appuyant sur Ctrl + S, en cliquant sur l’icône Enregistrer dans la barre d’outils ou en sélectionnant le menu Enregistrer>MainPage.xaml.

Ne vous inquiétez pas si vous ne comprenez pas ce que fait tout ce balisage XAML pour le moment. À mesure que vous générez le reste de l’interface utilisateur de l’application, nous expliquerons plus en détail les concepts XAML.

<object ... >
    <object.property>
        value
    </object.property>
</object>

<Window ... >
   <Window.SystemBackdrop>
       <MicaBackdrop Kind="Base"/>
   </Window.SystemBackdrop>
    ...
</Window>

Si vous exécutez l’application maintenant, vous verrez l’élément XAML TitleBar que vous avez ajouté, mais il se trouve sous la barre de titre système, qui s’affiche toujours.

Vous devez écrire un peu de code pour terminer le remplacement de la barre de titre système.

1. Ouvrez MainWindow.xaml.cs. Vous pouvez ouvrir le code-behind pour MainWindow.xaml (ou tout fichier XAML) de trois façons :

   • Si le MainWindow.xaml fichier est ouvert et est le document actif en cours de modification, appuyez sur F7.
   • Si le MainWindow.xaml fichier est ouvert et est le document actif en cours de modification, cliquez avec le bouton droit dans l’éditeur de texte et sélectionnez Afficher le code.
   • Utilisez l’Explorateur de solutions pour développer l’entrée MainWindow.xaml , révélant le MainWindow.xaml.cs fichier. Double-cliquez sur le fichier pour l’ouvrir.

2. Dans le constructeur pour MainWindow, ajoutez ce code après l’appel à InitializeComponent:

   public MainWindow()
   {
       this.InitializeComponent();
   
       // ↓ Add this. ↓
       // Hide the default system title bar.
       ExtendsContentIntoTitleBar = true;
       // Replace system title bar with the WinUI TitleBar.
       SetTitleBar(AppTitleBar);
       // ↑ Add this. ↑
   }
   

   La propriété ExtendsContentIntoTitleBar masque la barre de titre système par défaut et étend votre code XAML d’application dans cette zone. L’appel à SetTitleBar indique ensuite au système de traiter l’élément XAML que vous avez spécifié (AppTitleBar) comme barre de titre de l’application.

3. Générez et exécutezle projet en appuyant sur F5, en cliquant sur le bouton Déboguer « Démarrer » dans la barre d’outils ou en sélectionnant le menu Démarrer >le débogage.

Lorsque vous exécutez l’application maintenant, vous verrez une fenêtre vide avec un arrière-plan mica et la barre de titre XAML remplacée par la barre de titre système.