아발로니아 UI 예제 프로그램 리뷰 1 - BasicMvvmSample

■ 목차

├ 1. BasicMvvmSample 들어가기

├ 2. 프로그램 동작 및 구조

├ 3. 뷰와 아발로니아 요소들

└ 4. ReactiveUI와 MVVM 패턴

 

1. BasicMvvmSample 들어가기

크로스플랫폼 닷넷 UI 프레임워크인 아바로니아 맛보기를 넘어서서 본격적인 활용에 들어가기 위한 학습 방법으로 필자는 예제 프로그램 리뷰를 하나씩 수행하기로 했다. 기술 자료가 넉넉하고, 비주얼스튜디오의 WPF 디자이너와 같은 도구가 있다면 넘어갈 수도 있는 문제겠지만 지금까지 접하지 않았던 새로운 도구와 친숙해지는 방법은 역시 예제를 통하는 것이 아닌가 싶다. 공식 예제 코드는 깃허브 https://github.com/AvaloniaUI/Avalonia.Samples 에서 받을 수 있다. 커뮤니티에서 발굴해 놓은 예제와 참조 프로젝트도 있는데 깃허브 https://github.com/AvaloniaCommunity/awesome-avalonia 에서 확인할 수 있다.

 

 

BasicMvvmSample은 MVVM(Models, Views, View Models) 패턴으로 개발할 경우 처음으로 참조할만한 예제이다. 위의 그림처럼 두 개의 탭 컨트롤을 활용하여 하나는 단순 뷰모델과 연결하고 다른 하나는 Reactive UI 프레임워크를 사용하는 뷰모델을 연결한다.

 

2. 프로그램 동작 및 구조

 

프로그램의 동작은 단순하다. 상단의 탭으로 서로 다른 뷰 모델의 동작을 선택한다. 각각의 뷰모델과 연동하는 뷰의 형태는 동일하다. 뷰상단 텍스트 박스에 텍스트를 입력하면 하단 텍스트 박스에 해당 내용을 반영해서 출력하는 동작을 수행한다. 상단 텍스트 박스는 뷰모델의 Name 속성에 바인딩되고, Name 속성이 변경되는 경우 하단 텍스트 박스에 바인딩된 Greeting 속성에 대하여 RaisePropertyChanged()를 수행하여 뷰로 하여금 Greeting 속성 바뀌었음을 인지하도록 하는 방식으로 동작한다.

 

 

프로젝트는 별도의 모델 없이 뷰모델과 뷰로만 구성된 단순한 형태이다. 뷰에서 MainWindowViewModel을 중심으로 SimpleViewModel, ReactiveViewModel을 바라보도록 설정했다.

 

3. 뷰와 아발로니아 요소들

<TabControl>
	<!-- Our Simple ViewModel -->
	<TabItem Header="Simple ViewModel" >
		<StackPanel DataContext="{Binding SimpleViewModel}" Spacing="10">
			<TextBlock>Enter your Name:</TextBlock>
			<TextBox Text="{Binding Name}" />
			<TextBox Text="{Binding Greeting, Mode=OneWay}"
					 IsReadOnly="True"
					 FontWeight="Bold" />
		</StackPanel>
	</TabItem>

	<!-- Our ReactiveViewModel -->
	<TabItem Header="Reactive UI" >
		<StackPanel DataContext="{Binding ReactiveViewModel}" Spacing="10">
			<TextBlock>Enter your Name:</TextBlock>
			<TextBox Text="{Binding Name}" />
			<TextBox Text="{Binding Greeting, Mode=OneWay}"
					 IsReadOnly="True"
					 FontWeight="Bold" />
		</StackPanel>
	</TabItem>	
</TabControl>

• TabControl : https://api-docs.avaloniaui.net/docs/T_Avalonia_Controls_TabControl
  내부에 TabItem 항목으로 탭 요소를 둔다. TabStripPlacement 속성을 "Bottom"으로 지정하면 탭을 하단에 표시한다.
• TabItem : https://api-docs.avaloniaui.net/docs/T_Avalonia_Controls_TabItem
  Header 속성으로 탭 제목 지정.
• StackPanel : https://api-docs.avaloniaui.net/docs/T_Avalonia_Controls_StackPanel
  내부에 요소들을 수직 또는 수평으로 배열하는 컨테이너. 예제에서는 스택 패널에 개별 뷰모델을 바인딩했다.
  Spacing, Width, Orientation, Background, Margin, DataContext, VerticalAlignment 등 사용.
• TextBlock : https://api-docs.avaloniaui.net/docs/T_Avalonia_Controls_TextBlock
  텍스트 출력, 태그 내에 출력할 문자열을 입력하거나 Text 속성에 정적/동적 텍스트 입력. FontWeight, FontSize, VerticalAlignment, TextAlignment, TextWrapping 등 사용
• TextBox : https://api-docs.avaloniaui.net/docs/T_Avalonia_Controls_TextBox
  단순 텍스트 입출력에 사용. Text로 뷰모델의 속성 지정, Watermark, IsReadOnly, FontWeight, VerticalAlignment, FontSize, PasswordChar, Name, UseFloatingWatermark 등 사용

 

4. ReactiveUI와 MVVM 패턴

using ReactiveUI;

namespace BasicMvvmSample.ViewModels
{
    public class ViewModelBase : ReactiveObject
    {
    }
}
namespace BasicMvvmSample.ViewModels
{
    public class MainWindowViewModel : ViewModelBase
    {
       public SimpleViewModel SimpleViewModel { get; } = new SimpleViewModel();
       public ReactiveViewModel ReactiveViewModel { get; } = new ReactiveViewModel();
    }
}

 

뷰모델의 코드를 보면 "using ReactiveUI"로 ReactiveUI를 사용하고 있음을 알 수 있다. 단순한 뷰모델은 ReactiveUI가 제공하는 ReactiveObject 베이스 클래스의 INotifyPropertyChanged 인터페이스를 구현하는 방식이고, ReactiveObject를 직접 상속 받아서 ReactiveUI의 전용 기능을 사용하는 뷰모델도 확인할 수 있다. 결론적으로 아발로니아 UI는 뷰를 담당하고 ReactiveUI를 통해서 MVVM 패턴을 프로그램에 적용한다고 이해하면 좋겠다.