Transformez une application WPF en multiplateforme avec .NET MAUI

Votre application WPF peut gagner plus d’utilisateurs si vous la rendez multiplateforme, mais quelle est la meilleure façon de le faire avec .NET MAUI ou Blazor Hybrid ? Faites un test rapide et découvrez les étapes à suivre si les résultats indiquent .NET MAUI.

Si vous avez une excellente application WPF, vos principaux utilisateurs cibles sont peut-être ceux qui utilisent le système d’exploitation Windows. Cependant, l’utilisation des appareils Android, iOS et macOS continue d’augmenter et ils constituent désormais une partie très importante de notre écosystème.

Pour référence, nous pouvons jeter un œil aux données de Wikipedia : Part d’utilisation des systèmes d’exploitation – Wikipédia.

Jusqu’à récemment, atteindre tous ces utilisateurs n’était pas facile – vous deviez écrire quatre applications différentes si vous aviez besoin de vous fier à une apparence native pour l’expérience utilisateur ou de choisir la pile Web et d’accéder aux utilisateurs via des navigateurs. Soyons honnêtes, toutes ces options nécessitaient d’apprendre différentes technologies et de sortir du monde .NET.

Mais maintenant, la famille .NET est si grande et nous pouvons l’utiliser pour étendre et moderniser notre application de bureau pour atteindre le ciel (ou, en d’autres termes, Linux, iOS, macOS et Android 😊).

Comment? Jetons un coup d’œil aux enfants les plus modernes de la famille….NET FIXE et .NET Blazor. Les deux sont un excellent choix à considérer lorsque vous réfléchissez à la manière d’apporter notre application de bureau à de nouveaux territoires.

Lequel utiliser ?

Veuillez faire ce test simple et choisir la pile technologique adaptée à vos besoins :

Donc, si le résultat vous a amené à utiliser .NET MAUI, continuez à lire jusqu’à la fin de cet article. Si les résultats vous ont amené à utiliser une application Blazor Hybrid, c’est également une excellente option et nous l’examinerons dans le prochain article. 😊

.NET MAUI XAML contre WPF XAML

.NET MAUI est une technologie multiplateforme basée sur XAML, donc si vous avez une solide expérience WPF, vous aurez un processus d’apprentissage rapide, mais vous vous préparerez toujours à faire face à certaines différences.

XAML est une excellente invention et personnellement, je l’aime beaucoup. Cependant, il n’existe toujours pas de norme XAML, ce qui complique les choses lorsque nous parlons d’unification et de migration.

Avec .NET FIXEnous pouvons réutiliser nos compétences XAML et C# et apporter notre application de bureau Windows à plus d’appareils en la déplaçant pièce par pièce.

.NET MAUI XAML est en fait le Spécification XAML 2009, identique à un autre membre de la famille .NET, WinUI. Donc, si vous connaissez déjà WinUI, vous connaissez une grande partie de MAUI XAML. Toutefois, si votre expérience concerne Silverlight/WPF XAML, qui suit la spécification XAML 2006, vous rencontrerez certaines différences. J’ai listé ci-dessous les plus intéressants pour commencer :

Utiliser du texte

Ici, le label bien connu existe toujours, mais pas le Zone de texte composant. Dans .NET MAUI, nous utilisons Entrée pour le texte court et le Éditeur composant pour plusieurs lignes. Telerik RadEntrée est également un excellent composant lorsque nous parlons de texte avec certaines fonctionnalités dont vous pourriez avoir besoin, telles que la fonction intégrée Validation.

Premier plan est également remplacé par le Couleur du texte propriété.

Utilisation des bordures

Alors que dans WPF, nous avons des propriétés intégrées du FrameworkElement objets Buttons, Labels, TextBox, etc. pour utiliser le Épaisseur de bordure, Rayon d’angle. Dans .NET MAUI, nous devons utiliser un contrôle conteneur qui dessine une bordure, un arrière-plan ou les deux autour d’un autre contrôle. Ici, nous pouvons utiliser le Bordure .NET MAUI composant, où nous devons utiliser son StokeShape propriété pour définir la forme et le rayon d’angle ou Frontière Telerik composant qui expose directement les propriétés bien connues pour un dev WPF—Rayon d’angle et Épaisseur de bordure.

