[GUI] Avalonia와 Community Toolkit MVVM 결합하기

Avalonia에서 Community Toolkit MVVM을 이용하여 코딩하는 방법에 대해 정리한 글입니다.

1. 프로젝트 설정

먼저, Avalonia 프로젝트를 설정해야 합니다. Visual Studio 또는 JetBrains Rider를 사용하여 Avalonia MVVM 템플릿을 선택해 새로운 프로젝트를 생성할 수 있습니다. 프로젝트 생성 후, 기존의 Avalonia.ReactiveUI 패키지를 제거하고 CommunityToolkit.Mvvm 패키지를 설치합니다.

• 패키지 설치:

  dotnet add package CommunityToolkit.Mvvm

2. 기본 설정 수정

Avalonia와 Community Toolkit MVVM을 사용하기 위해 몇 가지 설정이 필요합니다:

• App.axaml.cs 파일 수정:

  public static AppBuilder BuildAvaloniaApp() => AppBuilder.Configure<App>()
      .UsePlatformDetect()
      .WithInterFont()
      .LogToTrace();

• ViewModel Base 클래스 수정:

  using CommunityToolkit.Mvvm.ComponentModel;
  
  namespace YourNamespace.ViewModels
  {
      public class ViewModelBase : ObservableObject {}
  }

3. MVVM 패턴 구현

• 모델(Model):
  데이터를 관리하는 클래스를 만듭니다. 예를 들어, 간단한 ToDo 리스트의 경우:

  public class TodoItem
  {
      public string Name { get; set; }
      public bool IsCompleted { get; set; }
  }

• 뷰모델(ViewModel):
  UI 로직과 데이터를 관리합니다. ObservableObject를 상속받아 속성 변경을 알릴 수 있습니다.

  using CommunityToolkit.Mvvm.ComponentModel;
  using CommunityToolkit.Mvvm.Input;
  
  public partial class MainViewModel : ViewModelBase
  {
      [ObservableProperty]
      private ObservableCollection<TodoItem> items = new ObservableCollection<TodoItem>();
  
      [RelayCommand]
      public void AddItem(string name)
      {
          Items.Add(new TodoItem { Name = name });
      }
  }

• 뷰(View):
  XAML 파일에서 데이터 바인딩을 사용하여 UI를 구성합니다.

  <Window xmlns="https://github.com/avaloniaui"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          x:Class="YourNamespace.Views.MainWindow"
          DataContext="{Binding MainViewModel, Source={StaticResource ViewModelLocator}}">
      <StackPanel>
          <ItemsControl Items="{Binding Items}">
              <ItemsControl.ItemTemplate>
                  <DataTemplate>
                      <CheckBox Content="{Binding Name}" IsChecked="{Binding IsCompleted}"/>
                  </DataTemplate>
              </ItemsControl.ItemTemplate>
          </ItemsControl>
          <TextBox x:Name="newItemTextBox" />
          <Button Command="{Binding AddItemCommand}" CommandParameter="{Binding Text, ElementName=newItemTextBox}">Add</Button>
      </StackPanel>
  </Window>

• 뷰-뷰모델 결합:
  DataContext를 통해 뷰와 뷰모델을 연결합니다. 여기서 ViewModelLocator는 뷰모델 인스턴스를 제공하는 역할을 합니다.

4. 추가 참고 사항

• 네비게이션: Community Toolkit MVVM은 네비게이션을 직접적으로 지원하지 않으므로, 네비게이션을 구현하려면 추가 로직이 필요합니다. 예를 들어, UserControl을 사용한 컨텐츠 교체 또는 이벤트 기반 네비게이션을 고려할 수 있습니다.
• 유닛 테스트: MVVM 패턴을 따르기 때문에 뷰모델은 쉽게 테스트할 수 있습니다.

이 방법은 Avalonia와 Community Toolkit MVVM을 사용하여 MVVM 패턴을 구현하는 기본적인 접근 방법입니다. 더 복잡한 기능이 필요한 경우, 추가적인 라이브러리나 패턴을 사용하는 것이 좋습니다.