실습 정보: 데이터 형식 변환

아티클
10/11/2017

값 변환기를 사용하면 데이터의 형식을 간편하게 변환할 수 있습니다. Microsoft Expression Blend에 있는 개체의 속성 값을 데이터 값이나 다른 속성 값에 바인딩할 때는 값 형식이 일치해야 합니다. 예를 들어 "123"과 같은 텍스트 상자 문자열을 슬라이더 막대의 해당 정수 값으로 변환하거나 Visibility.Hidden과 같은 속성을 false 같은 부울 값으로 변환할 수 있습니다.

값 변환기는 Microsoft .NET Framework 클래스의 코드로 IValueConverter 인터페이스를 구현합니다. 데이터 바인딩 엔진에서는 바인딩 원본과 바인딩 대상 간에 값을 이동할 때 Convert 및 ConvertBack 메서드를 호출하므로 두 메서드를 모두 구현해야 합니다. 자세한 내용은 MSDN의 IValueConverter 인터페이스를 참조하십시오.

값 변환기를 적용하려면 속성에 데이터를 바인딩할 때 데이터바인딩만들기 대화 상자에서 값 변환기 필드를 입력하면 됩니다.

값 변환기 클래스 만들기

이 절차에서는 해당 코드 숨김 파일에 이미 C#를 사용하는 프로젝트에만 추가할 수 있는 C#로 작성된 .NET 클래스 예제를 제공합니다. 그러나 이 절차 외에도 다른 여러 가지 방법으로 프로젝트에 코드를 추가할 수 있습니다. Microsoft Visual Studio를 사용하여 클래스를 .dll로 컴파일한 다음 프로젝트에 .dll 파일에 대한 참조를 추가할 수도 있습니다.

자세한 내용은 참조 추가 또는 제거를 참조하십시오.

프로젝트 패널에서 프로젝트를 마우스 오른쪽 단추로 클릭한 다음 새 항목 추가를 클릭합니다.
새 항목 대화 상자에서 클래스를 클릭하고 이름 필드에 DoubleValueConverter.cs를 입력한 다음 확인을 클릭합니다.

솔루션에서 사용 중인 언어로 새 코드 파일이 만들어집니다. 이 절차에서는 C# 언어가 사용됩니다. 이 파일은 프로젝트에 추가되며 아트보드에서 열립니다.

DoubleValueConverter.cs 파일에서 다음 클래스 정의를 삭제합니다.

public class DoubleValueConverter
{
    public DoubleValueConverter()
    {
        // Insert code required on object creation below this point.
    }
}

삭제한 코드를 다음과 같은 두 개 값 변환기 클래스가 포함된 다음 코드로 바꿉니다.

DoubleToIntegerValueConverter double 값과 정수 간의 양방향 변환을 제공합니다.
DoubleToRomanNumeralValueConverter double 값을 로마 숫자의 문자열 표현으로 변환하는 단방향 변환을 제공합니다.

    /// <summary>
    /// DoubleToIntegerValueConverter provides a two-way conversion between
    /// a double value and an integer.
    /// </summary>
    public class DoubleToIntegerValueConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter,
              System.Globalization.CultureInfo culture)
        {
            return System.Convert.ToInt32(value);
        }

        public object ConvertBack(object value, Type targetType,
            object parameter, System.Globalization.CultureInfo culture)
        {
            return System.Convert.ToDouble(value);
        }

    }

    /// <summary>
    /// DoubleToRomanNumeralValueConverter provides a one-way conversion from
    /// a double value to a string representation of a Roman numeral.
    /// </summary>
    public class DoubleToRomanNumeralValueConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter,
            System.Globalization.CultureInfo culture)
        {
            return this.ConvertToRomanNumeral(System.Convert.ToInt32(value));
        }

        public object ConvertBack(object value, Type targetType,
            object parameter, System.Globalization.CultureInfo culture)
        {
            return null;
        }

        private List<IntegerStringPair> romanStrings = null;

        private string ConvertToRomanNumeral(int input)
        {
            StringBuilder myBuilder = new StringBuilder();

            foreach (IntegerStringPair thisPair in this.PairSet)
            {
                while (input >= thisPair.Value)
                {
                    myBuilder.Append(thisPair.StringValue);
                    input -= thisPair.Value;
                }
            }

            return myBuilder.ToString();
        }

        private List<IntegerStringPair> PairSet
        {
            get
            {
                if (this.romanStrings == null)
                {
                    this.romanStrings = new List<IntegerStringPair>();
                    this.romanStrings.Add(new IntegerStringPair(1000, "M"));
                    this.romanStrings.Add(new IntegerStringPair(900, "CM"));
                    this.romanStrings.Add(new IntegerStringPair(500, "D"));
                    this.romanStrings.Add(new IntegerStringPair(400, "CD"));
                    this.romanStrings.Add(new IntegerStringPair(100, "C"));
                    this.romanStrings.Add(new IntegerStringPair(90, "XC"));
                    this.romanStrings.Add(new IntegerStringPair(50, "L"));
                    this.romanStrings.Add(new IntegerStringPair(40, "XL"));
                    this.romanStrings.Add(new IntegerStringPair(10, "X"));
                    this.romanStrings.Add(new IntegerStringPair(9, "IX"));
                    this.romanStrings.Add(new IntegerStringPair(5, "V"));
                    this.romanStrings.Add(new IntegerStringPair(4, "IV"));
                    this.romanStrings.Add(new IntegerStringPair(1, "I"));
                }

                return this.romanStrings;
            }
        }
    }

    /// <summary>
    /// IntegerStringPair provides an easy way to store integer and string pairs.
    /// </summary>
    public class IntegerStringPair
    {
        private int value;
        private string stringValue;
        public int Value
        {
            get
            {
                return this.value;
            }
        }
        public string StringValue
        {
            get
            {
                return this.stringValue;
            }
        }
        public IntegerStringPair(int value, string stringValue)
        {
            this.value = value;
            this.stringValue = stringValue;
        }
    }

