지난 포스팅에서 OpenCVService(Model)를 구현했으니, 이제 WPF OpenCV 프로젝트의 화면(View)과 로직을 연결해 줄 ViewModel을 작성할 차례입니다.
MVVM 패턴에서 ViewModel은 View(화면)가 보여줄 데이터를 가지고 있고, Model(서비스)에게 복잡한 연산을 시키는 ‘사령관’ 역할을 합니다.
MainViewModel 구조와 역할
MainViewModel.cs는 UI 요소들과 데이터 바인딩(Binding) 되어야 하므로, 값이 바뀌면 화면에 즉시 알려주는 INotifyPropertyChanged 인터페이스를 상속받아 구현합니다.
이 클래스에는 다음과 같은 핵심 기능이 포함됩니다.
- 이미지 데이터: 화면에 표시될
DisplayImage. - 상태 변수: 원본 보기 체크(
ShowOriginal), 로딩 중 표시(IsBusy). - 알고리즘 선택: 콤보박스에 바인딩될
AlgorithmList와 선택된SelectedAlgorithm. - 명령(Command): 버튼 클릭 시 실행될
LoadImageCommand,ApplyAlgorithmCommand.
RelayCommand : 버튼과 함수를 연결
코드를 작성하기 전에, MVVM에서 버튼 클릭 이벤트를 어떻게 처리하는지 이해해야 합니다. 예전에는 버튼을 더블 클릭해서 Button_Click 함수를 만들었지만, MVVM에서는 Command 방식을 사용합니다.
하지만 우리가 만든 일반 함수(LoadImage)는 WPF 버튼이 알아듣는 ICommand 규격이 아닙니다. 그래서 일반 함수를 ICommand처럼 보이게 포장해주는 상자가 필요한데, 그것이 바로 RelayCommand 클래스입니다.
이 클래스는 View와 ViewModel을 깔끔하게 분리해 주는 MVVM의 필수 요소입니다.
MainViewModel.cs
이제 MainViewModel.cs 파일에 아래 코드를 작성합니다. RelayCommand 클래스도 파일 하단에 함께 포함되어 있습니다.
using Microsoft.Win32;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Input;
using System.Windows.Media;
namespace Vision_OpenCV_App
{
public class MainViewModel : INotifyPropertyChanged
{
// PropertyChanged 이벤트 구현
public event PropertyChangedEventHandler? PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string? name = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}
private OpenCVService _cvServices;
#region Properties
// 화면에 표시될 이미지
private ImageSource _displayImage;
public ImageSource DisplayImage
{
get => _displayImage;
set { _displayImage = value; OnPropertyChanged(); }
}
// 상태 메시지 표시
private string _analysisResult = "Ready";
public string AnalysisResult
{
get => _analysisResult;
set { _analysisResult = value; OnPropertyChanged(); }
}
// 원본 보기 체크박스 바인딩
private bool _showOriginal;
public bool ShowOriginal
{
get => _showOriginal;
set
{
_showOriginal = value;
OnPropertyChanged();
UpdateDisplay(); // 체크 상태 변경 시 화면 갱신
}
}
// 로딩 바(Busy Indicator) 표시용
private bool _isBusy;
public bool IsBusy
{
get => _isBusy;
set
{
if (_isBusy == value) return;
_isBusy = value;
OnPropertyChanged();
}
}
// 알고리즘 목록 및 선택
public ObservableCollection<string> AlgorithmList { get; set; }
private string _selectedAlgorithm;
public string SelectedAlgorithm
{
get => _selectedAlgorithm;
set
{
_selectedAlgorithm = value;
OnPropertyChanged();
CreateParametersForAlgorithm(value); // 알고리즘 선택 시 파라미터 생성
}
}
private AlgorithmParameters _currentParameters;
public AlgorithmParameters CurrentParameters
{
get => _currentParameters;
set { _currentParameters = value; OnPropertyChanged(); }
}
#endregion
public MainViewModel()
{
_cvServices = new OpenCVService();
AlgorithmList = new ObservableCollection<string>
{
"Threshold", // 향후 Canny, Blur 등 추가 가능
};
}
// 화면 갱신 로직
private void UpdateDisplay()
{
if (ShowOriginal)
DisplayImage = _cvServices.GetOriginalImage();
else
DisplayImage = _cvServices.GetProcessedImage();
}
private void CreateParametersForAlgorithm(string algoName)
{
switch (algoName)
{
case "Threshold":
CurrentParameters = new ThresholdParams();
break;
default:
CurrentParameters = null;
break;
}
}
// [이미지 로드] 비동기 명령 함수
private async void LoadImage(object obj)
{
OpenFileDialog dlg = new OpenFileDialog { Filter = "Image Files|*.bmp;*.jpg;*.png" };
if (dlg.ShowDialog() == true)
{
try
{
IsBusy = true; // UI 프리징 방지용 플래그
AnalysisResult = "Loading Image...";
// OpenCVService의 비동기 로드 호출
await _cvServices.LoadImageAsync(dlg.FileName);
ShowOriginal = true;
UpdateDisplay();
AnalysisResult = "Image Loaded Successfully.";
}
catch (Exception ex)
{
AnalysisResult = "Load Error: " + ex.Message;
}
finally
{
IsBusy = false;
}
}
}
// [알고리즘 적용] 비동기 명령 함수
private async void ApplyAlgorithm(object obj)
{
if (string.IsNullOrEmpty(SelectedAlgorithm)) return;
if (IsBusy) return;
try
{
IsBusy = true;
AnalysisResult = "Processing...";
string result = await _cvServices.ProcessImageAsync(SelectedAlgorithm, CurrentParameters);
if (result == "This Image is Gray Image.")
{
MessageBox.Show("Gray 영상입니다.", "Gray Image", MessageBoxButton.OK);
}
AnalysisResult = result;
ShowOriginal = false; // 결과 이미지를 보여주기 위해
UpdateDisplay();
}
catch (Exception ex)
{
AnalysisResult = "처리 중 에러: " + ex.Message;
}
finally
{
IsBusy = false;
}
}
public void Cleanup() => _cvServices.Cleanup();
// --- Commands (View와 바인딩 될 속성들) ---
public ICommand LoadImageCommand => new RelayCommand(LoadImage);
public ICommand ApplyAlgorithmCommand => new RelayCommand(ApplyAlgorithm);
}
// Command 패턴 구현을 위한 Helper 클래스
public class RelayCommand : ICommand
{
private readonly Action<object> _execute;
public RelayCommand(Action<object> execute) => _execute = execute;
public bool CanExecute(object parameter) => true;
public void Execute(object parameter) => _execute(parameter);
public event EventHandler CanExecuteChanged;
}
}코드 핵심 분석
비동기(Async) UI 처리
LoadImage와 ApplyAlgorithm 함수를 보면 async void로 선언되어 있습니다. 이는 대용량 이미지를 처리할 때 화면이 멈추는(Freezing) 현상을 막기 위함입니다. 작업이 진행되는 동안 IsBusy 속성을 true로 만들어 로딩 바를 띄우는 센스도 추가되었습니다.
알고리즘 파라미터 자동 생성
SelectedAlgorithm 속성의 set 부분을 보면, 콤보박스에서 알고리즘을 선택하는 순간 CreateParametersForAlgorithm이 호출됩니다. 즉, 사용자가 선택한 알고리즘에 맞는 설정 값 객체(Model)가 즉시 준비되는 구조입니다.
RelayCommand의 동작 흐름
마지막으로 버튼이 눌렸을 때의 동작 과정을 정리해 보겠습니다.
- 연결: XAML View에서
<Button Command="{Binding LoadImageCommand}" ... />로 바인딩합니다. - 클릭: 사용자가 버튼을 클릭합니다.
- 실행: 버튼은
RelayCommand.Execute()를 호출합니다. - 전달:
RelayCommand는 미리 저장해둔LoadImage()함수를 대신 실행해 줍니다.
이런 구조 덕분에 디자인(View)과 로직(ViewModel)이 서로를 몰라도 완벽하게 작동하는 느슨한 결합(Loose Coupling)이 완성됩니다.
🚀 다음 단계
이제 Model과 ViewModel이 모두 준비되었습니다! 다음 시간에는 드디어 이 모든 것을 화면에 보여줄 View(XAML)를 디자인하고 완성해 보겠습니다