Silverlight实用窍门系列：46.深入了解Silverlight的IValueConverter和TypeConverter

 本文主要讲解如何使用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. //在载入数据的时候将数据转换为图片类型 
4. public object Convert(object value, Type targetType, object parameter, 
5. System.Globalization.CultureInfo culture) 
6. { 
7. try 
8. { 
9. Uri uri = new Uri((string)value, UriKind.RelativeOrAbsolute); 
10. BitmapImage img = new BitmapImage(uri); 
11. return img; 
12. } 
13. catch 
14. { 
15. return new BitmapImage(); 
16. } 
17. } 
18.  
19. //在页面上操作的时候，将图片类型转换为数据，这里只有再TwoWay的时候才有用 
20. public object ConvertBack(object value, Type targetType, object parameter, 
21. System.Globalization.CultureInfo culture) 
22. { 
23. BitmapImage img = value as BitmapImage; 
24. return img.UriSource.AbsoluteUri; 
25. } 
26. } 

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

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

TypeConverter的使用方法：

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

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

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

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

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

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

本文转自程兴亮 51CTO博客，原文链接:http://blog.51cto.com/chengxingliang/826741