Hauteur/Largeur vs RequestHeight/RequestWidth

Dans WPF, nous pouvons nous appuyer sur les propriétés Height et Width de la classe FrameWorkElement, tandis que dans .NET MAUI, le framework nous propose à la place HeightRequest et WidthRequest, qui sont des propriétés de la classe VisualElement. Ces propriétés appelleront GetSizeRequest, qui modifiera à son tour la taille finale que l’élément reçoit au cours d’un cycle de mise en page.

Dispositions

Les mises en page de base dans .NET MAUI sont également différentes de WPF et je vous suggère de consulter la documentation .NET MAUI avant de porter le code directement : Mises en page – .NET MAUI | Microsoft Apprendre.

Notez que chaque contrôle d’interface utilisateur d’application multiplateforme .NET qui dérive de View (cela inclut les vues et les mises en page) a Options horizontales et Options verticales propriétés, de type Options de mise en pageet ce sont vos nouveaux meilleurs amis lors du positionnement des éléments.

Par exemple, utilisez-le pour positionner un Label à l’intérieur d’un StackPanel :

<HorizontalStackLayout  HorizontalOptions="Center"  
  Margin="0, 20, 0, 20">  
    <Label  Text="Searching... "  
    FontSize="16"  
    TextColor="#8E8E93"/>
</HorizontalStackLayout/>

Je liste ici les alternatives courantes des mises en page les plus utilisées de WPF :

Le composant ScrollViewer n’est pas non plus disponible, mais vous pouvez compter sur ScrollView pour obtenir la fonctionnalité de défilement. En savoir plus sur son API dans la documentation : ScrollView – .NET MAUI | Microsoft Apprendre.

Utilisation de Windows

.NET MAUI est un successeur du framework mobile Xamarin où les fenêtres sont peu utilisées. C’est pourquoi, par défaut, la classe de base des pages XAML n’est pas Fenêtremais Contenu de la page. Les pages de contenu sont utilisées pour réaliser la navigation dans une application .NET MAUI, de sorte que la fenêtre racine de l’application les utilise pour modifier son contenu. Ainsi, lorsque vous migrez des pages WPF, remplacez la classe de base par ContentPage.

De plus, il y a des moments « délicats » où nous voulons manipuler la fenêtre. Par exemple, pour changer sa taille. Voici un code simple expliquant comment procéder dans App.xaml :

public partial class App : Application
{
    const int WindowWidth = 450;
    const int WindowHeight = 800;
 
    public App()
    {
        InitializeComponent();
 
        Microsoft.Maui.Handlers.WindowHandler.Mapper.AppendToMapping(nameof(IWindow), (handler, view) =>
        {
#if WINDOWS
                handler.PlatformView.Activate();
 
                IntPtr windowHandle = WinRT.Interop.WindowNative.GetWindowHandle(handler.PlatformView);
                AppWindow appWindow = AppWindow.GetFromWindowId(Win32Interop.GetWindowIdFromWindow(windowHandle));
 
                appWindow.Resize(new SizeInt32(WindowWidth, WindowHeight));
#endif
        });
        MainPage = new AppShell();
}
}

Une autre façon est de remplacer l’App CréerFenêtre méthode, mais uniquement avec les versions .NET 7 et supérieures.

protected override Window CreateWindow(IActivationState activationState)  
      {  
        var window = base.CreateWindow(activationState);  
        window.MinimumHeight = 600; 
        window.MinimumWidth = 800; 
        return window;  
      }

Avec .NET 7, nous pouvons utiliser plusieurs fenêtres. Ceci peut être réalisé en créant un objet Window et en l’ouvrant à l’aide de la méthode OpenWindow sur l’objet Application.

Window secondWindow = new Window(new MyPage());  
Application.Current.OpenWindow(secondWindow);  

Notez que le support multi-fenêtre fonctionne sur Android et Windows sans configuration supplémentaire. Cependant, une configuration supplémentaire est requise sur iPadOS et Mac Catalyst. En savoir plus sur la façon de le configurer dans la documentation Microsoft ici : Fenêtres .NET MAUI – .NET MAUI | Microsoft Apprendre.

