Avalonia를 WSL에서 실행

Avalonia는 크로스플랫폼 UI 프레임워크입니다. 기본적으로 윈도우, 맥OS 및 리눅스를 지원하며 라즈베리파이에도 동작하는 앱도 만들 수 있습니다. 웹어셈블리로도 배포할 수 있으며 아직은 미리보기 단계이지만 iOS 및 안드로이드에서 실행되는 앱도 개발할 수 있습니다.

환경구성

  • Windows 11 (OS 빌드번호 22000 이상)
  • Visual Studio 2022 (Preview)
  • 확장/확장 관리 → Avalonia for Visual Studio 2022 설치
  • Ubuntu WSL2 설치

프로젝트 시작

새 프로젝트 만들기에서 Avalonia MVVM Application을 선택합니다. 프로젝트가 생성되면 실행 창에 Welcome to Avalonia!를 출력하는 간단한 프로젝트가 생성되지만 기본적으로 MVVM 구조로 생성됩니다.

image

MVVM의 요소를 좀 더 확인하기 위해 다음처럼 소스코드를 확장 합니다.

버튼 클릭시 숫자 증가

메인 윈도우는 Views/MainWindow.axaml 입니다. 이곳에 버튼을 추가합니다.

...
	<StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center">
		<TextBlock Text="{Binding Greeting}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
		<Button Command="{Binding CountCommand}">Click!</Button>
	</StackPanel>
...

이제 CountCommand를 구현해야 합니다. ViewModels/MainWindowViewModel.cs에 아래처럼 코드를 추가합니다.

...
        public string Greeting => $"Welcome to Avalonia! : {Count}";

        private int _count;
        public int Count
        {
            get => _count;
            set
            {
                this.RaiseAndSetIfChanged(ref _count, value);
                this.RaisePropertyChanged(nameof(Greeting));
            }
        }

        public ICommand CountCommand { get; }

        public MainWindowViewModel()
        {
            CountCommand = ReactiveCommand.Create(() =>
            {
                Count++;
            });
        }
...

CountCommand에 의해서 Count가 1씩 증가하며 Count의 값이 변경될 때 CountGreeting의 값이 변경되었음을 알리는 코드입니다.
실행해봅시다.

이제 버튼을 눌렀을 때 카운트 값이 올라가는 것을 확인할 수 있습니다.

image

WSL에서 앱 실행

윈도우 11 OS빌드번호 22000 이상이라면 WSLg를 실행할 수 있는 환경이며 Visual Studio 2022에서 정말 쉽게 Avalonia 앱을 실행할 수 있습니다.

image

Visual Studio 상단의 선택을 WSL로 변경해 줍니다.

image

그리고 실행하면 다음처럼 WSL의 리눅스에서 Avalonia 앱이 잘 실행되는 것을 볼 수 있습니다.

image

정리

Avalonia는 WPF 프로그래머라면 쉽게 익숙해질 수 있습니다. Avalonia가 WPF를 계승했다고 말할 정도니까요. 그리고 WSL를 이용해 리눅스 환경에서도 디버그를 쉽게 할 수 있어서 크로스플랫폼 개발환경이 편리해졌다고 말할 수 있겠습니다.

좋아요 4

다음번에는 Avalonia로 만든 앱을 웹어셈블리를 이용해 띄우는 확인을 해볼 텐데요, 아래의 영상을 보시면 상당히 좋은 퍼포먼스를 확인할 수 있습니다. 기대가 되네요!

좋아요 3

워… WPF 의 개발 코드 네임이 Avalon이었던 게 생각 나는군요…

좋아요 3

위의 시연은 Core2D의 웹어셈블리 시현입니다.

좋아요 1