Windwos Phone yada Windows 8 app. dev.’da ItemSource ile uğraşıyorsanız emin olun muhakkak uygulamanın bir yerinde Converter’a ihtiyacınız olmuştur yada olacaktır. Peki nedir Converter, Ne işe yarar, Nasıl kullanılır ?
Converter kısaca ; ItemSource olarak verilen Data’ya Binding işleminden önce müdahale etmektir şeklinde tanımlayabiliriz.
Örneğin bir sayfa var ve o sayfada WebService’den gelen bir liste var elimizde ve içerisinde Product objesi ve objeninde ProductName ProductID ve Quantity bilgileri var diyelim. Servisten gelen bu response’u alıp bir WinPhone uygulamasında Binding ile ekrana taşımak istiyoruz. Binding le uğraşan arkadaşlar biliyorlardır buraya kadar hiçbir sorun yok direk olarak Listbox yada başka bir kontrole ItemSource verip gerekli Binding’ leri verdikten sonra ekranda kolayca göreceğizdir.
Peki ya müşteriden şöyle bir istek gelirse ; “Ben Qantity bilgisi sıfır gelen ürünlerin adet satırında sıfır değilde Not Available yazsın istiyorum” derse ne yapacağız ? Gereksiz yere Database'de ilgili tabloda alan açıp o bilgiyide orada saklayacak halimiz yok. İşte Converter bu ve benzeri durumlarda devreye giriyor ve işimizi kolaylaştırıyor. Şimdi yukarıda bahsettiğimiz case'i aşağıda olduğu gibi bir adet ConverterSample adında WinPhone projesi oluşturarak inceleyelim.
Öncelikle aşağıda olduğu gibi Producta adında bir class tanımlıyoruz.
public class Product
{
public int ProductID { get; set; }
public string ProductName { get; set; }
public int Quantity { get; set; }
}
Sornasında geriye List<Product> dönen GetAllProducts() adında metod yazıyoruz ve örnek ürünleri store ediyoruz.
public List<Product> GetAllProducts()
{
List<Product> _allProducts = new List<Product>();
_allProducts.Add(newProduct()
{
ProductID = 111,
ProductName = "Product 111",
Quantity = 124
});
_allProducts.Add(newProduct()
{
ProductID = 112,
ProductName = "Product 112",
Quantity = 75
});
_allProducts.Add(newProduct()
{
ProductID = 113,
ProductName = "Product 113",
Quantity = 47
});
_allProducts.Add(newProduct()
{
ProductID = 114,
ProductName = "Product 114",
Quantity = 32
});
_allProducts.Add(newProduct()
{
ProductID = 115,
ProductName = "Product 115",
Quantity = 0
});
_allProducts.Add(newProduct()
{
ProductID = 116,
ProductName = "Product 116",
Quantity = 4
});
return _allProducts;
}
Code behind da en son olarak Constructor içerisinde üstte yazdığımız metoddan dönen List’i alıp Xaml tarafta oluşturacağımız ListBox’a ItemSource olarak vereceğiz.
// Constructor
public MainPage()
{
InitializeComponent();
lb_products.ItemsSource = GetAllProducts();
}
Xaml tarafında ise Grid içerisinde Row, ve ListBox’ı oluşturup gerekli Bind işlemlerini yapıp projemizi çalıştırıyoruz ve aşağıdaki gibi bir görüntü alıyoruz.
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="Converter Expample" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
<TextBlock Text="Product List" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="250"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock
Grid.Row="0"
Grid.Column="0"
Text="ID"
FontWeight="Bold"/>
<TextBlock
Grid.Row="0"
Grid.Column="1"
Text="ProductName"
FontWeight="Bold"/>
<TextBlock
Grid.Row="0"
Grid.Column="2"
Text="Quantity"
FontWeight="Bold"/>
<ListBox
x:Name="lb_products"
Margin="0,60,0,0"
Width="480">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="250"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock
Grid.Row="0"
Grid.Column="0"
FontWeight="Bold"
Text="{Binding ProductID}"/>
<TextBlock
Grid.Row="0"
Grid.Column="1"
FontWeight="Bold"
Text="{Binding ProductName}"/>
<TextBlock
Grid.Row="0"
Grid.Column="2"
FontWeight="Bold"
Text="{Binding Quantity}"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Grid>
</phone:PhoneApplicationPage>
Yujkarıda olduğu gibi listbox'ımıza Itemsource olarak ürünlerimizi verdik ve Quantity bölümündeki bilgileri uygulamamızda gösterdik. ID'si 115 olan ürünün Quantity değeride "0" olarak geldi. Buraya kadar herşey güzel ancak müşteri bizden Quantity bölümünde sıfır olan ürünler için Not Available yazılmasını söyledi ama biz ekrana Service’den gelen datayı yazdırdık.
Converter için ilk olarak Projemize bir adet QuantityConverter adında class ekliyoruz ve class’ımıza IvalueConverter interface’ini uyarlıyoruz ve IvalueConverter Convert ve ConvertBack adında sahip olduğu 2 adet metodu class’ımıza ekleniyor.Biz şimdilik Convert metodunu kullanacağız. ConvertBack’in ne işe yaradığını ilerki yazılarda bahsedeceğiz. Convert metodunun içerisini aşağıda olduğu gibi değiştiriyoruz.
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
return (int)value == 0 ? "Not Available" : value.ToString();
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
Şimdi sırada yazmış olduğumuz Converter’ı Binding işlemine entegre etmek. Bunun için xaml tarafına yazmış olduğumuz Converter’ı tanıtmalıyız. İlk olarak xmlns:Converter="clr-namespace:ConverterSample" Converter adını verdiğimiz namespace’i eklemek ve en dıştaki Grid’in üstüne aşağıda olduğu gibi Converter’ı Resource olarak yazmak.
<phone:PhoneApplicationPage.Resources>
<ResourceDictionary>
<Converter:QuantityConverter x:Key="QuantityConverter"/>
</ResourceDictionary>
</phone:PhoneApplicationPage.Resources>
Son işlem olarak Quantity bilgisini Bind ettiğimiz yere QuantityConverter’ı yazmak,
<TextBlock
Grid.Row="0"
Grid.Column="2"
FontWeight="Bold"
Text="{Binding Quantity,Converter={StaticResource QuantityConverter}}"/>
