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

運作截圖：

初始界面：

點選優秀按鈕之後：

點選及格按鈕之後：

點選不及格按鈕：