[X.Form] IValueConverter - 顯示圖檔

Source 資料無法被 UI 的 View 直接使用，因此必須透過 IValueConverter 來進行資料型別轉換，IValueConverter 有兩個方法

• Convert：Source => Target 轉換
• ConvertBack：Target => Source 轉換

namespace Xamarin.Forms
{

    // Interface defining methods for two-way value conversion between types.
    public interface IValueConverter
    {
        // Implement this method to convert value to targetType by using parameter and culture.
        object Convert(object value, Type targetType, object parameter, CultureInfo culture);

        //     Implement this method to convert value back from targetType by using parameter and culture.
        object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture);
    }
}

本篇是利用圖檔名稱透過 IValueConverter 轉換為 ImageResource 來 Binding Image View 來練習

IValueConverterData Class

// 要使用 IValueConverter 要引用該 namespace
using Xamarin.Forms;

namespace DataBindingPractice
{
    public class IValueConverterData
    {
        public string Photo { get; set; }

        public IValueConverterData()
        {
            this.Photo = "maple.jpg";
        }
    }

    public class ImageNameConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            string ImageName = value.ToString();
            return ImageSource.FromResource($"DataBindingPractice.{ImageName}");
        }

       // ConvertBack 只有 Binding Mode 設為 TwoWay 或 OneWayToSource 時才有使用
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

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:local="clr-namespace:DataBindingPractice"
             x:Class="DataBindingPractice.XF7_IValueConvert">
    <ContentPage.Resources>
        <ResourceDictionary>
            <local:ImageNameConverter x:Key="cntImageName"></local:ImageNameConverter>
        </ResourceDictionary>
    </ContentPage.Resources>

    <ContentPage.Content>
        <StackLayout>
            <Image 
                x:Name="img" 
                Source="{
                    Binding Photo ,
                    Converter={StaticResource Key=cntImageName}}"></Image>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

C# 寫法

namespace DataBindingPractice
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class XF7_IValueConvert : ContentPage
    {
        public XF7_IValueConvert()
        {
            var Data = new IValueConverterData();
            BindingContext = Data;

            InitializeComponent();

            img.SetBinding(Image.SourceProperty, nameof(Data.Photo), converter: new ImageNameConverter());
        }
    }
}

延伸閱讀
• [X.Form] Image - 內嵌資源

參考資料
• Xamarin.Forms.IValueConverter
• Xamarin.Forms-帶領你用最有效率的方式開發APP
• Xamarin.Forms 教學系列文（十六.貳） BindingMode & StringFormat & BindingConverter
• 官網討論