WPF 프로젝트 생성

  • 최초 작성일: 2023년 5월 18일(목)

목차

[TOC]

내용

프로젝트 생성

필자는 Visual Studio Pro 2019 환경을 사용하였다.

아래의 이미지처럼 WPF 애플리케이션 프로젝트를 생성하자.

여기서 WPF 앱(.NET Framework)와 헷갈릴 수 있는데,


WPF 애플리케이션은 기본 라이브러리를 .netCore를 사용한다. 그렇기에 Linux환경, 윈도우 등의 여러 OS에서 사용 가능하다.

그러나 WPF앱(.NET)은 기본 라이브러리를 .netFramework를 사용한다. 윈도우 환경만을 지원한다.


image


image



모델-뷰-뷰 모델 (model-view-viewmodel, MVVM)

MVVM(Model-View-ViewModel)은 사용자 인터페이스를 설계하는 소프트웨어 아키텍처 패턴이다.

프레젠테이션 로직을 추상화하고 분리하여 모듈화하고 테스트 가능하도록 설계되었다.


MVVM 패턴은 세 가지 주요 구성 요소로 나뉜다.

  1. 모델(Model): 데이터와 비즈니스 로직, 그리고 유효성 검사 규칙 등을 포함한 애플리케이션의 도메인 객체를 나타낸다.
  2. 뷰(View): 사용자에게 보여지는 사용자 인터페이스(UI) 요소이며, 사용자가 상호작용하고 애플리케이션을 조작하는 방법을 제공한다.
  3. 뷰모델(ViewModel): 뷰에 연결된 데이터와 명령을 캡슐화하며, 뷰에 표시될 데이터를 준비하고, 뷰에서 발생하는 사용자 액션을 해석한다. 뷰모델은 모델에서 데이터를 가져와서 뷰에서 사용하기 쉽게 변환하며, 사용자가 뷰에서 액션을 수행할 때 이를 모델에 적용한다.

MVVM의 주요 장점은 뷰와 뷰모델 사이의 분리이다. 이 분리로 인해 뷰는 UI와 관련된 코드만 포함하고 뷰모델은 UI 로직을 처리하므로, 뷰와 뷰모델은 서로 독립적으로 테스트하고 개발할 수 있다. 또한 뷰를 재사용하거나, 변경하는 데 더 유연성을 제공한다.

또한, MVVM은 일반적으로 데이터 바인딩을 사용하여 뷰와 뷰모델을 연결한다. 이로 인해 뷰모델의 상태가 변경되면 자동으로 뷰가 업데이트되며, 반대로 사용자가 뷰에서 액션을 수행하면 뷰모델이 업데이트된다.

MVVM 패턴은 WPF, Silverlight, natively in AngularJS, and as a paradigm in other JavaScript frameworks such as Vue and React에서 보편적으로 사용된다.


WPF 프로젝트에 적용

WPF(Windows Presentation Foundation)에서 MVVM(Model-View-ViewModel) 패턴을 적용하는 기본적인 단계는 아래와 같다.


  1. 프로젝트 세팅: MVVM 패턴을 사용할 WPF 프로젝트를 만든다.

  2. 모델(Model) 정의: 도메인 데이터나 비즈니스 로직을 나타내는 클래스를 정의한다. 예를 들어, 사용자 클래스가 있다면 이름, 이메일, 비밀번호 등의 속성을 포함할 수 있다.

  3. 뷰모델(ViewModel) 생성: 뷰에 연결된 데이터와 명령을 캡슐화하는 클래스를 생성한다. 이 클래스는 INotifyPropertyChanged 인터페이스를 구현해야 한다. 이 인터페이스는 속성 값이 변경될 때마다 UI를 자동으로 업데이트하게 한다. 뷰모델은 뷰에 표시될 데이터를 준비하고, 뷰에서 발생하는 액션을 처리하는 역할을 한다.

  4. 뷰(View) 작성: 사용자에게 보여질 UI를 만든다. 이는 XAML을 통해 정의되며, 데이터 바인딩을 통해 ViewModel에 연결된다. WPF에서는 이러한 데이터 바인딩을 {Binding} 구문을 통해 선언적으로 할 수 있다.

  5. 데이터 바인딩: 뷰와 뷰모델 사이에 데이터 바인딩을 설정한다. 이는 뷰(XAML 코드)에서 Binding 표현식을 사용하여 수행되며, 뷰에서 사용되는 데이터는 뷰모델의 속성에 바인딩된다.

  6. 명령 바인딩: 뷰의 액션(버튼 클릭, 텍스트 입력 등)은 뷰모델의 명령에 바인딩된다. 이는 ICommand 인터페이스를 구현하는 명령 객체를 뷰모델에 정의함으로써 수행된다.

  7. 뷰와 뷰모델 연결: 마지막으로, 뷰의 DataContext를 뷰모델 인스턴스에 설정하여 뷰와 뷰모델을 연결한다. 이렇게 하면 뷰는 뷰모델에 정의된 데이터와 명령에 접근하고 이를 바인딩할 수 있다.


이러면 WPF에서 MVVM 패턴을 사용하는 기본적인 구조가 완성된다.

MVVM 패턴은 뷰와 비즈니스 로직을 분리하여 코드를 더 잘 조직화하고, 유지보수와 테스팅을 쉽게 하는 데 도움이 된다.



예시

아래의 이미지처럼 Model, View, ViewModel 폴더를 생성한 후, 아래의 작업을 진행한다.


  1. 비즈니스 데이터와 로직을 나타내는 클래스로 User.cs를 생성하고, Model 폴더에 위치시킨다.
  2. 사용자 인터페이스를 정의하는 XAML 코드인 MainWindow.xaml 코드를 View 폴더에 위치시킨다.
  3. 뷰에 표시할 데이터와 명령을 캡슐화할 클래스로 MainViewModel.cs 코드를 ViewModel 폴더에 위치시킨다.


image