Windows Phone 8.1中绑定数据转换

生活中虽然处处充斥着数学，但是生活并不是数学。生活中处处充斥着逻辑思维，但是更直观的表达往往更加易于理

解和接受。比如问今天天气怎么样，如果给你一大堆天气预报专业用语：晴，40度等等，虽然能让人理解，但是比较

生硬。如果换成更加直观的方式，比如将晴天转换成太阳的图片，40度对应着一个硕大的不断流汗的温度计，度数指

向40度，像这样就能让人一眼就知晓今天的天气情况。同样将成绩90分以上显示为笑脸，及格显示为不小不哭脸，

将不及格显示为哭脸，都比较直观。

好了，上面废话说了一大堆，根本上就是，在做应用的时候，如果给用户呈现一大堆数据的话会显得应用很生硬毫无

生气，并且会让用户不耐烦，用户体验下降。而取而代之的是直观的图像或者图标，在不影响数据反映的同时，又能

抓住用户的吸引力，这才是应用最关键的。

具体解决方案：绑定数据转换需要通过Binding的Converter属性来实现。此属性用来获取或设置转换器对象，当数据

在目标和源之内传递时，绑定引擎调用该对象修改数据。通过创建数据源类和实现一个IValueConverter接口针对不

同的需求自定义转换器。

转换器是派生自IValueConverter接口的类，包含了Convert和ConvertBack两种方法。从源绑定给目标会调用

Convert方法，从目标反映到源会调用ConvertBack方法。

应用示例：代码说明，新建类文件Score.cs，数据源是Score类，并实现INotifyPropertyChanged通知机制；新建类

ScoreToFaceConverter.cs，并实现值转换接口IValueConverter。

在XAML文件中引用.cs文件的步骤：将.cs作为资源在XAML中定义

<Page.Resource>

    <local:ScoreToFaceConverter x:Key="scoreToFaceConverter" />

</Page.Resource>

DataBindDemo2的XAML代码：

<Page
    x:Class="App1.DataBindDemo2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    
    <Page.Resources>
        <local:GradeToFaceConvert x:Key="gradeToFaceConvert" />
    </Page.Resources>

    <Grid>
        <StackPanel>
            <TextBlock Text="{Binding Score}" HorizontalAlignment="Center" FontSize="30" />
            <Image Source="{Binding Score,Converter={StaticResource gradeToFaceConvert}}" Stretch="UniformToFill" />
            <Button x:Name="good" Content="优秀" Click="good_Click" />
            <Button x:Name="normal" Content="及格" Click="normal_Click" />
            <Button x:Name="bad" Content="不及格" Click="bad_Click" />
        </StackPanel>
    </Grid>
</Page>
           

DataBindDemo2的.CS代码：

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// “空白页”项模板在 http://go.microsoft.com/fwlink/?LinkID=390556 上有介绍

namespace App1
{
    /// <summary>
    /// 可用于自身或导航至 Frame 内部的空白页。
    /// </summary>
    public sealed partial class DataBindDemo2 : Page
    {
        Grade grade = new Grade() { Score = 100 };

        public DataBindDemo2()
        {
            this.InitializeComponent();

            this.DataContext = grade;
        }

        /// <summary>
        /// 在此页将要在 Frame 中显示时进行调用。
        /// </summary>
        /// <param name="e">描述如何访问此页的事件数据。
        /// 此参数通常用于配置页。</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }

        private void good_Click(object sender, RoutedEventArgs e)
        {
            grade.Score = 98;
        }

        private void normal_Click(object sender, RoutedEventArgs e)
        {
            grade.Score = 70;
        }

        private void bad_Click(object sender, RoutedEventArgs e)
        {
            grade.Score = 50;
        }
    }
}
           

数据源Grade类，实现INotifyPropertyChanged接口：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace App1
{
    public class Grade:INotifyPropertyChanged
    {
        private int score;
        public event PropertyChangedEventHandler PropertyChanged;

        public int Score
        {
            get
            {
                return score;
            }
            set
            {
                score = value;
                OnPropertyChanged(new PropertyChangedEventArgs("Score"));
            }
        }

        protected virtual void OnPropertyChanged(PropertyChangedEventArgs args)
        {
            if(PropertyChanged != null)
            {
                PropertyChanged(this, args);
            }
        }
    }
}
           

转换GradeToFaceConvert类，实现IValueConverter接口：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.UI.Xaml.Data;

namespace App1
{
    public class GradeToFaceConvert:IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, string language)
        {
            if(int.Parse(value.ToString())>=90)
            {
                return "ms-appx:///Assets/Images/1.jpg";
            }
            else if(int.Parse(value.ToString())<60)
            {
                return "ms-appx:///Assets/Images/3.jpg";
            }
            else
            {
                return "ms-appx:///Assets/Images/2.jpg";
            }
        }

        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            throw new NotImplementedException();
        }
    }
}
           

运行截图：

初始界面：

点击优秀按钮之后：

点击及格按钮之后：

点击不及格按钮：