MVVM架构浅谈 – IValueConverter

如果想要在界面绑定属性的时候,想要实现绑定的ViewModel数据类型和界面的数据类型不同,并实现相互的转换。举个简单的例子,在邮件系统的数据库设计的时候,邮件状态0表示未读,1表示已读,但是我们希望未读的时候显示未读标识图片,已读时候图片消失。这时候就需要使用数据转换器来实现了,也就是下面要说的IValueConverter。所谓的转换器就是通过一个条件或者一个类型,转换成另一种结果或者类型。
IValueConverter接口中有两个方法,Convert和ConvertBack。Convert函数表示从数据源到目标的值转换,ConvertBack函数表示从目标到数据源的值转换。因此如果绑定模式是一次绑定或者单向绑定,只需要实现Convert函数;如果绑定模式是双向绑定,需要实现Convert和ConvertBack函数。

下面实现一个邮件标记到图片的转换器:

[ValueConversion(typeof(int), typeof(string))]
public class MailStatusConverter: IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        int statusValue= Convert.ToInt32(value);
        if(statusValue==0)
        {
            return "unread.png";
        }
        return "read.png";
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        string strValue=value.ToString();
        if(strValue=="unread.png") return 0;
        return 1;
    }
}

完成了转换器之后需要在Xaml中运用到。首先要引用转换器命名空间,

xmlns:local="clr-namespace:xxx"

如果是在UWP中将“clr-namespace”换成“Using”,之后创建资源,

<Page.Resources>
    <local:MailStatusConverter x:Key="converter">
</Page.Resources>

最后绑定数据。

<Image source="Binding ReadState,Converter={StaticResource converter},Mode=OneWay" Width="15" Height="15">
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s