Générez une application Blazor Windows Presentation Foundation (WPF)

  • Article

Remarque

Ceci n’est pas la dernière version de cet article. Pour la version actuelle, consultez la version .NET 8 de cet article.

Ce tutoriel vous montre comment générer et exécuter une application WPF Blazor. Vous allez apprendre à effectuer les actions suivantes :

  • Créer un projet Blazor d’application WPF
  • Ajouter un Razor composant au projet
  • Exécutez l’application sur Windows

Prérequis

Charge de travail Visual Studio

Si la charge de travail Développement de bureau .NET Desktop n’est pas installée, utilisez le programme d’installation de Visual Studio pour installer la charge de travail. Pour plus d’informations, consultez Modifier les charges de travail, composants et modules linguistiques de Visual Studio.

Visual Studio installer workload selection.

Créer un projet Blazor WPF

Lancez Visual Studio. Dans la fenêtre Démarrer, sélectionnez Créer un nouveau projet :

Create a new solution in Visual Studio.

Dans la boîte de dialogue Créer un projet, filtrez la liste déroulante Type de projet sur Bureau. Sélectionnez le modèle de projet C# pour l’application WPF, puis sélectionnez le bouton Suivant :

Create a new project in Visual Studio.

Dans la boîte de dialogue Configurer votre nouveau projet :

  • Définissez le Nom du projet sur WpfBlazor.
  • Choisissez un emplacement approprié pour le projet.
  • Cliquez sur le bouton Suivant.

Configure the project.

Dans la boîte de dialogue Informations supplémentaires, sélectionnez la version du framework avec la liste déroulante Framework. Sélectionnez le bouton Créer :

The Additional Information dialog for the WPF project.

Utilisez le Gestionnaire de package NuGet pour installer le package NuGet Microsoft.AspNetCore.Components.WebView.Wpf :

Use Nuget Package Manager in Visual Studio to install the Microsoft.AspNetCore.Components.WebView.Wpf NuGet package.

Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le nom du projet, WpfBlazor, puis sélectionnez Modifier le fichier projet pour ouvrir le fichier projet (WpfBlazor.csproj).

En haut du fichier projet, remplacez le SDK par Microsoft.NET.Sdk.Razor :

<Project Sdk="Microsoft.NET.Sdk.Razor">

Dans le <PropertyGroup> existant du fichier projet, ajoutez le balisage suivant pour définir l’espace de noms racine de l’application, qui est WpfBlazor dans ce tutoriel :

<RootNamespace>WpfBlazor</RootNamespace>

Remarque

Les instructions précédentes sur la définition de l’espace de noms racine du projet constituent une solution de contournement temporaire. Pour plus d’informations, consultez [Blazor][Wpf] Problème lié à l’espace de noms racine (dotnet/maui #5861).

Enregistrez les modifications apportées au fichier projet (WpfBlazor.csproj).

Ajoutez un fichier _Imports.razor à la racine du projet avec une directive @using pour Microsoft.AspNetCore.Components.Web.

_Imports.razor:

@using Microsoft.AspNetCore.Components.Web

Enregistrez le fichier _Imports.razor.

Ajoutez un dossier wwwroot au projet.

Ajoutez un fichier index.html au dossier wwwroot avec le balisage suivant.

wwwroot/index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WpfBlazor</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="WpfBlazor.styles.css" rel="stylesheet" />
</head>

<body>
    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webview.js"></script>
</body>

</html>

Dans le dossier wwwroot, créez un dossier css.

Ajoutez une feuille de style app.css au dossier wwwroot/css avec le contenu suivant.

wwwroot/css/app.css:

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

Ajoutez le composant Counter suivant à la racine du projet, qui est le composant Counter par défaut trouvé dans les modèles de projet Blazor.

Counter.razor:

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Enregistrez le composant Counter (Counter.razor).

Si le concepteur MainWindow n’est pas ouvert, ouvrez-le en double-cliquant sur le fichier MainWindow.xaml dans l’Explorateur de solutions. Dans le concepteur MainWindow, remplacez le code XAML par ce qui suit :

<Window x:Class="WpfBlazor.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:blazor="clr-namespace:Microsoft.AspNetCore.Components.WebView.Wpf;assembly=Microsoft.AspNetCore.Components.WebView.Wpf"
        xmlns:local="clr-namespace:WpfBlazor"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <blazor:BlazorWebView HostPage="wwwroot\index.html" Services="{DynamicResource services}">
            <blazor:BlazorWebView.RootComponents>
                <blazor:RootComponent Selector="#app" ComponentType="{x:Type local:Counter}" />
            </blazor:BlazorWebView.RootComponents>
        </blazor:BlazorWebView>
    </Grid>
</Window>

Dans l’Explorateur de solutions, cliquez avec le bouton droit sur MainWindow.xaml et sélectionnez Voir le code :

View MainWindow code.

Ajoutez l’espace de noms Microsoft.Extensions.DependencyInjection en haut du fichier MainWindow.xaml.cs :

using Microsoft.Extensions.DependencyInjection;

À l’intérieur du constructeur MainWindow, après l’appel de méthode InitializeComponent, ajoutez le code suivant :

var serviceCollection = new ServiceCollection();
serviceCollection.AddWpfBlazorWebView();
Resources.Add("services", serviceCollection.BuildServiceProvider());

Remarque

La méthode InitializeComponent est générée par un générateur source au moment de la génération de l’application et ajoutée à l’objet de compilation pour la classe appelante.

Le code C# final et complet de MainWindow.xaml.cs avec un espace de noms inclus dans l'étendue de fichier et sans commentaires :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using Microsoft.Extensions.DependencyInjection;

namespace WpfBlazor;

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        var serviceCollection = new ServiceCollection();
        serviceCollection.AddWpfBlazorWebView();
        Resources.Add("services", serviceCollection.BuildServiceProvider());
    }
}

Exécuter l’application

Sélectionnez le bouton Démarrer dans la barre d’outils de Visual Studio :

Start button of the Visual Studio toolbar.

L’application s’exécutant sur Windows :

The app running on Windows.

Étapes suivantes

Dans ce didacticiel, vous avez appris à :

  • Créer un projet Blazor d’application WPF
  • Ajouter un Razor composant au projet
  • Exécutez l’application sur Windows

En savoir plus sur les applications Blazor Hybrid :

ASP.NET Core Blazor Hybrid