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();
        }
    }
}

運行截圖：

初始界面：

點擊優秀按鈕之後：

點擊及格按鈕之後：

點擊不及格按鈕：