WPF 로 개발하기 시작할 때 Xaml 구문을 처음 접하고 학습한 기억이 있습니다.
물론 그 이전에는 Winform 으로 대부분 작성했었습니다.
그래서 WPF 가 출시된 이후 이미 구현된 소스코드를 재사용하기 위해
서로 서로 조합해서 사용하는 것도 가능했습니다.
그리고 WPF 를 Browser 에서 지원하기 위해 Silverlight 도 존재했었습니다.
Silverlight 의 경우 WPF 와 마찬가지로 Xaml 로 작성하지만 일부 기능만 지원했습니다.
그래도 WPF 로 작성된 코드를 대부분 재사용해서 Browser 에서 구동할 수 있었습니다.
이후에는 Xamarin 도 Xaml 구문으로 작성하고, 지금의 MAUI 도 Xaml 을 사용합니다.
물론, 동일한 Xaml 이라도 문법적인 차이는 존재합니다.

저의 경우 Xarmarin 관련 프로젝트 이후 Blazor 를 처음 사용하게 되었습니다.
개인 프로젝트로 브라우저를 지원하는 서비스를 만들어서 스마트폰과 PC 환경을 모두 커버하기 위함이었습니다.
이때도 WPF 를 처음 접했을 때와 마찬가지로 Razor 구문에 대한 학습이 필요했고, 어느 정도 익숙해지고 있습니다.
MAUI 까지도 사용해서 개발해 봤지만, 개인적으로 Blazor 로 만든 결과물이 마음에 든다고 생각합니다.

그런데 우연히 Xaml 구문(정확히는 OpenSilver)으로 Razor 페이지에서 작성이 가능한 패키지를 발견했습니다.

XAML for Blazor 소개

공식 소개 페이지 : Introducing XAML for Blazor (xaml-for-blazor.com)

Userware 라는 회사를 설립해서 2014년도 부터 CSHTML5 로 진행되던 프로젝트를 OpenSilver 로 명칭을 변경하였고,
이 OpenSilver 를 기반으로 한 제품 중에 XAML for Blazor 라는 이름으로 Nuget Package 형태로 만들어서 배포하고 있습니다.
간단하게 얘기하면 Razor 페이지에서 Silverlight | Microsoft Learn 에서 지원하는 Object 를 직접 가져다가 사용이 가능합니다.

제한 사항

2024-02-02 현재 시점을 기준으로 제한 사항이 존재합니다.

Blazor WebAssembly 만 지원합니다. Blazor Server 의 경우 차후 Roadmap 에 포함된 상태입니다.
.net7 이상
Visual Studio 2022
Windows 만 가능
연간 $200K 이하인 경우에만 상업적으로 이용이 가능하다고 합니다.

필수 요소(Nuget)

다음과 같이 Nuget 에서 XamlForBlazor 를 찾아서 프로젝트에 추가해서 사용하면 됩니다.

편의 요소(Visual Studio 확장)

Visual Studio 에서 xaml 파일과 xaml.cs 파일을 추가하거나 기존에 작성된 코드를 가져와서 사용해도 됩니다.
이 경우 약간의 불편함이 발생하는데 해당 파일을 솔루션 탐색기에서 선택해서 xaml 과 xaml.cs 파일을 각각 빌드 작업 및 사용자 지정 도구를 수정해 줘야 합니다.

이런 번거로운 과정을 해소하기 위해 별도 확장을 사용합니다.
Visual Studio 확장 관리 메뉴에서 XAML for Blazor 를 검색해서 설치합니다.

해당 확장이 설치되고 나면 프로젝트에 새 항목을 추가할 때 다음과 같이 추가된 Template 을 사용해서 좀 더 편리하게 작성이 가능합니다.

샘플 프로젝트 – Github

Blazor WebAssembly 만 지원하기 때문에 Blazor WebAssembly 프로젝트로 생성하였습니다.
다음 Github 에 올려둔 소스를 다운로드 하시면 됩니다.

https://github.com/kkomzi7179/XamlForBlazorSample
0 forks.
0 stars.
0 open issues.

Recent commits:

Update README.md, GitHub
– add xaml for blazor sample, Jaeyong Park
초기 커밋., Jaeyong Park
.gitattributes, .gitignore 및 README.md을(를) 추가합니다., Jaeyong Park

License 활성화

내려받은 소스를 실행해 보시면 다음과 같이 등록 과정이 진행됩니다.
I am an individual or hobbyist 버튼을 클릭합니다.

Claim Free license 버튼을 클릭합니다.

Microsoft 계정으로 로그인 합니다.

로그인이 정상적으로 진행이 되면 다음과 같이 Personal edition 으로 활성화 되었다는 메세지 팝업을 확인 하실 수 있습니다.
이후에는 등록하는 과정은 나타나지 않습니다.

예제 설명

Weather 페이지

기본 샘플에서 하단에 DataGrid 가 추가된 것을 확인할 수 있습니다.

XamlForBlazor.XamlElement 태그를 추가해서 Type 을 지정하고 ItemsSource 를 할당한 형태입니다.
Razor 페이지에 DataGrid 를 직접 추가해서 사용하는 예제입니다.

@page "/weather"
@inject HttpClient Http

<PageTitle>Weather</PageTitle>

<h1>Weather</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
    
    <XamlForBlazor.XamlElement Type="@typeof(System.Windows.Controls.DataGrid)"
                               ItemsSource="@forecasts"
                               IsReadOnly="True" />
}

XamlUserControl 페이지

XamlUserControl 메뉴를 클릭해서 해당 페이지로 이동을 하면 Load 버튼만 보여지며, Load 버튼을 클릭하면 하단에 DataGrid 가 표시됩니다.

Type 에 미리 생성한 UserControl(XamlForBlazorUserControl)을 지정한 형태입니다.
이와 같이 UserControl 로 구현한 객체도 사용이 가능합니다.

@page "/XamlUserControl"

<PageTitle>XamlUserControl</PageTitle>

<h1>XamlForBlazorUserControl Sample</h1>

<XamlForBlazor.XamlElement Type="@typeof(XamlForBlazorUserControl)" />