NET6 Preview3의 Windows 어플리케이션에 Blazor를 포함하는 BlazorWebView를 시도해 보았습니다.

나는 이 보도의 내용을 영상으로 만들었다.

본문

🎉.NET6 프리뷰 3 나왔네요!🎉
https://devblogs.microsoft.com/dotnet/announcing-net-6-preview-3/
https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-6-preview-3/
ASP.NET Core updates의 블로그 글에서 다음과 같은 구절을 발견했다.
BlazorWebView controls for WPF & Windows Forms
그래서 해봤어요.
원래 공개하고 싶지 않아 프로젝트 이름은 Wpfapp1이지만 실제 실행되는 코드는 다음과 같다.
https://github.com/runceel/dotnet6_blazorwebview_wpf
실제 운행 후 아래와 같다.위쪽은 WPF 애플리케이션, 아래쪽은 Blazor로 제작된 화면이다.나는 계수기의 값이 WPF와 Blazor의 화면 사이에서 공유될 수 있는지 알고 싶다.

WPF 응용 프로그램이라면 프로젝트 파일의 Sdk 속성을 Microsoft.NET.Sdk.Razor로 변경하고 패키지를 추가하면 사용할 수 있습니다.다음은 index.> 및 razor 파일을 추가하여 개발할 수 있습니다.razor 파일에 대한 지식감은 아직 약하지만, 나는 이 방면이 천천히 개선될 것이라고 생각한다.
프로젝트 구조상 다음과 같은 분위기가 있다.xaml와razor 파일이 신선하게 동거하고 있습니다.

요점Microsoft.AspNetCore.Components.WebView.Wpf은 프로그램의 어느 곳에서 초기화한 후ServiceCollection 설정으로 Blazor측에서BlazorWebView 설정할 수 있다.(물론 WPF와 Blazor의 응용 프로그램은 같은 과정에서 실행되기 때문에 static 변수와 다른 방법을 통해 실례를 공유할 수 있지만 행동거지가 좋지 않을 수 있습니다.)
WPFServiceCollection에서도 등록된 파일을 사용해 블라조르 측과 같은 인스턴스를 취득하고 상태 등을 공유할 수 있다.
제작된 샘플 중 razor 파일에서 CounterState 클래스를 사용합니다.
Counter.razor

@implements IDisposable
@inject WpfApp1.CounterState CounterState

<h1>ここは Web !!</h1>

<p>The current count is: @CounterState.Value</p>
<button @onclick="IncrementCount">Count</button>

@code {
    protected override void OnInitialized()
    {
        this.CounterState.PropertyChanged += CounterStateChanged;
    }

    public void Dispose() 
    {
        this.CounterState.PropertyChanged -= CounterStateChanged;
    }

    private void CounterStateChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e) =>
        this.StateHasChanged();

    void IncrementCount()
    {
        CounterState.Increment();
    }
}

WPF 측도 ServiceCollection에 등록된 것ServiceCollection을 CounterState으로 설정해 사용하고 있다.
MainWindow.xaml.cs

using Microsoft.Extensions.DependencyInjection;
using System;
using System.Windows;

namespace WpfApp1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
            var provider = App.Current.Resources["services"] as IServiceProvider;
            this.DataContext = provider.GetRequiredService<CounterState>();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            ((CounterState)this.DataContext).Increment();
        }
    }
}

DataContext의 초기화는 ServiceCollection류App의 활동에서 진행되었고 로그인Startup을 통해 전체 응용 프로그램에서 공유되었다.
App.xaml.cs

private void Application_Startup(object sender, StartupEventArgs e)
{
    var serviceCollection = new ServiceCollection();
    serviceCollection.AddBlazorWebView();
    serviceCollection.AddSingleton<CounterState>(); // このインスタンスを Blazor と WPF で共有している
    Resources.Add("services", serviceCollection.BuildServiceProvider());
}

Blazor의 세계Resources에 납품할 BlazorWebView 속성 설정이 납품되어 있습니다.
MainWindow.xaml

<blazor:BlazorWebView
    Grid.Row="1"
    HostPage="wwwroot/index.html"
    Services="{StaticResource services}">
    <blazor:BlazorWebView.RootComponents>
        <blazor:RootComponent ComponentType="{x:Type local:Counter}" Selector="#app" />
    </blazor:BlazorWebView.RootComponents>
</blazor:BlazorWebView>

총결산

어쨌든 시도해 본 느낌인데 블라우스를 상당히 가볍게 사용해서 화면 WPF(과, 이번에는 안 해봤지만 WinForms)를 삽입할 수 있다.
웹학과에 관한 기술은 분명히 간단히 할 수 있었는데...이런 표현 방식도 이걸 쓰면 잘 이뤄질 수 있는 경우도 있다고 생각해요.
그리고 "XAML? 그렇구나, 몰랐어."이런 느낌을 가진 웹학과에서 온 사람에게는 이미 전면적으로 개발Services된 것도 괜찮다.그 점을 감안하여 자유롭게 발휘할 수 있다는 것은 정말 대단하다.
.NET6 상당히 많이 봐서 좋네요!