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

아티클
10/09/2014

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

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

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

값 변환기 클래스 만들기

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

자세한 내용은 Blend에서 참조 추가 또는 제거을 참조하십시오.

값 변환기 클래스 만들기

프로젝트 패널에서 프로젝트를 마우스 오른쪽 단추로 클릭한 다음 새 항목 추가를 클릭합니다.
새 항목 대화 상자에서 클래스를 클릭하고 이름 필드에 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를 눌러 솔루션을 빌드하고 오류가 있는지 확인합니다.

팁

솔루션을 빌드하면 코드 파일이 컴파일되고 Blend가 데이터 바인딩 만들기 대화 상자 등에서 클래스를 사용할 수 있게 됩니다.코드 파일에 새 클래스를 추가하는 경우에는 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라는 이름을 지정했습니다.데이터 바인딩처럼 응용 프로그램의 다른 위치에서 개체를 참조하려면 응용 프로그램의 개체에 이름을 지정해야 합니다.Blend는 사용자 이름을 만듭니다.
두 번째 텍스트 상자에 대해 6단계부터 13단계를 반복합니다. 단, 값 변환기 추가 대화 상자에서는 DoubleToRomanNumeralValueConverter를 선택합니다.
프로젝트를 실행합니다(F5 키). 슬라이더를 이동하여 두 레이블에서 값이 업데이트되는지 확인합니다.

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