C# - WPF 응용 프로그램에 Blazor App 통합
이에 대한 공식 문서가 있군요. ^^
Build a Windows Presentation Foundation (WPF) Blazor app
; https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/wpf
간단하니, 본 김에 실습마저 해봤습니다. 우선 .NET 8.0 WPF 프로젝트를 하나 생성하고, nuget으로부터 Microsoft.AspNetCore.Components.WebView.Wpf 구성 요소를 참조 추가합니다.
Install-Package Microsoft.AspNetCore.Components.WebView.Wpf
그다음, csproj에 Sdk 유형을 "Microsoft.NET.Sdk.Razor"로 지정합니다.
<Project Sdk="Microsoft.NET.Sdk.Razor">
<PropertyGroup>
<OutputType>WinExe</OutputType>
<TargetFramework>net8.0-windows</TargetFramework>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
<UseWPF>true</UseWPF>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components.WebView.Wpf" Version="8.0.14" />
</ItemGroup>
</Project>
이제 프로젝트의 루트에 _Imports.razor 파일을 생성해 다음의 내용을 추가합니다.
// _Imports.razor 파일
@using Microsoft.AspNetCore.Components.Web
그다음 역시 프로젝트의 루트에 "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" data-nosnippet>
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>
이어서 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;
}
부가적으로 bootstrap.min.css 파일도 1)
Bootstrap 웹 사이트를 통해, 2) 또는 "ASP.NET Core Web App (Razor Pages)" 프로젝트를 하나 생성해 거기 있는 파일을 /wwwroot/css 디렉터리에 복사합니다.
이제 우리가 일반적인 Blazor App에서 봐왔던 Counter 예제를 추가할 텐데요, 프로젝트 루트 디렉터리에 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++;
}
}
자, 이제 WPF 측에 Blazor를 호스팅하는 컨트롤을 추가하고,
<Window x:Class="WpfApp1.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:local="clr-namespace:WpfApp1"
xmlns:blazor="clr-namespace:Microsoft.AspNetCore.Components.WebView.Wpf;assembly=Microsoft.AspNetCore.Components.WebView.Wpf"
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>
마지막으로 MainWindow.xaml.cs의 소스코드에 Blazor 리소스를 찾을 수 있도록 ServiceCollection을 구성해 WPF Resources에 추가합니다.
using Microsoft.Extensions.DependencyInjection;
using System.Windows;
namespace WpfApp1;
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
var serviceCollection = new ServiceCollection();
serviceCollection.AddWpfBlazorWebView();
Resources.Add("services", serviceCollection.BuildServiceProvider());
}
}
끝입니다. 이제 F5 키를 눌러 실행하면 다음과 같이 WPF 안에서 호스팅 중인 Blazor App 화면을 볼 수 있습니다.
참고로,
문서에서는 RootNamespace를 설정하라고 하는데 위에서처럼 단순히 WPF 프로젝트로 실습하는 경우에는 그 과정이 필요 없습니다. 단지 관련해서
이슈가 하나 있긴 한데, 그건 "
Windows packaging project"와 엮어서 빌드할 때만 발생하는 문제로 보입니다.
[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]