Explorer plusieurs fenêtres dans .NET MAUI

Les multi-fenêtres sont une fonctionnalité intéressante dans .NET MAUI, et nous pouvons donner à leur version de bureau un TLC supplémentaire.

.NET MAUI est un outil merveilleux qui vous permet de créer des applications avec la même base de code commune pour les appareils de bureau et mobiles et peut être développé pour Android, iOS, macOS et Windows.

Certaines fonctionnalités sont plus utiles sur la version de bureau d’une application et nécessiteront donc une attention particulière. L’une de ces fonctionnalités est le multi-fenêtres. Les ordinateurs de bureau et les tablettes peuvent autoriser plusieurs fenêtres et vues lorsqu’une application est ouverte. Sur ces appareils, cette fonctionnalité a plus de poids et est plus nécessaire, mais nous pouvons également le faire sur les versions mobiles.

Points importants à souligner :

• Applications de base dans une application de bureau : Comme je l’ai mentionné précédemment, ces applications ont certaines fonctionnalités qui, bien qu’elles fonctionnent sur des appareils mobiles, ont plus de sens ici, par exemple la création de menus ou de multi-fenêtres.

• En gardant à l’esprit le point précédent, le multi-fenêtrage est une fonctionnalité qui va fonctionnent de la même manière pour n’importe quel appareil et plate-formeseulement que vous en ressentirez probablement davantage les avantages lorsque vous l’utiliserez dans des applications de bureau ou des appareils tels que les iPads qui sont plus grands.

Accueillons le multi-fenêtres ! 🎊

Ajout des paramètres de plates-formes nécessaires

Pour mettre en place plusieurs fenêtres, suivez les instructions ci-dessous :

iOS et macOS

Commençons par le Info.plist :

➖ Cliquez sur Dossier de la plate-forme
➖ Cliquez sur le dossier iOS ou MacCatalyst (vous devez faire cette plate-forme une par une)
➖ Info.plist
➖ Pour ouvrir : Double-cliquez ou cliquez Ouvrir avec … et sélectionnez l’outil

Une fois le fichier ouvert, appliquez les étapes suivantes :

• Étape 1: Ajoutez le manifeste de scène d’application. Une fois ajouté, vous aurez un résultat comme celui de l’image suivante.
  

• Étape 2: Définissez Activer plusieurs fenêtres avec OUI.
  

• Étape 3: Ajoutez le rôle de session d’application. Une fois ajouté, vous aurez un résultat comme celui de l’image suivante.
  

• Étape 4: Enfin, ajoutons ce qui suit :

  • Nom de la classe déléguée avec Délégué de scène évaluer.
  • Nom de configuration avec MAUI_DEFAULT_SCENE_CONFIGURATION évaluer.

Compléter toutes les étapes de votre Info.plist vous donnera un résultat comme celui-ci.

Si vous l’ouvrez dans un éditeur de texte, cette partie de votre Info.plist devrait ressembler à ceci :

<key>UIApplicationSceneManifest</key>
    <dict>
     <key>UIApplicationSupportsMultipleScenes</key>
     <true/>
         <key>UISceneConfigurations</key>
     <dict>
    <key>UIWindowSceneSessionRoleApplication</key>
    <array>
	    <dict>   
		    <key>UISceneDelegateClassName</key>		    
		    <string>SceneDelegate</string>		    
		    <key>UISceneConfigurationName</key>		    
		    <string>__MAUI_DEFAULT_SCENE_CONFIGURATION__</string>    
	    </dict>
    </array>
</dict>
</dict>

Enfin, ajoutons la classe SceneDelegate.

Dans le même dossier iOS :

➖ Créer la classe SceneDelegate
➖ Enregistrez un SceneDelegate avec [Register("SceneDelegate")]
➖ Hérite de la MauiUISceneDelegate classer

Le résultat devrait ressembler à l’exemple de code suivant :

using Foundation;
using Microsoft.Maui;

namespace MultiWindowsSample;

[Register("SceneDelegate")]
public class SceneDelegate : MauiUISceneDelegate
{

}

⚠ Appliquez exactement les mêmes étapes dans le MacCatalyseur Dossier.

Windows et Androïd

Pour Android: Aucune configuration supplémentaire requise.

Pour les fenêtres: Aucune configuration supplémentaire requise.

En savoir plus sur le multi-fenêtres

Le multi-fenêtrage vous aide à ouvrir toutes les fenêtres dont vous avez besoin dans votre application. Cette fonctionnalité a été annoncée dans Aperçu 11 de .NET MAUI.

Je vais vous expliquer les deux méthodes les plus importantes et les plus fondamentales pour gérer nos fenêtres, qui sont les fenêtres d’ouverture et de fermeture. Voyons voir !

🔓 Ouverture des fenêtres

Détaillons le Ouvre les fenêtres méthode, qui se compose des éléments suivants :

• Application classe : disponible en Microsoft.Maui.Control suivi de la .Courant qui fait référence à l’instance de l’application en cours d’exécution.
• Ouvre les fenêtres method : responsable de l’ouverture de la fenêtre, elle attend un Window Object.

L’explication graphique serait la suivante :

Voyons ça en code :

void OnOpenWindowClicked(object sender, EventArgs e)
{
     Application.Current.OpenWindow(new Window(new MainPage()));
}

🔒 Fermeture des fenêtres

Détaillons le FermerWindows méthode, qui se compose de ce qui suit :

• Application et Courant ont les mêmes définitions que le point précédent.
• FermerWindows la méthode est responsable de la fermeture de la fenêtre ; il attend un objet Window.
• GetParentWindows: Cela vous aide à obtenir l’élément parent d’une page. Il est important de savoir que toutes les pages contiennent cette méthode.

Voyons ça en code :

void OnCloseWindowClicked(object sender, EventArgs e)
{
    var window = GetParentWindow();
    if (window is not null)
    Application.Current.CloseWindow(window);
}

XAML

<ScrollView>

    <VerticalStackLayout Spacing="25" VerticalOptions="Center">
    
	    <Image Source="dotnet_bot.png"
		       HeightRequest="200"
			   HorizontalOptions="Center" />
    
	    <Label Text="Let's explore Multi-Windows in .NET MAUI!"
		       FontSize="25"
		       HorizontalOptions="Center" />
    
	    <Button Text="Open Windows"
		        Clicked="OnOpenWindowClicked"
		        HorizontalOptions="Center" />
    
	    <Button Text="Close Windows"
		        Clicked="OnCloseWindowClicked"
			    HorizontalOptions="Center" />
    
    </VerticalStackLayout>
    
</ScrollView>

Enfin, c’est notre résultat incroyable! 😍

Et jetons un coup d’œil sur macOS. 😍

Emballer

Merci d’avoir lu! Rendez-vous dans le prochain post! 🙋‍♀️

Tu peux voir le Exemple de code GitHub ici.

Références: https://www.youtube.com/watch?v=hCNGZFcP6sY