실습 정보: 값 변환기 만들기 및 적용

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

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

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

[!참고]

이 항목의 두 번째 절차에서는 Silverlight 2에서 지원되지 않는 요소 간 바인딩을 사용하여 값 변환기를 적용합니다. 그러나 CLR 데이터 원본을 사용하는 데이터 바인딩 작업에는 값 변환기를 적용할 수 있습니다.

값 변환기 클래스 만들기

• 다음 코드를 DoubleValueConverter.cs라는 파일에 붙여 넣습니다. 이 코드에는 다음과 같은 두 개의 값 변환기가 있습니다.

  • DoubleToIntegerValueConverter 에서는 double 값과 정수 간의 양방향 변환을 제공합니다.

  • DoubleToRomanNumeralValueConverter 에서는 double 값을 로마 숫자의 문자열 표현으로 변환하는 단방향 변환을 제공합니다.

  using System;
  using System.Collections.Generic;
  using System.Text;
  using System.Windows.Data;
  
  namespace Microsoft.Expression.Samples
  {
      /// <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>
      /// DoubleToIntegerValueConverter 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;
          }
      }
  }
  

맨 위로 이동

속성에 값 변환기 적용

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

1. Expression Blend의 프로젝트에 DoubleValueConverter.cs 파일을 추가합니다. 프로젝트 메뉴에서 기존 항목추가를 클릭하고 DoubleValueConverter.cs 파일을 찾은 다음 열기를 클릭합니다.

   [!참고]

   Visual C# 언어 옵션으로 프로젝트를 만들었는지 확인합니다. DoubleValueConverter.cs를 .dll 파일로 작성하고 .dll에 대한 참조를 프로젝트에 추가할 수도 있습니다.

2. 프로젝트를 빌드(Ctrl+Shift+B)하여 프로젝트에서 값 변환기 클래스를 사용할 수 있도록 합니다.

3. 도구 상자에서 아트보드에 Label 컨트롤 두 개와 Slider 컨트롤 하나를 추가합니다. 넓은 공간을 차지하도록 각 컨트롤의 레이아웃을 지정합니다.

4. 개체 및 타임라인에서 Slider 개체를 선택하고 속성 패널의 공용속성에서 다음 속성을 설정합니다.

   • LargeChange를 10으로 설정합니다. 이 값은 Slider를 클릭할 때 변경되는 크기입니다.

   • Maximum을 2001로 설정합니다. Slider가 0부터 2001까지 이동합니다.

   • SmallChange를 1로 설정합니다. 이 값은 화살표 키를 사용하여 Slider를 클릭할 때 변경되는 크기입니다.

5. 개체및타임라인에서 첫 번째 Label 개체를 선택하고 속성 패널의 공용 속성에서 Content 속성을 클릭합니다. 드롭다운 목록이 나타나면 데이터바인딩을 클릭합니다. 데이터바인딩만들기 대화 상자가 열립니다.

6. 요소속성 탭에서 장면요소 아래에 표시되는 요소 트리에서 Slider를 선택합니다.

7. 요소속성 탭의 표시 드롭다운 목록에서 모든 속성을 선택한 다음 속성에서 **값 : (Double)**을 선택합니다. 그러면 레이블의 콘텐츠가 슬라이더의 값에 바인딩됩니다.

8. 데이터바인딩만들기 대화 상자에서 확장  단추를 클릭하여 고급 설정을 확인합니다.

9. 값변환기 드롭다운 상자 옆에 있는 새값변환기추가 단추를 클릭합니다. 값변환기추가 대화 상자가 열립니다.

10. 프로젝트 이름과 Microsoft.Expression.Samples 네임스페이스를 확장하고 DoubleToIntegerValueConverter를 선택한 다음 확인을 클릭합니다.

    팁:
    값 변환기가 표시되지 않으면 프로젝트에 원본 파일을 추가했는지, 프로젝트를 빌드했는지(Ctrl+Shift+B) 확인합니다.

11. 데이터 바인딩 만들기 대화 상자에서 마침을 클릭합니다. 이제 첫 번째 Label 개체에 슬라이더의 정수 표현이 표시됩니다.

    [!참고]

    슬라이더 개체에 Slider라는 이름을 지정했습니다. 데이터 바인딩을 수행하는 경우처럼 응용 프로그램의 다른 위치에서 개체를 참조하려면 응용 프로그램의 개체에 이름을 지정해야 합니다. Expression Blend에서는 이름이 자동으로 설정됩니다.

12. 두 번째 레이블에 대해 5단계부터 11단계를 반복합니다. 단, 값 변환기 추가 대화 상자에서는 DoubleToRomanNumeralValueConverter를 선택합니다.

13. 프로젝트를 테스트합니다(F5 키). 슬라이더를 이동하여 두 레이블에서 값이 업데이트되는지 확인합니다.

맨 위로 이동