本文主要讲解如何使用IValueConverter和TypeConverter。我们通过两个思考问题来引入如何使用IValueConverter和TypeConverter!

        IValueConverter主要用于将数据源的数据转换为需要在界面上显示的数据,例如:将Url地址转换为图片显示到界面上、将float类型数据显示为货币类型、bool值和Visibility转换等等。

        TypeConverter主要用于在XAML代码中的字符串类型转换为其他类型的数值,比如将一段字符串转为Double类型以供Width属性使用。

思考一:我的数据集合的其中一个集合中的属性为某个图片的URL,如何将这个URL地址转换为图片显示到DataGrid行中呢?

IValueConverter的使用方法:

        一、首先编写一个ImageConverter类型,此类继承于IValueConverter接口,然后实现此接口的Convert和 ConvertBack方法。注意Convert方法是将数据源的数据转为需要显示的数据,而ConvertBack方法用于将显示出来的数据在 TwoWay模式下回传给数据源。如下面的代码以编制:

  1. public class ImageConverter : IValueConverter 
  2. //在载入数据的时候将数据转换为图片类型 
  3. public object Convert(object value, Type targetType, object parameter, 
  4. System.Globalization.CultureInfo culture) 
  5. try 
  6. Uri uri = new Uri((string)value, UriKind.RelativeOrAbsolute); 
  7. BitmapImage img = new BitmapImage(uri); 
  8. return img; 
  9. catch 
  10. return new BitmapImage(); 
  11.  
  12. //在页面上操作的时候,将图片类型转换为数据,这里只有再TwoWay的时候才有用 
  13. public object ConvertBack(object value, Type targetType, object parameter, 
  14. System.Globalization.CultureInfo culture) 
  15. BitmapImage img = value as BitmapImage; 
  16. return img.UriSource.AbsoluteUri; 

        二、在UserControl的资源中申明ImageConverter以供DataGrid的数据源绑定时转换数据

  1. <UserControl.Resources> 
  2. <this:ImageConverter x:Key="ImageCoverter"/> 
  3. </UserControl.Resources> 

        三、在DataGrid中使用Converter转换,代码如下:

  1. <sdk:DataGrid HorizontalAlignment="Left" AutoGenerateColumns="False" Name="ShowCityList" VerticalAlignment="Top" > 
  2. <sdk:DataGrid.Columns> 
  3. <sdk:DataGridTextColumn Header="省会" Binding="{Binding AddrName}" IsReadOnly="True"/> 
  4. <sdk:DataGridTextColumn Header="城市" Binding="{Binding CityName}" IsReadOnly="True" /> 
  5. <sdk:DataGridTextColumn Header="电话区号" Binding="{Binding TelNum}" IsReadOnly="True" /> 
  6. <sdk:DataGridTemplateColumn Header="城市图片"
  7. <sdk:DataGridTemplateColumn.CellTemplate> 
  8. <DataTemplate> 
  9. <Image Source="{Binding CityImageUrl, Mode=TwoWay, Converter={StaticResource ImageCoverter}}"></Image> 
  10. </DataTemplate> 
  11. </sdk:DataGridTemplateColumn.CellTemplate> 
  12. </sdk:DataGridTemplateColumn> 
  13. </sdk:DataGrid.Columns> 
  14. </sdk:DataGrid> 

        四、为这个DataGrid绑定数据源如下代码:

 

  1. public partial class MainPage : UserControl 
  2. public MainPage() 
  3. InitializeComponent(); 
  4. List<CityInformation> listCity = new List<CityInformation>() 
  5. new CityInformation(){ 
  6. AddrName="四川"
  7. CityName="成都"
  8. TelNum="028-28884482"
  9. CityImageUrl="http://sc.admin5.com/uploads/allimg/100211/105R34217-0.png" 
  10. }, 
  11. new CityInformation() 
  12. AddrName="广东"
  13. CityName="广州"
  14. TelNum="021-22332884"
  15. CityImageUrl="http://sc.admin5.com/uploads/allimg/100211/105R333J-4.png" 
  16. }, 
  17. new CityInformation() 
  18. AddrName="上海"
  19. CityName="上海"
  20. TelNum="020-33245566"
  21. CityImageUrl="http://sc.admin5.com/uploads/allimg/100211/105R31S6-9.png" 
  22. }, 
  23. new CityInformation() 
  24. AddrName="北京"
  25. CityName="北京"
  26. TelNum="010-77534222"
  27. CityImageUrl="http://sc.admin5.com/uploads/allimg/100211/105R33342-7.png" 
  28.  
  29. }; 
  30.  
  31. this.ShowCityList.ItemsSource = listCity; 
  32.  
  33. /// <summary> 
  34. /// 城市信息的实体类 
  35. /// </summary> 
  36. public class CityInformation 
  37. private string _AddrName; 
  38. private string _CityName; 
  39. private string _TelNum; 
  40. private string _cityImageUrl; 
  41. public string AddrName 
  42. get { return _AddrName; } 
  43. set { _AddrName = value; } 
  44. public string CityName 
  45. get { return _CityName; } 
  46. set { _CityName = value; } 
  47. public string TelNum 
  48. get { return _TelNum; } 
  49. set { _TelNum = value; } 
  50. public string CityImageUrl 
  51. get { return _cityImageUrl; } 
  52. set { _cityImageUrl = value; } 

