Xamarin.Forms 如何在資料繫結中，使用數值轉換器將來源資料經過轉換傳到目標

數值轉換器 (Value COnverter) 在開發以 XAML 為基礎的專案，並且在進行資料繫結的時候，是相當重要的一個應用，在這份筆記中，將會使用數值轉換器，針對所綁定的字串來源，經過數值轉換器之後，就可以轉換成為 Color 物件，並且綁定到目標控制項的屬性上。

如何開發數值轉換器的功能

1. 建立新類別，使用 IValueConverter 來實作兩個方法
2. public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 這個方法是最為重要的，通常，也只會實作這個方法。
   在這個方法內，資料繫結功能，會將來源資料傳入到 value 這個參數內，此時，只需要判斷這個物件的值是否為所需要的型別，並且值的內容為何，此時，就可以根據傳入的值，來回傳適當的顏色。
3. 在頁面內，需要在 ResourceDictionary 內，宣告要產生這個數值轉換器，使用這個方式來宣告。
   <local:ColorTypeToColorConverter x:Key="ColorTypeToColorConverter" />
   如此，在這個頁面之內，若需要使用這個數值轉換器，就可以使用 x:Key 所定義的值，引用這個數值轉換器。
4. 在 BoxView 的 Color 屬性中，定義其資料繫結，如下所示：
   Color="{Binding ColorType, Converter={StaticResource ColorTypeToColorConverter}}"
   在上方的 XAML 資料繫結宣告中，會將 Color 這個屬性與 ViewModel 內的 ColorType 的屬性綁定在一起，這個 ColorType 屬性為 string 類型，但是，經過了 Convert 轉換之後，就會回傳 Color 的物件。

ColorTypeToColorConverter.cs

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace XFIValueConverter
{
    class ColorTypeToColorConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var foo = value as string;
            if (foo == "1")
            {
                return Color.Red;
            }
            else if (foo == "2")
            {
                return Color.Blue;
            }
            else if (foo == "3")
            {
                return Color.Green;
            }
            else
            {
                return Color.Black;
            }
        }

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

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             xmlns:local="clr-namespace:XFIValueConverter"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="XFIValueConverter.Views.MainPage"
             Title="MainPage">

    <ContentPage.Resources>
        <ResourceDictionary>
            <local:ColorTypeToColorConverter x:Key="ColorTypeToColorConverter" />
        </ResourceDictionary>
    </ContentPage.Resources>

    <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
        <Label Text="輸入數值，可以變換顏色" />
        <Entry Text="{Binding ColorType, Mode=TwoWay}" />
        <BoxView Color="{Binding ColorType, Converter={StaticResource ColorTypeToColorConverter}}"
             WidthRequest="150" HeightRequest="150" />
    </StackLayout>
</ContentPage>

MainPageViewModel.cs

using Prism.Commands;
using Prism.Mvvm;
using Prism.Navigation;
using System;
using System.Collections.Generic;
using System.Linq;

namespace XFIValueConverter.ViewModels
{
    public class MainPageViewModel : BindableBase, INavigationAware
    {
        private string _title;
        public string Title
        {
            get { return _title; }
            set { SetProperty(ref _title, value); }
        }

        #region ColorType
        private string colorType;
        /// <summary>
        /// ColorType
        /// </summary>
        public string ColorType
        {
            get { return this.colorType; }
            set { this.SetProperty(ref this.colorType, value); }
        }
        #endregion

        public MainPageViewModel()
        {

        }

        public void OnNavigatedFrom(NavigationParameters parameters)
        {

        }

        public void OnNavigatedTo(NavigationParameters parameters)
        {
            if (parameters.ContainsKey("title"))
                Title = (string)parameters["title"] + " and Prism";
        }
    }
}