[WPF] MVVM 패턴으로 WPF 시작하기 - 05 Converter

WPF 시리즈 포스팅을 진행하고 있습니다. 아래 링크를 클릭하시면 연관된 다른 포스트들을 보실 수 있습니다.

목록

1. MVVM 패턴으로 WPF 시작하기 - 01 프로젝트 만들기
2. MVVM 패턴으로 WPF 시작하기 - 02 UI 구성 (Grid, ListView, StackPanel)
3. MVVM 패턴으로 WPF 시작하기 - 03 ViewModel 구성
4. MVVM 패턴으로 WPF 시작하기 - 04 TextBox와 ComboBox

---

안녕하세요 데브봉입니다.

이번 포스트는 Converter에 대해서 알아보도록 하겠습니다.

 

• Converter란?

단어의 뜻 그대로, 어떤 데이터를 View에 보여질 때만 변경 시켜서 보이지게 하는 것 입니다. 예를 들어 true, false의 값을 View 화면에서는 "남자", "여자"로 보여지게만 되고 값은 true, false 그대로 남아 있는거죠.

Converter는 IValueConverter라는 인터페이스를 상속해야 xaml에서 바인딩 시, Converter를 사용할 수 있습니다.


그럼 한번 만들어 보도록 하겠습니다.

1. Converter 만들기

먼저 관리에 용이할 수 있도록 Converters라는 폴더를 최상위에 만들어 주고 BoolToGender.cs 라는 파일을 안에 생성합니다.

그 다음, 접근제한자를 public으로 바꿔주고 IValueConverter 인터페이스를 상속하면 오류 나오는데, 인터페이스를 구현하도록 해주지 않아서 그렇습니다. 오류를 없애주기 위해선 메소드 Overloading을 해줍니다.

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Data;

namespace MyFirstWPFApp.Converters
{
    public class BoolToGender : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

Convert 메소드는 ViewModel에서 View로 갈때 사용되고
ConvertBack은 반대로 View에서 ViewModel로 갈 때 사용됩니다.

true, false값을 "남자", "여자"로 변환하는 것이므로 Convert 메소드를 아래와 같이 코딩합니다.

public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
    if (value is not bool boolean)
        return DependencyProperty.UnsetValue;

    return boolean ? "남자" : "여자";
}

 

DependencyProperty.UnsetValue는 바인딩 시, 값이 잘못된 값일 때 반환값 설정이 되어있다면, 설정된 값으로 반환시키는 역할을 합니다. 예로 들면 잘못된 값일 때 false로 지정해 놓고 DependencyProperty.UnsetValue으로 반환하면, false로 값이 나타나게 되는 것이죠.
(참고로 TargetNullValue가 Null일때 설정하는 속성, FallbackValue이 잘못된 값일 때 설정하는 속성입니다.)


그럼 이로써 Convert 객체를 완성하였습니다.

2. Converter 연동

컨버터를 만들었으니 연동을 시켜야겠죠? MainWindow.xaml로 돌아가서 먼저 Window Resource에 컨버터를 등록 시킵니다.

<Window
    x:Class="MyFirstWPFApp.Views.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:MyFirstWPFApp.Views"
    xmlns:c="clr-namespace:MyFirstWPFApp.Converters"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="800"
    Height="450"
    mc:Ignorable="d">
    <Window.Resources>
        <c:BoolToGender x:Key="BoolToGender" />
    </Window.Resources>
    ...
    ...
    ...
    </StackPanel>
</Window>

주의 할 것은 반드시, 해당 컨버터가 있는 폴더를 네임스페이스로 등록 시켜줘야 합니다.

xmlns:c="clr-namespace:MyFirstWPFApp.Converters"

그리고 변환이 필요한 곳에 Converter를 연동시켜줍니다.

<ComboBox
    ...
        <DataTemplate>
            <TextBlock Text="{Binding Converter={StaticResource BoolToGender}}" />
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>
...
...
<StackPanel Grid.Row="1" Orientation="Horizontal">
	...
    <TextBlock Margin="5" Text="{Binding SelectedPerson.Gender, Converter={StaticResource BoolToGender}}" />
</StackPanel>

연동이 완료되었습니다.

 

 

3. 프로그램 실행

한번 프로그램을 실행 해 보도록 하겠습니다.

보시는 바와 같이 true값을 "남자", false값을 "여자"로 변환되었습니다. 콤보박스와 선택된 직원의 정보를 보는 아래 StackPanel에서도 똑같이 적용되는 것을 보실 수 있습니다.

---

이번 포스트는 Converter에 관해 간단히 알아보았습니다.

관련 코드는 아래 깃허브에서 다운받으실 수 있습니다.
https://github.com/epqmqhd/BasicWPF_05

감사합니다!