Windows Forms Blazor 앱 빌드
이 자습서에서는 Windows Forms Blazor 앱을 빌드 및 실행하는 방법을 보여줍니다. 다음 방법을 알아봅니다.
- Windows Forms Blazor 앱 프로젝트 만들기
- Windows에서 앱 실행
필수 구성 요소
- 지원 플랫폼(Windows Forms 문서)
- .NET 데스크톱 개발 워크로드가 있는 Visual Studio 2022
Visual Studio 워크로드
.NET 데스크톱 개발 워크로드가 설치되지 않은 경우 Visual Studio 설치 관리자를 사용하여 워크로드를 설치합니다. 자세한 내용은 Visual Studio 워크로드, 구성 요소 및 언어 팩 수정을 참조하세요.
Windows Forms Blazor 프로젝트를 만듭니다.
Visual Studio를 실행합니다. 시작 창에서 새 프로젝트 만들기를 선택합니다.
새 프로젝트 만들기 대화 상자에서 프로젝트 유형 드롭다운을 데스크톱으로 필터링합니다. Windows Forms 앱에 대한 C# 프로젝트 템플릿을 선택하고 다음 단추를 선택합니다.
새 프로젝트 구성 대화 상자에서 다음을 수행합니다.
- 프로젝트 이름을 로 WinFormsBlazor설정합니다.
- 프로젝트에 적합한 위치를 선택합니다.
- 다음 단추를 선택합니다.
추가 정보 대화 상자에서 프레임워크 드롭다운 목록이 있는 프레임워크 버전을 선택합니다. 만들기 단추를 선택합니다.
NuGet 패키지 관리자를 사용하여 Microsoft.AspNetCore.Components.WebView.WindowsForms NuGet 패키지를 설치합니다.
솔루션 탐색기 프로젝트의 이름 를 WinFormsBlazor마우스 오른쪽 단추로 클릭하고 프로젝트 파일 편집을 선택하여 프로젝트 파일(WinFormsBlazor.csproj)을 엽니다.
프로젝트 파일의 맨 위에서 SDK를 Microsoft.NET.Sdk.Razor로 변경합니다.
<Project Sdk="Microsoft.NET.Sdk.Razor">
변경 내용을 프로젝트 파일(WinFormsBlazor.csproj)에 저장합니다.
Microsoft.AspNetCore.Components.Web에 대한 @using 지시문을 사용하여 _Imports.razor 파일을 프로젝트의 루트에 추가합니다.
_Imports.razor:
@using Microsoft.AspNetCore.Components.Web
_Imports.razor 파일을 저장합니다.
프로젝트에 wwwroot 폴더를 추가합니다.
다음 표시가 있는 wwwroot 폴더에 index.html 파일을 추가합니다.
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>WinFormsBlazor</title>
<base href="/" />
<link href="css/app.css" rel="stylesheet" />
<link href="WinFormsBlazor.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>
wwwroot 폴더 내에서 스타일시트를 저장할 css 폴더를 만듭니다.
app.css 스타일시트를 다음 콘텐츠가 있는 wwwroot/css 폴더에 추가합니다.
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;
}
Blazor 프로젝트 템플릿에 있는 기본 Counter 구성 요소인 프로젝트의 루트에 다음 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++;
}
}
구성 요소(Counter.razor)를 Counter 저장합니다.
솔루션 탐색기에서 Form1.cs 파일을 두 번 클릭하여 디자이너를 엽니다.
Visual Studio 창의 왼쪽 끝에 있는 도구 상자 단추를 선택하거나 보기>도구 상자 메뉴 명령을 선택하여 도구 상자를 엽니다.
Microsoft.AspNetCore.Components.WebView.WindowsForms에서 BlazorWebView 컨트롤을 찾습니다. 도구 상자에서 Form1 디자이너로 BlazorWebView를 끌어다 놓습니다. 실수로 WebView2 컨트롤을 양식으로 끌어다 놓지 않도록 주의하세요.
Visual Studio에서는 BlazorWebView 컨트롤을 WebView2로서 양식 디자이너에 표시하고 컨트롤의 이름을 blazorWebView1으로 자동 지정합니다.
Form1에서 한 번의 클릭으로 BlazorWebView(WebView2)를 선택합니다.
BlazorWebView의 속성에서 컨트롤의 이름이 blazorWebView1인지 확인합니다. 이름이 blazorWebView1이 아닌 경우 도구 상자에서 잘못된 컨트롤을 끌어다 놓은 것입니다. Form1에서 WebView2 컨트롤을 삭제하고 BlazorWebView 컨트롤을 양식에 끌어다 놓습니다.
컨트롤의 속성에서 BlazorWebView의 고정 값을 채우기로 변경합니다.
Form1 디자이너에서 Form1을 마우스 오른쪽 단추로 클릭하고 코드 보기를 선택합니다.
Microsoft.AspNetCore.Components.WebView.WindowsForms 및 Microsoft.Extensions.DependencyInjection의 네임스페이스를 Form1.cs 파일의 맨 위에 추가합니다.
using Microsoft.AspNetCore.Components.WebView.WindowsForms;
using Microsoft.Extensions.DependencyInjection;
Form1 생성자 내에 있는 InitializeComponent 메서드 호출 뒤에 다음 코드를 추가합니다.
var services = new ServiceCollection();
services.AddWindowsFormsBlazorWebView();
blazorWebView1.HostPage = "wwwroot\\index.html";
blazorWebView1.Services = services.BuildServiceProvider();
blazorWebView1.RootComponents.Add<Counter>("#app");
참고
메서드는 InitializeComponent 앱 빌드 시 원본 생성기에 의해 생성되고 호출 클래스에 대한 컴파일 개체에 추가됩니다.
Form1.cs의 최종, 전체 C# 코드:
using Microsoft.AspNetCore.Components.WebView.WindowsForms;
using Microsoft.Extensions.DependencyInjection;
namespace WinFormsBlazor
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
var services = new ServiceCollection();
services.AddWindowsFormsBlazorWebView();
blazorWebView1.HostPage = "wwwroot\\index.html";
blazorWebView1.Services = services.BuildServiceProvider();
blazorWebView1.RootComponents.Add<Counter>("#app");
}
}
}
앱 실행
Visual Studio 도구 모음에서 시작 단추를 선택합니다.
Windows에서 실행 중인 앱:
다음 단계
이 자습서에서는 다음 작업 방법을 알아보았습니다.
- Windows Forms Blazor 앱 프로젝트 만들기
- Windows에서 앱 실행
Blazor Hybrid 앱에 대한 자세한 정보: