Bağlı Değer Dönüştürücüleri – Binding Value Converters

Xamarin.Forms, bağlanmış verileri kullanırken StringFormat özelliğiyle metinlerin üzerinde bir miktar değişiklik yapmanıza izin verir. Ama bağlı veriniz metin olmayabilir veya StringFormat özelliğini kullanmak sorununuzu çözmeyebilir. Bu durumda bağlanmış veri dönüştürücülerini (Binding Value Converters) kullanabilirsiniz. Bir bağlanmış veri dönüştürücüsü basitçe IValueConverter arabirimini gerçekleştiren bir sınıftır. Bağlı değeri, hatta bağlı değerin türünü bile değiştirebilirsiniz.

Aşağıdaki ekran görüntüsü, CodeCanyon’da satılan E-Commerce App UI Template for MAUI and Xamarin Forms adlı UI şablonuma aittir. Bu uygulama, eğer incelenen ürün kullanıcının favorilerinden biriyse içi dolu bir kalp değilse içi boş bir kalp göstermektedir. Ama modelde ürünün favori olup olmadığı bir bool alanda saklanmaktadır.

Şimdi kaynaklarımızda iki adet görüntümüzün olduğunu varsayalım: İçi dolu ve içi boş kalp. İsimleri sırasıyla “full_heart” ve “empty_heart” olsun. Modelimizde “IsFavorite” adında bir alan olduğunu ve favori ürünler için “true” değerini içerdiğini farzedelim. Yazacağımız dönüştürücü sınıf IValueConverter arabirimini gerçeklemek zorundadır. Bu arabirim de iki adet metod içermektedir: “Convert” ve “ConvertBack”. Bildiğiniz gibi veri bağlama iki yönlü olabilmektedir. Modelden görünüme veya görünümden modele doğru. ConvertBack metodu görünümden modele dönüştürme yapılacağı zaman kullanılmaktadır. Yani pratikte pek gerekli değildir. Convert metodunun ilk parametresi olan “value” bağlanmış verinin kendisidir. Her türlü veriyle çalışabilmesi için bu parametre “object” tipindedir. Yani onu kullanmadan önce doğru türe çevirmeliyiz. Örneğimizde bu değer bool’dur. “value” parametresinin, true veya false olmasına göre dolu veya boş kalp imajının adını döndürüyoruz. Geri dönüş değeri de “object” türünden olduğu için string döndürmemizde bir sakınca yok. bool türünden bir değer alan ve string türünden bir değer döndüren bu dönüştürücünün kodları aşağıdadır.

using Xamarin.Forms;

namespace EcommerceTemplate.Converters
{
    public class FavoriteConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return (bool)value ? "full_heart" : "empty_heart";
        }

        // It is unnecessary to implement.
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

Dönüştürücüyü kullanmak ta yazmak kadar kolaydır. Onu kullanmak istediğimiz görünüme kaynak olarak ekliyoruz. Sonra veri bağlama sırasında Converter özelliğine atıyoruz.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:converter="clr-namespace:EcommerceTemplate.Converters"
...
    <ContentPage.Resources>
        <converter:FavoriteConverter x:Key="FavoriteConverter"/>
    </ContentPage.Resources>
...
   
    <Image Source="{Binding IsFavorite, Converter={StaticResource FavoriteConverter}}"/>
...

Bu “Image” bileşeni, modeldeki IsFavorite özelliğine bağlı olarak içi dolu veya boş bir kalp gösterecektir.