數值轉換器 (Value COnverter) 在開發以 XAML 為基礎的專案，並且在進行資料繫結的時候，是相當重要的一個應用，在這份筆記中，將會使用數值轉換器，針對所綁定的字串來源，經過數值轉換器之後，就可以轉換成為 Color 物件，並且綁定到目標控制項的屬性上。
如何開發數值轉換器的功能
- 建立新類別，使用 IValueConverter 來實作兩個方法
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)這個方法是最為重要的，通常，也只會實作這個方法。在這個方法內，資料繫結功能，會將來源資料傳入到 value 這個參數內，此時，只需要判斷這個物件的值是否為所需要的型別，並且值的內容為何，此時，就可以根據傳入的值，來回傳適當的顏色。- 在頁面內，需要在
ResourceDictionary內，宣告要產生這個數值轉換器，使用這個方式來宣告。<local:ColorTypeToColorConverter x:Key="ColorTypeToColorConverter" />如此，在這個頁面之內，若需要使用這個數值轉換器，就可以使用 x:Key 所定義的值，引用這個數值轉換器。 - 在 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";
}
}
}