思考二:我需要做一个自定义控件,自定义控件是以厘米为单位来设置其宽度,而不是以像素为单位来设置,应该如何实现?

TypeConverter的使用方法:

        一、编写一个SLConverter类型继承于TypeConverter类,重写了CanConvertFrom方法和ConvertFrom方法将XAML中的String类型的数据转换为Double类型赋值给自定义控件。

  1. public class CustomLengthConverter : TypeConverter 
  2. //返回一个值,该值指示类型转换器能否将指定类型的对象转换为此转换器的类型 
  3. public override bool CanConvertFrom(ITypeDescriptorContext context, Type sourceType) 
  4. if (sourceType == typeof(string)) 
  5. return true
  6. return base.CanConvertFrom(context, sourceType); 
  7. //从指定值转换为此转换器的预期转换类型。 
  8. public override object ConvertFrom(ITypeDescriptorContext context, CultureInfo culture, object value) 
  9.  
  10. if (value == null
  11. return new Double(); 
  12. if (value is string) 
  13. string s = (string)value; 
  14. if (s.Length == 0) 
  15. return new Double(); 
  16. //将流入的字符串分割为两部分,使用第一部分2cm*40=80=设置的像素 
  17. string[] arguments = s.Split(' '); 
  18. if (arguments.Length != 2) 
  19. return new Double(); 
  20. else 
  21. //假设1cm=40px 
  22. return InternalParseInput((double.Parse(arguments[0])*40).ToString()); 
  23.  
  24. return base.ConvertFrom(context, culture, value); 
  25. //将String数据格式化为Double类型数据返回给属性 
  26. public Double InternalParseInput(String inputString) 
  27. Double doubleValue; 
  28.  
  29. try 
  30. doubleValue = Double.Parse(inputString); 
  31. catch (Exception) 
  32. doubleValue = new Double(); 
  33.  
  34. return doubleValue; 

        二、编写一个自定义控件RichTextBlock,并且为这个自定义控件新增了两个自定义属性,其中一个是将cm转换为px以显示在屏幕上,这里使用TypeConverter的特性如下代码:

  1. public partial class RichTextBlock : UserControl 
  2. public RichTextBlock() 
  3. InitializeComponent(); 
  4.  
  5. [TypeConverter(typeof(CustomLengthConverter))] 
  6. public Double txtWidth 
  7. get { return this.txtBlock.Width; } 
  8. set { this.txtBlock.Width = value; } 
  9.  
  10. public Double txtHeight 
  11. get { return this.txtBlock.Height; } 
  12. set { this.txtBlock.Height = value; } 

        三、在引用这个自定义控件的时候可以设置其自定义属性如下代码所示:

<this:RichTextBlock VerticalAlignment="Top" txtHeight="150" txtWidth="2 cm" />

        最后我们来看代码运行的效果图如下,另外如需源码请点击 SLConverter.zip 下载。