Il y a beaucoup de promesses à apporter la bonté de Blazor aux applications de bureau WPF. Ce serait un excellent moyen de moderniser les applications WPF et de mieux partager le code entre le Web et le bureau.

Windows Presentation Foundation (WPF) est un framework d'interface utilisateur complet pour les applications Windows, initialement publié en tant que partie de .NET Framework 3 en 2006. WPF actuel est une pile technologique open source C#/XAML avec des outils matures et un écosystème riche. Depuis plus de 15 ans, WPF est la pierre angulaire du développement de bureau Windows et offre un lieu de travail heureux et productif à la plupart des développeurs d'applications de bureau .NET.

Pourtant, on ne peut s'empêcher de reconnaître la nouveauté intéressante pour les développeurs .NET—Blazor mange le monde. Avec Blazor, les développeurs peuvent créer des applications Web modernes avec C#/.NET, s'exécutant sur le serveur ou entièrement côté client via WebAssembly. Mais Blazor pourrait-il jouer un rôle dans la pile technologique WPF pour créer des applications de bureau ? Les développeurs pourraient-ils partager du code entre le Web et le bureau et avoir un moyen de moderniser les applications WPF ? Alors que les premiers jours, la réponse est oui, il existe plusieurs façons prometteuses d'apporter la bonté Blazor dans les applications WPF. Explorons les possibilités.

WPF Is Fine

Tout d'abord, abordons la question évidente qui serait posée : est-ce que WPF est correct ? Mon avis : C'est plus que bien en fait. Bien qu'il existe d'autres piles de technologies de bureau Windows C#/XAML, comme UWP et WinUI, aucune n'a l'expérience et la maturité dont WPF peut se vanter. WPF offre aux développeurs .NET une expérience de développement fantastique avec une prise en charge IDE de premier ordre dans Visual Studio, des outils matures et un riche écosystème communautaire.

En ce qui concerne les environnements d'exécution, les applications WPF fonctionneront sans problème sur le framework .NET complet pour les années à venir. Si votre flux de travail d'entreprise comprend une solution WPF qui fait le travail correctement sans avoir besoin de mises à jour majeures, vous devriez être plus que satisfait d'exécuter WPF tel quel sur .NET Framework.

Si, toutefois, votre application WPF peut bénéficier d'une nouvelle utilisation de l'API Windows, de l'empaquetage du runtime .NET avec des composants d'application ou d'interface utilisateur brillants via XAML Islandsvous avez la possibilité de moderniser progressivement votre application WPF. Avec l'aide d'outils tels que .NET Upgrade Assistantles applications WPF peuvent s'exécuter sur .NET Core 3.0, .NET Core 3.1 LTS, .NET 5 et même être tournées vers l'avenir avec .NET 6. Ainsi, si besoin est, WPF peut s'exécuter sur les toutes dernières piles .NET et alimenter des solutions de bureau modernes. Encore une fois, WPF va bien.

WebView2 intégré à WPF

Faisons face à la réalité, les technologies Web sont cool et les développeurs .NET sont naturellement enthousiasmés par le présent/l'avenir de Blazor. Peut-être avez-vous bricolé Blazor ou avez-vous des membres de l'équipe travaillant sur un projet Blazor ? Pourriez-vous apporter des avantages Web dans WPF ? Regardons le fruit le plus bas : nous pourrions insérer du contenu Web dans une application WPF. Ce serait vrai non seulement pour les applications Blazor, mais pour tout contenu Web, comme les applications SPA écrites en Angular/React/Vue/others.

L'astuce est le composant WebView moderne, alias WebView2 sous Windows 10 WebView2 est piloté par le même moteur Chromium qui alimente le navigateur Microsoft Edge – il peut gérer le meilleur du Web moderne. Il est très facile d'ajouter un composant WebView2 dans une application WPF existante et de commencer à injecter du contenu Web. Les développeurs doivent avoir WebView2 installé sur la machine locale et importer le package NuGet Microsoft.Web.WebView2.

Avec le composant WebView2 en place, les développeurs peuvent ajouter l'espace de noms correspondant dans le MainWindow.xaml La page de démarrage WPF ou la vue dans laquelle ils souhaitent utiliser WebView 2. Ensuite, il ne reste plus qu'à intégrer le composant WebView2 dans un contrôle conteneur et à pointer la propriété Source à un URI hébergé, comme ceci :

Lancez l'application et le tour est joué – contenu Web dans une application WPF !

Injection le contenu Web d'une application WPF n'a pas besoin d'être à sens unique : l'application hôte et le contenu Web peuvent interagir . L'hôte WPF peut écouter les événements du cycle de vie déclenchés par WebView2 et injecter du code JavaScript dans les contrôles WebView2 au moment de l'exécution. On peut également permettre les communications entre l'hôte et le contenu Web par l'échange de messages basés sur des événements, offrant ainsi une richesse d'expériences. L'injection de contenu Web via l'hébergement WebView2 est peut-être le moyen le plus simple d'intégrer du contenu Blazor dans les applications WPF. Bien qu'il existe des limitations, cela fonctionne clairement.

