[C#, WPF] 이미지 파일을 불러와 Image 태그에 출력하기(MVVM 패턴)

이 기능을 사용하려다 필요없어져 코드를 남겨놓고자 블로그에 적어놓는다.

 

Binding 은 View(xaml)와 ViewModel(cs)를 동기화시켜준다.
참고로 ViewModel은 View의 코드 비하인더(xaml.cs)가 아니라 View를 다루기 위한 별도의 클래스(cs) 파일이다.

그러나 Binding SnapImageSource라고 적어도, View는 ViewModel의 존재를 모른다.
ViewModel 역시 View의 존재를 모른다.

그래서 DataContext를 Binding의 매개채로 활용해야 한다.

// App.xaml.cs

services.AddSingleton(s => new DashBoardControl()
{
    DataContext = s.GetRequiredService<DashBoardControlViewModel>()
});

 

App.xaml.cs는 WPF 애플리케이션의 진입점이며, 애플리케이션의 전역적인 설정을 담당한다.

위의 코드는 DashBoardControl의 인스턴스를 등록하고,

해당 인스턴스의 DataContext를 DashBoardControlViewModel로 설정하여

ViewModel과 View를 연결하는 역할을 한다.

 

// View

<Button Content="Load Image" Command="{Binding LoadImageCommand}" Margin="5" />
<Image Source="{Binding SnapImageSource}" Margin="5" />

 

View 에서는 Button과 Image 태그를 만들어줬다.
Button에는 Command 속성에 ViewModel의 LoadImageCommand 속성을 Binding해줬다.

Image에는 Source속성에 SnapImageSource 속성을 Binding해줬다.

 

// ViewModel

public DeviceSetupControlViewModel()
{
    LoadImageCommand = new RelayCommand(LoadImage);
}

// 이미지 소스 필드 및 프로퍼티
private BitmapImage snapImageSource;
public BitmapImage SnapImageSource
{
    get { return snapImageSource; }
    set
    {
        snapImageSource = value;
        OnPropertyChanged(nameof(SnapImageSource));
    }
}

// 이미지 파일 불러오는 Command 및 함수
public ICommand LoadImageCommand { get; private set; }
private void LoadImage(object parameter)
    {
        OpenFileDialog openFileDialog = new OpenFileDialog();
        openFileDialog.Filter = "이미지 파일|*.jpg;*.jpeg;*.png;*.bmp";
        openFileDialog.Multiselect = false;

        bool? result = openFileDialog.ShowDialog();
        if (result == true)
        {
            string filePath = openFileDialog.FileName;
            BitmapImage imageSource = new BitmapImage(new Uri(filePath));
            SnapImageSource = imageSource;
        }
    }

 

ViewModel에서는 Binding될 속성을 만들어주고, RelayCommand의 매개변수(Action execute)로 실행하고자 하는 함수를 넣어줬다.

MVVM, 의존성주입, 의존성속성 기타등등 알아야할게 굉장히 많고 어렵다.
구조가 뭐이리 복잡한지 원..