성태의 닷넷 이야기
홈 주인
모아 놓은 자료
프로그래밍
질문/답변
사용자 관리
사용자
메뉴
아티클
외부 아티클
유용한 코드
온라인 기능
MathJax 입력기
최근 덧글
[정성태] Roll A Lisp In C - Reading ; https...
[정성태] Java - How to use the Foreign Funct...
[정성태] 제가 큰 실수를 했군요. ^^; Delegate를 통한 Bein...
[정성태] Working with Rust Libraries from C#...
[정성태] Detecting blocking calls using asyn...
[정성태] 아쉽게도, 커뮤니티는 아니고 개인 블로그입니다. ^^
[정성태] 질문이 잘 이해가 안 됩니다. 우선, 해당 소스코드에서 ILis...
[양승조
] var대신 dinamic으로 선언해서 해결은 했습니다. 맞는 해...
[양승조
] 또 막혔습니다. ㅠㅠ var list = props[i].Ge...
[양승조
] 아. 감사합니다. 어제는 안됐던것 같은데....정신을 차려야겠네...
글쓰기
제목
이름
암호
전자우편
HTML
홈페이지
유형
제니퍼 .NET
닷넷
COM 개체 관련
스크립트
VC++
VS.NET IDE
Windows
Team Foundation Server
디버깅 기술
오류 유형
개발 환경 구성
웹
기타
Linux
Java
DDK
Math
Phone
Graphics
사물인터넷
부모글 보이기/감추기
내용
<div style='display: inline'> <h1 style='font-family: Malgun Gothic, Consolas; font-size: 20pt; color: #006699; text-align: center; font-weight: bold'>C# - WPF 응용 프로그램에 Blazor App 통합</h1> <p> 이에 대한 공식 문서가 있군요. ^^<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > Build a Windows Presentation Foundation (WPF) Blazor app ; <a target='tab' href='https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/wpf'>https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/wpf</a> </pre> <br /> 간단하니, 본 김에 실습마저 해봤습니다. 우선 .NET 8.0 WPF 프로젝트를 하나 생성하고, nuget으로부터 Microsoft.AspNetCore.Components.WebView.Wpf 구성 요소를 참조 추가합니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > Install-Package Microsoft.AspNetCore.Components.WebView.Wpf </pre> <br /> 그다음, csproj에 Sdk 유형을 "Microsoft.NET.Sdk.Razor"로 지정합니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > <Project Sdk="<span style='color: blue; font-weight: bold'>Microsoft.NET.Sdk.Razor</span>"> <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> </pre> <br /> 이제 프로젝트의 루트에 _Imports.razor 파일을 생성해 다음의 내용을 추가합니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > // _Imports.razor 파일 @using Microsoft.AspNetCore.Components.Web </pre> <br /> 그다음 역시 프로젝트의 루트에 "wwwroot" 디렉터리를 추가하고 그 하위에 index.html을 만들어 대략 다음과 같은 내용을 채워줍니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > <!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> </pre> <br /> 이어서 wwwroot 하위에 css 디렉터리를 만들고 app.css 파일을 추가해 다음의 내용을 채웁니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > 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; } </pre> <br /> 부가적으로 bootstrap.min.css 파일도 1) <a target='tab' href='https://getbootstrap.com/'>Bootstrap</a> 웹 사이트를 통해, 2) 또는 "ASP.NET Core Web App (Razor Pages)" 프로젝트를 하나 생성해 거기 있는 파일을 /wwwroot/css 디렉터리에 복사합니다.<br /> <br /> 이제 우리가 일반적인 Blazor App에서 봐왔던 Counter 예제를 추가할 텐데요, 프로젝트 루트 디렉터리에 Counter.razor 파일을 생성하고 아래의 내용을 채웁니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > <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++; } } </pre> <br /> <hr style='width: 50%' /><br /> <br /> 자, 이제 WPF 측에 Blazor를 호스팅하는 컨트롤을 추가하고,<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > <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" <span style='color: blue; font-weight: bold'>xmlns:blazor="clr-namespace:Microsoft.AspNetCore.Components.WebView.Wpf;assembly=Microsoft.AspNetCore.Components.WebView.Wpf"</span> mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"> <Grid> <span style='color: blue; font-weight: bold'><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></span> </Grid> </Window> </pre> <br /> 마지막으로 MainWindow.xaml.cs의 소스코드에 Blazor 리소스를 찾을 수 있도록 ServiceCollection을 구성해 WPF Resources에 추가합니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > <span style='color: blue; font-weight: bold'>using Microsoft.Extensions.DependencyInjection;</span> using System.Windows; namespace WpfApp1; public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); <span style='color: blue; font-weight: bold'>var serviceCollection = new ServiceCollection(); serviceCollection.AddWpfBlazorWebView(); Resources.Add("services", serviceCollection.BuildServiceProvider());</span> } } </pre> <br /> 끝입니다. 이제 F5 키를 눌러 실행하면 다음과 같이 WPF 안에서 호스팅 중인 Blazor App 화면을 볼 수 있습니다.<br /> <br /> <img onclick='toggle_img(this)' class='imgView' alt='wpf_blazor_1.png' src='/SysWebRes/bbs/wpf_blazor_1.png' /><br /> <br /> <hr style='width: 50%' /><br /> <br /> 참고로, <a target='tab' href='https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/wpf'>문서</a>에서는 RootNamespace를 설정하라고 하는데 위에서처럼 단순히 WPF 프로젝트로 실습하는 경우에는 그 과정이 필요 없습니다. 단지 관련해서 <a target='tab' href='https://github.com/dotnet/maui/issues/5861'>이슈</a>가 하나 있긴 한데, 그건 "<a target='tab' href='https://www.sysnet.pe.kr/2/0/12587'>Windows packaging project</a>"와 엮어서 빌드할 때만 발생하는 문제로 보입니다.<br /> </p><br /> <br /> <br /><hr /><span style='color: Maroon'>[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]</span> </div>
첨부파일
스팸 방지용 인증 번호
2139
(왼쪽의 숫자를 입력해야 합니다.)