EMR 프로젝트 - 1

병원 관리 프로그램을 만들면서 WPF로 기본 화면을 구성하고, MVVM 패턴을 적용해 메뉴에 따라 화면이 전환되도록 구현했다. 이번에는 대시보드와 환자 관리 화면을 연결하면서 XAML, 데이터 바인딩, Command가 어떻게 함께 동작하는지 배웠다.

XAML로 기본 화면 구성하기

화면은 왼쪽 사이드바, 상단 제목, 본문 영역으로 나눴다.

- Grid: 행과 열로 전체 레이아웃 구성
- StackPanel: 메뉴와 텍스트를 순서대로 배치
- Border: 배경색, 테두리, 여백 설정
- UserControl: 대시보드와 환자 관리 화면을 별도 구성

MVVM으로 화면과 동작 분리하기

MVVM은 Model, View, ViewModel로 역할을 나누는 구조다.
View와 ViewModel을 분리하는 데 집중했다. 대시보드와 환자 관리 화면을 각각 UserControl로 만들고, MainViewModel에서 어떤 화면을 보여줄지 관리하도록 구성했다.
Model과 Service는 폴더만 준비한 상태이며, 실제 데이터 처리는 이후에 구현할 예정이다.

DataContext와 Binding으로 화면 연결하기

View에서 ViewModel의 속성을 사용하려면 먼저 DataContext를 설정해야 한다.

  public MainWindow()
  {
      InitializeComponent();
      DataContext = new ViewModels.MainViewModel();
  }

이렇게 설정하면 XAML의 Binding이 해당 ViewModel의 속성을 참조한다.

  <TextBlock Text="{Binding CurrentPageTitle}" />

화면 제목을 XAML에 고정해서 작성하는 대신, ViewModel의 CurrentPageTitle 값으로 표시하도록 연결했다.

속성 변경을 화면에 알리기

바인딩된 값이 실행 중에 바뀌었을 때 화면도 갱신하려면 속성 변경 알림이 필요하다.
이를 위해 CommunityToolkit.Mvvm의 ObservableObject와 [ObservableProperty]를 사용했다.

  public partial class MainViewModel : ObservableObject
  {
      [ObservableProperty]
      [NotifyPropertyChangedFor(nameof(CurrentPageTitle))]
      private ObservableObject currentViewModel;
      public string CurrentPageTitle =>
          CurrentViewModel is PatientViewModel
              ? "환자 관리"
              : "대시보드";
  }

DataTemplate으로 ViewModel에 맞는 화면 표시하기

본문에는 ContentControl을 배치했다.

  <ContentControl Content="{Binding CurrentViewModel}" />

그리고 App.xaml에 ViewModel 타입별로 표시할 View를 등록했다.

  <DataTemplate DataType="{x:Type vm:DashboardViewModel}">
      <views:DashboardView />
  </DataTemplate>

  <DataTemplate DataType="{x:Type vm:PatientViewModel}">
      <views:PatientView />
  </DataTemplate>

ContentControl에 전달된 객체가 PatientViewModel이면 WPF가 대응하는 템플릿을 찾아 PatientView를 표시한다.

결과물