WPF avec Blazor Hybrid

La fin de l'année dernière a vu l'avènement de quelque chose avec une tonne de potentiel—Blazor Mobile Bindings. Bien qu'expérimental, l'objectif était d'utiliser la syntaxe Razor et le modèle de composant Blazor pour créer des applications mobiles et de bureau natives/hybrides. Les développeurs ont pu restituer l'interface utilisateur de la plate-forme native via Xamarin.Forms avec des liaisons Blazor ou restituer des composants Web Blazor directement dans un WebView moderne, alias WebView2 sur Windows ou WKWebView sur MacOS.

Avec le modèle de projet BlazorHybrid, les développeurs obtiennent une solution unique pour une application qui s'exécute partout, l'application Windows étant une application WPF. La petite magie se produit grâce aux moteurs de rendu WPF pour Xamarin.Forms, qui savent comment rendre l'interface utilisateur WPF native.

 en utilisant Microsoft.MobileBlazorBindings.WebView.Windows ;
en utilisant le système ;
en utilisant Xamarin.Forms ;
en utilisant Xamarin.Forms.Platform.WPF ;

espace de noms BlazorChat.Windows
{
    classe publique MainWindow : FormsApplicationPage
    {
        [STAThread]
        public statique vide Main()
        {
        var app = new System.Windows.Application();
        app.Run(new MainWindow());
        }

        publique MainWindow()
        {
        Forms.Init();
        BlazorHybridWindows.Init();
        LoadApplication(nouvelle App());
        }
    }
}

Au-delà de l'amorçage de l'application, la syntaxe Razor peut être utilisée pour rendre l'interface utilisateur native pour WPF, et le contenu Blazor est le bienvenu injecté dans un composant WebView, comme ceci :

@inject CounterState CounterState




    
        
        
    

    
        
    




 @code
{
    remplacement protégé void OnInitialized()
    {
    CounterState.StateChanged += StateHasChanged;
    }

    vide public Dispose()
    {
    CounterState.StateChanged -= StateHasChanged;
    }
}

Le résultat final est une application WPF avec une interface utilisateur Web native et hybride, si vous le souhaitez. Il s'agit d'une application WPF native fonctionnant sous Windows et pouvant effectuer toutes les opérations d'API natives que les applications WPF apprécient généralement.

Il convient de mentionner cependant que l'avenir de l'intégration de Blazor à WPF via Xamarin.Forms Renderers peut être discutable. L'évolution de Xamarin.Forms est .NET MAUI s'exécutant sur .NET 6, prévue pour la version de novembre 2021. .NET MAUI promet une histoire multiplateforme stable pour atteindre iOS, Android, Windows et MacOS, à partir d'une seule base de code.

La pile technologique choisie pour que .NET MAUI atteigne le bureau Windows n'est cependant pas WPF, c'est WinUI 3. C'est très compréhensible, étant donné que WinUI 3 est la pile d'interface utilisateur de bout en bout la plus moderne et la plus fluide pour les applications Windows. L'astuce pour amener Blazor sur le bureau Windows est cependant la même: insérez un BlazorWebView dans l'arborescence visuelle qui restitue le meilleur composant WebView sur chaque plate-forme.

BlazorWebView dans WPF

Vous n'avez pas envie de réécrire une application à partir de zéro avec .NET MAUI ou de migrer vers WinUI 3 ? Ne vous inquiétez pas, votre application WPF existante a une longue durée de vie et vous permet de toute façon d'apporter la bonté Blazor. Tout ce que vous avez à faire est d'exécuter votre application WPF sur .NET 6 – l'assistant de mise à niveau .NET est prêt à vous aider.

Une fois sur .NET 6, vos applications WPF gagneront un nouveau contrôle magique – surprise, c'est le BlazorWebView. Le nouveau BlazorWebView pour WPF fonctionne exactement de la même manière que pour les applications .NET MAUI : il permet d'intégrer facilement du contenu Blazor dans les applications de bureau Windows.

La fonctionnalité Blazor peut en fait être intégrée directement dans votre projet d'application WPF, c'est-à-dire les pages Razor avec C#/HTML, CSS et, si nécessaire, JavaScript, le tout permettant une solution WPF de bureau. C'est un moyen intéressant de potentiellement moderniser vos applications WPF : conservez les investissements .NET et intégrez Blazor comme vous le souhaitez. Voyons comment cela fonctionne. Pour prouver le point, nous commençons avec une application vanille WPF s'exécutant sur .NET Framework, comme ceci :