Événements

La convention de dénomination des événements est également un peu différente. Mais en gros, ajouter « ed » aux événements WPF existants devrait faire l’affaire.

Exemple: Button.Click est maintenant Button.Clicked.

Une autre chose intéressante à souligner sont les événements clés. Ils ne sont pas exposés directement. Cependant, la plupart des composants de l’interface utilisateur ont leurs événements qui se déclenchent lorsque le focus est perdu ou que le texte est modifié, et vous pouvez vous y abonner pour faire votre travail.

Par exemple, vous pouvez vous abonner à l’événement Completed qui est déclenché lorsque Enter est lu dans Entry :

MyEntry.Completed += MyEntry_Completed;  
  
private void MyEntry_Completed(object sender, EventArgs e)  
{  
  
}

Une autre méthode consiste à accéder au composant Windows natif et à joindre l’événement :

Pour ce faire, vous pouvez obtenir le UIElement sur lequel les événements de pression de touche doivent être détectés à partir Handler.PlatformView. Et puis vous pouvez connecter les événements natifs.

var handler = mauiView.Handler;
  
UIElement? nativeView = handler?.PlatformView as UIElement;  
if (nativeView != null)  
{  
  nativeView.KeyDown += this.PlatformView_KeyDown;  
  nativeView.KeyUp += this.PlatformView_KeyUp;  
  nativeView.PreviewKeyDown += this.PlatformView_PreviewKeyDown;  
}

Images et ressources

C’est l’une des grandes fonctionnalités de .NET MAUI – un dossier partagé commun où vous pouvez placer les images, utiliser l’action de génération MAUIImage et y accéder directement dans le code sans vous soucier de leur emplacement exact :

Par exemple, si vous placez add.png dans le dossier image, vous pouvez y accéder à partir d’un bouton par son nom abrégé :

Personnalisation

Une autre chose importante que vous devez savoir est de savoir comment personnaliser l’interface utilisateur ou le comportement par plate-forme. Vous pouvez utiliser deux approches principales :

1. Écrivez du code spécifique à la plate-forme et utilisez le #if instructions en C# :

#if ANDROID  using Android.Content;
using Android.Views;
  using Android.Runtime;
#elif IOS  using UIKit;
  #endif  

Pour plus d’informations, voir.NET MAUI appelant le code de la plate-forme – .NET MAUI | Microsoft Apprendre.

Ou la OnPlatform propriété en XAML :

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  x:Class="...">
  <ContentPage.Padding>
    <OnPlatform x:TypeArguments="Thickness">
      <On Platform="iOS, Android"  Value="10, 20, 20, 10" />
    </OnPlatform>
  </ContentPage.Padding>
</ContentPage>

Pour plus d’informations, voir Extension de balisage OnPlatform.

2. Utilisez le nouveau mécanisme dans .NET MAUI — gestionnaires. Pour les gestionnaires, vous pouvez en savoir plus dans l’un de nos articles précédents.

Accessibilité

Un autre sujet très important pour les applications modernes est l’accessibilité. Dans WPF, nous avons beaucoup d’outils pour y parvenir. L’un d’eux est le AutomationPeer classe. Dans .NET MAUI, nous utiliserons des propriétés sémantiques pour rendre notre application accessible. En savoir plus sur les propriétés sémantiques ici : Créez des applications accessibles avec des propriétés sémantiques – .NET MAUI | Microsoft Apprendre.

Conclusion

La migration d’une application WPF n’est pas une tâche anodine, mais cela en vaut la peine car .NET MAUI nous offre de nombreuses possibilités et plates-formes prises en charge.

Le cadre est riche en ressources et fonctionnalités, mais s’il vous manque quelque chose, qu’il s’agisse d’une ressource ou d’un composant, Telerik est là pour vous aider. Parcourir le Documentation Telerik et télécharger l’interface utilisateur Telerik pour .NET MAUI pour booster votre processus de développement.

Et si notre petit test ci-dessus vous a montré que l’application Hybrid Blazor est mieux adaptée à vos besoins, restez à l’écoute, nous en reparlerons très bientôt.