Microsoft MVP성태의 닷넷 이야기
닷넷: 2234. C# - WPF 응용 프로그램에 Blazor App 통합 [링크 복사], [링크+제목 복사],
조회: 5841
글쓴 사람
정성태 (techsharer at outlook.com)
홈페이지
첨부 파일

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 화면을 볼 수 있습니다.

wpf_blazor_1.png




참고로, 문서에서는 RootNamespace를 설정하라고 하는데 위에서처럼 단순히 WPF 프로젝트로 실습하는 경우에는 그 과정이 필요 없습니다. 단지 관련해서 이슈가 하나 있긴 한데, 그건 "Windows packaging project"와 엮어서 빌드할 때만 발생하는 문제로 보입니다.





[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]







[최초 등록일: ]
[최종 수정일: 4/2/2024]

Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
by SeongTae Jeong, mailto:techsharer at outlook.com

비밀번호

댓글 작성자
 




1  2  3  4  5  6  7  8  [9]  10  11  12  13  14  15  ...
NoWriterDateCnt.TitleFile(s)
13637정성태6/6/20244789Phone: 20. C# MAUI - 유튜브 동영상을 MediaElement로 재생하는 방법
13636정성태5/30/20244858닷넷: 2264. C# - 형식 인자로 인터페이스를 갖는 제네릭 타입으로의 형변환파일 다운로드1
13635정성태5/29/20245347Phone: 19. C# MAUI - 안드로이드 "Share" 대상으로 등록하는 방법
13634정성태5/24/20244997Phone: 18. C# MAUI - 안드로이드 플랫폼에서의 Activity 제어 [1]
13633정성태5/22/20244956스크립트: 64. 파이썬 - ASGI를 만족하는 최소한의 구현 코드
13632정성태5/20/20245075Phone: 17. C# MAUI - Android 내에 Web 서비스 호스팅
13631정성태5/19/20245057Phone: 16. C# MAUI - /Download 등의 공용 디렉터리에 접근하는 방법 [1]
13630정성태5/19/20245469닷넷: 2263. C# - Thread가 Task보다 더 빠르다는 어떤 예제(?)
13629정성태5/18/20245295개발 환경 구성: 710. Android - adb.exe를 이용한 파일 전송
13628정성태5/17/20244957개발 환경 구성: 709. Windows - WHPX(Windows Hypervisor Platform)를 이용한 Android Emulator 가속
13627정성태5/17/20245000오류 유형: 904. 파이썬 - UnicodeEncodeError: 'ascii' codec can't encode character '...' in position ...: ordinal not in range(128)
13626정성태5/15/20245094Phone: 15. C# MAUI - MediaElement Source 경로 지정 방법파일 다운로드1
13625정성태5/14/20245256닷넷: 2262. C# - Exception Filter 조건(when)을 갖는 catch 절의 IL 구조
13624정성태5/12/20245236Phone: 14. C# - MAUI에서 MediaElement 사용파일 다운로드1
13623정성태5/11/20245115닷넷: 2261. C# - 구글 OAuth의 JWT (JSON Web Tokens) 해석파일 다운로드1
13622정성태5/10/20245337닷넷: 2260. C# - Google 로그인 연동 (ASP.NET 예제)파일 다운로드1
13621정성태5/10/20244977오류 유형: 903. IISExpress - Failed to register URL "..." for site "..." application "/". Error description: Cannot create a file when that file already exists. (0x800700b7)
13620정성태5/9/20244992VS.NET IDE: 190. Visual Studio가 node.exe를 경유해 Edge.exe를 띄우는 경우
13619정성태5/7/20245129닷넷: 2259. C# - decimal 저장소의 비트 구조파일 다운로드1
13618정성태5/6/20245259닷넷: 2258. C# - double (배정도 실수) 저장소의 비트 구조파일 다운로드1
13617정성태5/5/20245318닷넷: 2257. C# - float (단정도 실수) 저장소의 비트 구조파일 다운로드1
13616정성태5/3/20245367닷넷: 2256. ASP.NET Core 웹 사이트의 HTTP/HTTPS + Dual mode Socket (IPv4/IPv6) 지원 방법파일 다운로드1
13615정성태5/3/20245402닷넷: 2255. C# 배열을 Numpy ndarray 배열과 상호 변환
13614정성태5/2/20245343닷넷: 2254. C# - COM 인터페이스의 상속 시 중복으로 메서드를 선언
13613정성태5/1/20245855닷넷: 2253. C# - Video Capture 장치(Camera) 열거 및 지원 포맷 조회파일 다운로드1
13612정성태4/30/20245508오류 유형: 902. Visual Studio - error MSB3021: Unable to copy file
1  2  3  4  5  6  7  8  [9]  10  11  12  13  14  15  ...