Ensuite, nous faisons fonctionner l'assistant de mise à niveau .NET : installez l'outil CLI, naviguez dans le terminal jusqu'au répertoire du projet et lancez-vous. :

upgrade-assistant upgrade .BlazorWebViewOnWPF.csproj

L'outil de mise à niveau quasi magique vous indique toutes les étapes nécessaires pour migrer le framework d'exécution, puis effectue le travail. L'assistant de mise à niveau .NET peut être utilisé pour faire migrer l'application WPF de l'exécution sur .NET Framework à l'exécution sur .NET 5. Une fois cela fait, vous pouvez ouvrir le fichier .csproj pour voir les modifications .

La dernière étape consiste à forcer son exécution sur .NET 6 Preview, à condition que le runtime soit installé. Nous pouvons simplement modifier le TargetFramework. Nous devons également mettre à jour le projet SDK vers Microsoft.NET.Sdk.Razor et introduire une dépendance de package NuGet de Microsoft.AspNetCore.Components.WebView.Wpf. Voici à quoi devrait ressembler le fichier de projet mis à jour :

Ensuite, nous pouvons commencer à ajouter des objets Web à notre projet WPF . Un dossier wwwroot peut contenir nos vues HTML et tous les styles CSS nécessaires, comme ceci :

Voici le fichier barebones index.html :

Ensuite, aucune fonctionnalité Blazor n'est complète sans le composant classique Counter.razor – celui-ci pourrait résider dans le dossier racine :

@using Microsoft.AspNetCore.Components.Web
Compteur

Le nombre actuel est : @currentCount
Count

@code {
    int currentCount = 0;

    void IncrementCount()
    {
        CurrentCount++ ;
    }
}

Le fichier code-behind doit simplement initialiser le compteur. Cela aide WPF à trouver le composant :

using System;

espace de noms BlazorWebViewOnWPF
{
    classe partielle publique Counter { }
}

Ensuite, nous passons au fichier classique MainWindow.xaml pour définir l'arborescence visuelle XAML de notre première (et dans ce cas, uniquement) vue. Nous ajoutons un espace de noms pour importer la WebView et ajoutons le contrôle BlazorWebView à un parent de disposition de conteneur, comme une Grid :

Dans MainWindow.xaml.csle fournisseur de services doit être ajouté en tant que ressource statique afin que les composants Blazor puissent être amorcés :

à l'aide de Microsoft.Extensions.DependencyInjection ;
en utilisant le système ;
en utilisant System.Collections.Generic ;
en utilisant System.Linq;
en utilisant System.Text;
en utilisant System.Threading.Tasks ;
en utilisant System.Windows ;
en utilisant System.Windows.Controls ;
en utilisant System.Windows.Data ;
en utilisant System.Windows.Documents ;
en utilisant System.Windows.Input ;
en utilisant System.Windows.Media ;
en utilisant System.Windows.Media.Imaging ;
en utilisant System.Windows.Navigation ;
en utilisant System.Windows.Shapes ;

espace de noms BlazorWebViewOnWPF
{
    classe partielle publique MainWindow : Window
    {
        publique MainWindow()
        {
            var serviceCollection = new ServiceCollection();
            serviceCollection.AddBlazorWebView();
            Resources.Add("services", serviceCollection.BuildServiceProvider());

            InitializeComponent();
        }
    }
}

C'est tout. Tout est dit et fait, nous lançons l'application. Et tada—Composant Blazor injecté dans l'application WPF. Et toutes les fonctionnalités de Blazor sont intégrées dans le même projet et conçues comme une application de bureau.

Peut être. J'ai une interface utilisateur ?

Maintenant, parlons de l'éléphant dans la pièce, bien que partiellement. C'est formidable que Blazor soit désormais le bienvenu sur les ordinateurs de bureau, en particulier les applications WPF. Les développeurs peuvent mélanger/faire correspondre le code C#/XAML avec le code Web Blazor et moderniser les applications de bureau. Mais qu'en est-il des composants Blazor personnalisés, peuvent-ils venir? Les développeurs ne devraient pas réinventer la roue, et Telerik UI for Blazor aide vraiment avec les composants d'interface utilisateur Blazor polis, performants et complexes, prêts à l'emploi.

Ainsi, l'interface utilisateur Telerik pour les composants Blazor fonctionnerait-elle à l'intérieur. une application WPF ? Premiers jours. Tout ce que nous pouvons dire, c'est que les choses semblent très prometteuses. Restez à l'écoute.

Conclusion

On pourrait en dire beaucoup plus. Les développeurs peuvent se lancer dans des conversations animées. Nous pourrions parler des avantages/inconvénients de chaque approche. Nous pourrions disséquer le pourquoi et le comment.

Mais voici les faits : WPF est là pour rester et Blazor est cool. Et ils peuvent tous les deux coexister heureusement. Cela devrait être tout ce dont nous avons besoin pour nous enthousiasmer pour l'avenir.