XAML Binding Converters(Dönüştürücüler)

Merhaba arkadaşlar,

Bu yazımda Windows Store, WPF ve Windows Phone platformlarında uygulama geliştirirken kullanabileceğiniz Converter’lara değineceğim.

Converter nedir
Converter adı üstünde dönüştürme işlemi yapan nesnelerdir.

Converter’lar System.Windows.Data namespace’i altında bulunan IValueConverter arayüzünden türerler.
IValueConverter‘in imza yapısı;

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture);
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture);

Converterlar neden kullanılır
Sınıfların Propertylerini UI’da kendi istediğimiz formatta görüntülemek için Converter kullanırız. Bir nevi ToString() metodunu ezmek gibi düşünebiliriz.

Üç adımda converter kullanımı:

  1. IValueConver arayüzünden türemiş bir sınıf oluşturulur ve metodlar gerektiği şekilde düzenlenir.
class OrnekConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            //gerekli dönüştürmeler ve return
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException(); //ConvertBack metodu çevrilen değeri eski haline getirmek içindir.
        }
    }

 

2. Oluşturulan converter sınıfını xaml sayfada kullanmak için XAML sayfasına Converter sınıfı StaticResource olarak gömülür.

 xmlns:local="clr-namespace:ProjeIsmi"
 
 <phone:PhoneApplicationPage.Resources>
        <local:OrnekConverter x:Key="ornekConverter1"></local:OrnekConverter>
 </phone:PhoneApplicationPage.Resources>

 

3. UI’da Propertyler görüntülenirken {Binding PropertyIsmi, Converter=ConverterIsmi} şeklinde bind edilir.

<TextBlock Text="{Binding OrnekProperty, Converter={StaticResource ornekConverter1}}"/>

Örnek Uygulama
Bir alışveriş uygulaması geliştirdiğinizi varsayalım. Ürünleri UI’da listelerken ürün ismi, kategorisi ve fiyat bilgileriyle listelediğimizi varsayalım. Ürünleri listelerken doğrudan Fiyat isimli Property’ye bind ettiğimizde
sadece TL cinsinden değeri yazacaktır. Ama sonunda TL ibaresi
olmayacaktır ki bu kesinlikle istemediğimiz bir durum.

İşte bu gibi durumlarda Converter’lar devreye giriyor. Hemen örneğimize başlayalım.

  • Visual Studio’da BindingConverters isimli bir Windows Phone, WPF veya Windows Store projesi oluşturalım
  • Projeye sağ tıklayıp Add -> New Class adımından bir sınıf ekleyelim ve ismine Urun.cs verelim.
  • Kullanacağim Urun.cs sınıfı:
public class Urun
    {
        public string Isim { get; set; }
        public string Kategori { get; set; }
        public int Fiyat { get; set; }

        public static List<Urun> urunGetir()
        {
            List<Urun> urunler = new List<Urun>();
            urunler.Add(new Urun { Isim = "Notebook", Kategori = "Elektronik", Fiyat = 1300 });
            urunler.Add(new Urun { Isim = "Tost Makinesi", Kategori = "Ev eşyaları", Fiyat = 220 });
            urunler.Add(new Urun { Isim = "Parfüm", Kategori = "Kozmetik", Fiyat = 80 });

            return urunler;
        }
    }

Örnek veri kullanmak için urunGetir() isimli bir statik metot tanımladım.

  • Converter sınıfımızı oluşturalım. Projeye sağ tıklayıp Add -> New Class diyelim ve sınıfa FiyatConverter ismini verelim.

FiyatConverter.cs : 

 public class FiyatConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return value.ToString() + " ₺";
        }

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

 

Fiyat isimli Property value parametresiyle geliyor biz de onu string’e çevirip sonuna ₺ ekleyip döndürüyoruz.

  • MainPage.xaml’in üstünde şöyle bir decleration eklememiz gerekecek,

 xmlns:local=”clr-namespace:BindingConverters”

local isimli ön etiket bizim projemizin ana dizinini ifade ediyor. Converter sınıfımızı da ana dizine ekleyeceğiz.

MainPage.xaml:

<phone:PhoneApplicationPage.Resources>
        <local:FiyatConverter x:Key="fConverter"></local:FiyatConverter>
</phone:PhoneApplicationPage.Resources>
 
  <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <ListBox x:Name="lstUrunler" ItemsSource="{Binding UrunDataSource}">
                <ListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="ListBoxItem">
                                    <Grid x:Name="grid" Background="#FF07B063" Height="100" Margin="0,0,0,2">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="60"></RowDefinition>
                                            <RowDefinition Height="*"></RowDefinition>
                                        </Grid.RowDefinitions>
                                        <TextBlock Grid.Row="0" Text="{Binding Isim}" Margin="12,0,0,0"></TextBlock>
                                        <TextBlock Grid.Row="0" Text="{Binding Fiyat, Converter={StaticResource fConverter}}" HorizontalAlignment="Right"></TextBlock>
                                        <TextBlock Grid.Row="1" Text="{Binding Kategori}" HorizontalAlignment="Right" FontStyle="Italic" Foreground="Black"></TextBlock>
                                    </Grid>
                                </ControlTemplate>
                            </Setter.Value>                            
                        </Setter>
                    </Style>
                </ListBox.ItemContainerStyle>
            </ListBox>
        </Grid>

 

 

  • Örnek verimizi ListBox’a bağlamak için de MainPage.xaml.cs‘i de şöyle yapalım.
 public partial class MainPage : PhoneApplicationPage
    {
        public static List<Urun> UrunDataSource = new List<Urun>(Urun.urunGetir());
        public MainPage()
        {
            InitializeComponent();
            this.DataContext = this;
        }
    }

 

Ve nihayet uygulamayı test ediyoruz.

1

Gördüğünüz gibi Urun sınıfımızın Fiyat propertyleri yalın bir şekilde değil de sonundaki ₺ sembolü ile birlikte görüntüleniyor.

Umarım faydalı olmuştur, bir sonraki yazıda görüşmek üzere.
   Örnek Proje Dosyası (BindingConverters.zip, 181 KB)

Fazlasını Oku