Ctrl+Shift+B를 눌러 솔루션을 빌드하고 오류가 있는지 확인합니다.

팁:
솔루션을 빌드하면 코드 파일이 컴파일되고 Expression Blend가 데이터 바인딩 만들기 대화 상자 등에서 클래스를 사용할 수 있게 됩니다. 코드 파일에 새 클래스를 추가하는 경우에는 Expression Blend에서 클래스를 사용할 수 있도록 솔루션을 다시 빌드해야 합니다.

속성에 값 변환기 적용

다음 절차에서는 두 개의 TextBox 개체에 값을 바인딩할 때 이전 절차의 값 변환기를 Slider 개체의 값에 적용하여 텍스트 상자에 Slider 값의 정수 및 로마 숫자 표현이 표시되도록 합니다.

도구 패널에서 아래쪽 도구 그룹을 마우스 오른쪽 단추로 클릭하면 나타나는 목록에서 Slider 컨트롤을 선택합니다.
Slider 컨트롤을 주 문서의 아트보드로 끌어 놓습니다.
새 Slider 개체를 선택하고 속성 패널의 공용 속성에서 다음 속성을 찾아 해당 값을 다음과 같이 설정합니다.
- LargeChange를 10으로 설정합니다. 이 값은 슬라이더 막대를 클릭할 때 변경되는 크기입니다.
- Maximum을 2001로 설정합니다. 그러면 슬라이더가 0부터 2001까지 이동합니다.
- SmallChange를 1로 설정합니다. 이 값은 화살표 키를 사용하여 슬라이더를 이동할 때 변경되는 크기입니다.
도구 패널에서 아래쪽으로 부터 두 번째인 도구 그룹을 마우스 오른쪽 단추로 클릭하면 나타나는 목록에서 TextBox 컨트롤을 선택합니다.
아트보드에서 슬라이더 개체 옆에 텍스트 상자 컨트롤을 두 개 그립니다.
첫 번째 텍스트 상자 개체를 선택하고 속성 패널의 공용 속성에서 Text 속성을 찾습니다. 이 Text 속성을 슬라이더 값에 바인딩합니다.
고급 속성 옵션을 클릭하면 나타나는 목록에서 데이터 바인딩을 클릭합니다.
데이터 바인딩 만들기 대화 상자에서 요소 속성 탭을 클릭합니다. 이 탭에서 내부 값을 속성에 바인딩합니다.
장면 요소 아래에서 요소 트리를 확장하고 [Slider] 개체를 선택합니다.
속성에서 **Value : (Double)**을 선택합니다.

그러면 텍스트 상자의 콘텐츠가 슬라이더의 값에 바인딩됩니다.
고급 속성 표시를 클릭하고 값 변환기 옆에 있는 새 값 변환기 추가를 클릭합니다.

값 변환기 추가 대화 상자에서 DoubleToIntegerValueConverter를 선택하고 확인을 클릭합니다.

팁:
값 변환기가 표시되지 않으면 이전 절차에서 만든 원본 파일(DoubleValueConverter.cs)을 프로젝트에 추가했으며 프로젝트를 빌드했는지(Ctrl+Shift+B) 확인합니다.

데이터 바인딩 만들기 대화 상자에서 확인을 클릭합니다.

이제 첫 번째 Label 개체에 슬라이더의 정수 표현이 표시됩니다.

[!참고]

슬라이더 개체에 slider라는 이름을 지정했습니다. 데이터 바인딩을 수행하는 경우처럼 응용 프로그램의 다른 위치에서 개체를 참조하려면 응용 프로그램의 개체에 이름을 지정해야 합니다. Expression Blend에서는 이름이 자동으로 만들어집니다.
두 번째 텍스트 상자에 대해 6단계부터 13단계를 반복합니다. 단, 값 변환기 추가 대화 상자에서는 DoubleToRomanNumeralValueConverter를 선택합니다.
프로젝트를 실행합니다(F5 키). 슬라이더를 이동하여 두 레이블에서 값이 업데이트되는지 확인합니다.

값 변환기를 사용하지 않으면 슬라이더 값이 표시되는 텍스트 상자에 많은 소수 자릿수가 표시됩니다.

참조

작업

개체를 사용자 입력 값 또는 기타 내부 값에 바인딩

개념

데이터를 표시하는 컨트롤의 스타일 지정

데이터 표시

다음을 통해 공유

실습 정보: 데이터 형식 변환

값 변환기 클래스 만들기

속성에 값 변환기 적용

참조

작업

개념

추가 리소스