Blazor w WPF: Integracja komponentów Blazor z aplikacjami desktopowymi w .NET 9

Integracja komponentu Blazor z aplikacją WPF w .NET 9 stała się łatwiejsza niż kiedykolwiek wcześniej dzięki wbudowanemu mechanizmowi BlazorWebView. W tym krótkim poradniku pokażemy, jak w prosty sposób umieścić komponent Blazor wewnątrz klasycznej aplikacji desktopowej stworzonej z wykorzystaniem WPF.

Czego potrzebujesz?

Visual Studio 2024 z zainstalowanym SDK .NET 9
Aplikacja WPF
Komponenty Razor

Kroki do integracji Blazor z WPF:

1. Tworzenie aplikacji WPF z BlazorWebView

Utwórz nowy projekt WPF w Visual Studio:

Otwórz Visual Studio, kliknij „Utwórz nowy projekt”, wybierz „WPF Application” dla .NET 9 i nazwij swój projekt.

2. Dodanie pakietu dla Blazor Desktop

W Solution Explorer kliknij prawym przyciskiem na projekt WPF i wybierz opcję „Manage NuGet Packages”.
Znajdź i zainstaluj pakiet Microsoft.AspNetCore.Components.WebView.Wpf.

3. Konfiguracja BlazorWebView w aplikacji WPF

W oknie XAML twojej aplikacji WPF dodaj kontrolkę BlazorWebView:

<Window x:Class="BlazorWpf.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:bwv="clr-namespace:Microsoft.AspNetCore.Components.WebView.Wpf;assembly=Microsoft.AspNetCore.Components.WebView.Wpf"
        Title="Blazor in WPF" Height="450" Width="800">
    <Grid>
        <bwv:BlazorWebView HostPage="wwwroot/index.html">
            <bwv:BlazorWebView.RootComponents>
                <bwv:RootComponent Selector="#app" ComponentType="typeof(App)" />
            </bwv:BlazorWebView.RootComponents>
        </bwv:BlazorWebView>
    </Grid>
</Window>

4. Przygotowanie komponentów Blazor

W projekcie WPF utwórz folder „wwwroot”, a w nim plik „index.html” z podstawowym kodem HTML dla Blazora:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Blazor in WPF</title>
    <base href="/" />
</head>
<body>
    <div id="app">Ładowanie...</div>
    <script src="_framework/blazor.webview.js"></script>
</body>
</html>

Utwórz komponent Razor np. App.razor:

<h3>Witaj z Blazor w WPF!</h3>

5. Uruchomienie aplikacji

Teraz uruchom aplikację WPF. Komponent Blazor pojawi się bezpośrednio wewnątrz aplikacji desktopowej.

Zalety tego rozwiązania:

Możliwość wykorzystania komponentów Blazor bezpośrednio w aplikacjach desktopowych.
Wbudowany mechanizm upraszcza integrację i redukuje liczbę zewnętrznych zależności.
Wsparcie Microsoft gwarantujące stabilność i rozwój rozwiązania.

Integracja Blazor i WPF w .NET 9 to nowoczesne podejście do budowy aplikacji, które efektywnie łączą technologie webowe i desktopowe.