[WPF] MVVM 패턴으로 WPF 시작하기 - 03 ViewModel

1.MVVM 패턴

프로그램을 만드는데 여러가지 디자인 패턴이 각 프레임워크에 맞게 사용됨

처음에 MVC패턴 사용하다 점차 파생되어 MVP 그리고 MVVM 패턴까지 나오게 됨

 

MVVM 패턴 : Model + View Model 합친 용어

 

- Model : 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분

- View : 사용자에게 보여지는 UI 부분

- ViewModel : View를 위한 모델. View에서 나타내기 위한 Model이며 데이터 처리를 하는 부분

 

View(UI구성) -- Data Binding/Command -> ViewModel(View에 띄울 Model들의 객체) -- ViewModel에서 Model 변경 -> Model

View <- ViewModel 상태 변화 알림 -- ViewModel <- Model 상태 변화 알림 -- Model

 

사용자가 View에서 데이터를 볼 때, View에서 비춰지는 데이터는 ViewModel

ViewModel은 어떤 Model에 대한 데이터를 가지고 있음

 

2.CommunityTollkit.MVVM 다운받기

라이브러리 사용하여 MVVM을 구현하면 더욱 편리함

 

대표적인 라이브러리

- Prism Library - Infragistics

- MVVM Light - Galasoft

- CommunityToolkit.Mvvm - Microsoft

 

Visual Studio "도구" -> Nuget 패키지 관리자 -> 솔루션용 Nuget 패키지 관리

 

그 다음, 찾아보기 - CommunityToolkit.Mvvm 입력

CommunityToolkit.Mvvm 선택 및 설치

 

설치 잘 되었으면 솔루션 탐색기와 Nuget 패키지 관리창에서 설치됨을 확인할 수 있음

 

3.ViewModel 만들기

먼저, 프로젝트 구성을 보다 쉽게 접근하고 보기 위해 폴더 구조를 다시 만듦

 

ViewModels. Models, Enums 라는 폴더를 새로 프로젝트 최상위단에 만들고 기존 MainWindow.xaml를 View 폴더로 옮기거나, 삭제하고 View에 새로 만들어도 됨

*주의) MainWindow.xaml 특정 폴더로 옮기게 되면 네임스페이스에 영향을 줌. 코드 비하인드와 xaml 파일에서 네임스페이스를 해당 폴더 경로로 변경시켜줌

 

App.xaml에서 "StartupUri" 속성 삭제

StartupUri 속성은 앱 실행시 처음 켜질 윈도우를 가르키는 속성

 

<Application
    x:Class="MyFirstWPFApp.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:MyFirstWPFApp">
    <Application.Resources />
</Application>

 

ViewModel 생성 전 뼈대 Model 먼저 생성

Models 폴더에 Person.cs라는 새로운 파일 생성하고 아래처럼 코딩

 

using CommunityToolkit.Mvvm.ComponentModel;

namespace MyFirstWPFApp.Models
{
    public class Person : ObservableObject
    {
        private int _id;
        public int Id
        {
            get { return _id; }
            set
            {
                SetProperty(ref _id, value);
            }
        }

        private string? _name;
        public string? Name
        {
            get { return _name; }
            set
            {
                SetProperty(ref _name, value);
            }
        }

        private bool _gender;
        public bool Gender
        {
            get { return _gender; }
            set
            {
                SetProperty(ref _gender, value);
            }
        }
    }
}

 

ObservableObject 라는 추상클래스를 상속함

ObservableObject 클래스는 위에 Nuget 패키지로 설치한 CommunityToolkit.Mvvm 라이브러리에 속한 추상 클래스

INotifyPropertyChanged와 INotifyPropertyChanging 인터페이스 상속함

 

즉 ObservableObject 상속 통해 Model에 선언된 변수들의 변화 체크할 수 있음

 

Model 준비되었으니 ViewModel 생성함

ViewModels 폴더에 MainWindowViewModel.cs라는 파일 생성하고 코딩

 

using System;
using System.Collections.Generic;
using System.Linq;
using MyFirstWPFApp.Models;

namespace MyFirstWPFApp.ViewModels
{
    public class MainWindowViewModel : ViewModelBase
    {
        private IList<Person>? _people;
        public IList<Person>? People
        {
            get => _people;
            set => SetProperty(ref _people, value);
        }

        private Person? _selectedPerson;
        public Person? SelectedPerson
        {
            get => _selectedPerson;
            set => SetProperty(ref _selectedPerson, value);
        }

        public MainWindowViewModel()
        {
            People = new List<Person>
            {
                new Person{Id = 119302, Name = "김정현", Gender = true},
                new Person{Id = 119801, Name = "이현재", Gender = true},
                new Person{Id = 111202, Name = "송정환", Gender = true},
                new Person{Id = 111319, Name = "이보현", Gender = true},
                new Person{Id = 112215, Name = "고진욱", Gender = true},
                new Person{Id = 112221, Name = "황보아", Gender = true},
                new Person{Id = 200111, Name = "김푸름", Gender = true},
                new Person{Id = 112113, Name = "백아인", Gender = true},
                new Person{Id = 112109, Name = "신소현", Gender = false},
                new Person{Id = 112206, Name = "주명길", Gender = true},
            };
        }

    }
}

 

미리 People이라는 리스트 속성 가진 변수에 Person 객체 생성하여 MainWindowViewModel 객체 생성될 때 넣도록 함

 

ViewModelBase라는 클래스 상속하고 있어 에러발생

MainWindowViewModel.cs 있는 폴더에 Bases 폴더 생성하고 그 폴더 안에 생성

using CommunityToolkit.Mvvm.ComponentModel;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MyFirstWPFApp.ViewModels.Bases
{
    public class ViewModelBase : ObservableObject
    {

    }
}

 

4.Binding

Binding People : 이 창의 ViewModel에 People이라는 속성 가진 변수를 가지고 와라

MainWindowViewModel 바인딩 위해 MainWindow에 연결

 

using MyFirstWPFApp.ViewModels;
using System.Windows;

namespace MyFirstWPFApp.Views
{
    /// <summary>
    /// MainWindow.xaml에 대한 상호 작용 논리
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = new MainWindowViewModel();
        }
    }
}

 

MainWindow.xaml에서 DataContext로 등록된 MainWindowViewModel 통하여 각 속성 건드릴 수 있게 됨

{Binding People} 이라는 xaml 명령어 통해 MainWindowViewModel 안에 People 바인딩할 수 있음

 

5.MainWindow 실행

App.xaml에서 StartUp 속성을 Window태그 안에 넣어주고 새 이벤트 처리기를 엔터하면 자동으로 코드 비하인드에 Application_Startup 이벤트 생김

 

<Application
    x:Class="MyFirstWPFApp.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:MyFirstWPFApp"
    Startup="Application_Startup">
    <Application.Resources />
</Application>

 

StartUp 속성 : 프로그램이 최초 실행될때 시작되는 이벤트. 여기에 MainWindow.xaml 객체 하나 생성하여 띄우게 함

 

using MyFirstWPFApp.Views;
using System.Windows;

namespace MyFirstWPFApp
{
    /// <summary>
    /// Interaction logic for App.xaml
    /// </summary>
    public partial class App : Application
    {
        private void Application_Startup(object sender, StartupEventArgs e)
        {
            MainWindow main = new();
            main.ShowDialog();
        }
    }
}

 

출처) 괴발자 데브봉