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模式下回传给数据源。如下面的代码以编制:

public class ImageConverter : IValueConverter
{
//在载入数据的时候将数据转换为图片类型
public object Convert(object value, Type targetType, object parameter,
System.Globalization.CultureInfo culture)
{
try
{
Uri uri
= new Uri((string)value, UriKind.RelativeOrAbsolute);
BitmapImage img
= new BitmapImage(uri);
return img;
}
catch
{
return new BitmapImage();
}
}

//在页面上操作的时候,将图片类型转换为数据,这里只有再TwoWay的时候才有用
public object ConvertBack(object value, Type targetType, object parameter,
System.Globalization.CultureInfo culture)
{
BitmapImage img
= value as BitmapImage;
return img.UriSource.AbsoluteUri;
}
}
        二、在UserControl的资源中申明ImageConverter以供DataGrid的数据源绑定时转换数据
<UserControl.Resources>
<this:ImageConverter x:Key="ImageCoverter"/>
</UserControl.Resources>
        三、在DataGrid中使用Converter转换,代码如下:
<sdk:DataGrid HorizontalAlignment="Left" AutoGenerateColumns="False" Name="ShowCityList" VerticalAlignment="Top" >
<sdk:DataGrid.Columns>
<sdk:DataGridTextColumn Header="省会" Binding="{Binding AddrName}" IsReadOnly="True"/>
<sdk:DataGridTextColumn Header="城市" Binding="{Binding CityName}" IsReadOnly="True" />
<sdk:DataGridTextColumn Header="电话区号" Binding="{Binding TelNum}" IsReadOnly="True" />
<sdk:DataGridTemplateColumn Header="城市图片">
<sdk:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Image Source="{Binding CityImageUrl, Mode=TwoWay, Converter={StaticResource ImageCoverter}}"></Image>
</DataTemplate>
</sdk:DataGridTemplateColumn.CellTemplate>
</sdk:DataGridTemplateColumn>
</sdk:DataGrid.Columns>
</sdk:DataGrid>

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

public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
List
<CityInformation> listCity = new List<CityInformation>()
{
new CityInformation(){
AddrName
="四川",
CityName
="成都",
TelNum
="028-28884482",
CityImageUrl
="http://sc.admin5.com/uploads/allimg/100211/105R34217-0.png"
},
new CityInformation()
{
AddrName
="广东",
CityName
="广州",
TelNum
="021-22332884",
CityImageUrl
="http://sc.admin5.com/uploads/allimg/100211/105R333J-4.png"
},
new CityInformation()
{
AddrName
="上海",
CityName
="上海",
TelNum
="020-33245566",
CityImageUrl
="http://sc.admin5.com/uploads/allimg/100211/105R31S6-9.png"
},
new CityInformation()
{
AddrName
="北京",
CityName
="北京",
TelNum
="010-77534222",
CityImageUrl
="http://sc.admin5.com/uploads/allimg/100211/105R33342-7.png"
}

};

this.ShowCityList.ItemsSource = listCity;

}
}
/// <summary>
/// 城市信息的实体类
/// </summary>
public class CityInformation
{
private string _AddrName;
private string _CityName;
private string _TelNum;
private string _cityImageUrl;
public string AddrName
{
get { return _AddrName; }
set { _AddrName = value; }
}
public string CityName
{
get { return _CityName; }
set { _CityName = value; }
}
public string TelNum
{
get { return _TelNum; }
set { _TelNum = value; }
}
public string CityImageUrl
{
get { return _cityImageUrl; }
set { _cityImageUrl = value; }
}
}

 

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

TypeConverter的使用方法:

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

public class CustomLengthConverter : TypeConverter
{
//返回一个值,该值指示类型转换器能否将指定类型的对象转换为此转换器的类型
public override bool CanConvertFrom(ITypeDescriptorContext context, Type sourceType)
{
if (sourceType == typeof(string))
{
return true;
}
return base.CanConvertFrom(context, sourceType);
}
//从指定值转换为此转换器的预期转换类型。
public override object ConvertFrom(ITypeDescriptorContext context, CultureInfo culture, object value)
{

if (value == null)
{
return new Double();
}
if (value is string)
{
string s = (string)value;
if (s.Length == 0)
{
return new Double();
}
//将流入的字符串分割为两部分,使用第一部分2cm*40=80=设置的像素
string[] arguments = s.Split(' ');
if (arguments.Length != 2)
{
return new Double();
}
else
{
//假设1cm=40px
return InternalParseInput((double.Parse(arguments[0])*40).ToString());
}
}

return base.ConvertFrom(context, culture, value);
}
//将String数据格式化为Double类型数据返回给属性
public Double InternalParseInput(String inputString)
{
Double doubleValue;

try
{
doubleValue
= Double.Parse(inputString);
}
catch (Exception)
{
doubleValue
= new Double();
}

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

[TypeConverter(
typeof(CustomLengthConverter))]
public Double txtWidth
{
get { return this.txtBlock.Width; }
set { this.txtBlock.Width = value; }
}

public Double txtHeight
{
get { return this.txtBlock.Height; }
set { this.txtBlock.Height = value; }
}
}
        三、在引用这个自定义控件的时候可以设置其自定义属性如下代码所示:
<this:RichTextBlock VerticalAlignment="Top" txtHeight="150" txtWidth="2 cm" />

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

posted @ 2011-07-12 10:04  程兴亮  阅读(3468)  评论(6编辑  收藏