Daron Yöndem

Silverlight 3.0 içerisinde görsel veri validasyonu.

Daron Y�ndem Blog — Fri, 03 Jul 2009 15:16:38 GMT

Silverlight içerisinde veri validasyonu konusunda validasyon kontrollerimiz yok gibi gözükse de aslında arka planda işimize yarayabilecek ilginç bir sistem var. Bu sistemi hem tasarımcı hem de yazılımcı beraber kullanırlarsa ortaya çok güzel sonuçlar çıkabilir. Bu yazımızda nesne bazlı veri validasyonunu nasıl yapabiliriz konusuna göz atacağız.

Hemen örneğimize başlama yoluna uygulamamızın ekranına bir DataGrid koyalım. Bir sonraki adımda uygun nesneleri yaratarak bu Grid'e bağlayacağız sonrasında da Grid içerisinde hücre başına validasyon yapmaya çalışacağız.

[XAML]

<UserControl xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

x:Class="SilverlightApplication81.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300">

<data:DataGrid x:Name="myGrid"></data:DataGrid>

</Grid>

</UserControl>

Görsel tarafı en azından şimdilik hallettiğimize göre hemen veri tarafına geçip işimizi görecek kadar örnek veri yaratalım. İlk olarak verimiz içerisinde her nesneyi tanımlayacak olan Urun sınıfını hazırlıyoruz.

[VB]

Public Class Urun

Private PAdi As String

Public Property Adi() As String

Get

Return PAdi

End Get

Set(ByVal value As String)

PAdi = value

End Set

End Property

Private PSatis As Integer

Public Property Satis() As Integer

Get

Return PSatis

End Get

Set(ByVal value As Integer)

PSatis = value

End Set

End Property

End Class

Göreceğiniz üzere Urun sınıfının sadece iki tane Property'si var. Bunlardan biri ürünün adını taşırken diğeri ise toplam satış rakamını taşıyacak. Bu sınıfımızdan bir liste yaratarak rastgele urunler ekleyip Grid'imize basit bir şekilde bağlayacağız.

[VB]

Private Sub MainPage_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded

Dim Liste As New List(Of Urun)

For index As Integer = 1 To 10

Liste.Add(New Urun() With {.Adi = "Ürün Adi" & index, .Satis = Rnd() * 50})

myGrid.ItemsSource = Liste

End Sub

Bütün bu manzara içerisinde bir anda aklınızda "ürün isimleri boş bırakılmasın" şeklinde bir validasyon geldiğini varsayalım. Peki ne yapacağız? Aslında konu tahmin edeceğinizden çok daha basit. İlk olarak validasyon işlemini yapabileceğimiz basit bir yer var, orası da Urun sınıfımızın Property'lerinin Set durumu.

[VB]

Private PAdi As String

Public Property Adi() As String

Get

Return PAdi

End Get

Set(ByVal value As String)

If String.IsNullOrEmpty(value) Then

Throw New ValidationException("isim boş geçilemez!")

Else

PAdi = value

End If

End Set

End Property

Yukarıdaki kod içerisinde sadece tek bir Property'nin set ve get durumunu görüyorsunuz. İlk baştaki örneğimizden farklı olarak Set işleminde gelen value'yu kontrol ediyoruz. Eğer Grid içerisinde bu Property'e denk gelen TextBox boş bırakılırsa doğan olarak arka tarafa grid boş değer döndürerek söz konusu nesnenin property'sini değiştirmeye çalışacak. İşte tam da o notkada devreye girip kontrolleri yapıp gerekiyorsa bir ValidationException fırlatıyoruz. Exception fırlatırken kullanıcıya vermek istediğimiz mesajı da parametre olarak constructor'a geçebiliriz.

Eğer projeyi bu hali ile Debug modunda açarsanız hatayı Debug tarafında görürsünüz. Oysa projeyi Debug mode yerine normal şekilde çalıştırırsanız aşağıdaki manzara ile karşılaşacaksınız.

Basit bir validasyon sonucu...

Gördüğünüz gibi manzara gerçekten çok hoş. Görsel olarak da güzel bir animasyon ile sahneye gelen bu tooltip çoğu validasyon ihtiyacınızı giderecektir. Grid içerisinde herhangi bir ek işleme gerek kalmadan validasyonu çalışır hale getirmiş olsak da farklı kontrollerde Binding ayarlarken vermeniz gereken ek parametreler de mevcut.

[XAML]

<UserControl xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

x:Class="SilverlightApplication81.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300">

<data:DataGrid x:Name="myGrid" AutoGenerateColumns="False">

<data:DataGrid.Columns>

<data:DataGridTemplateColumn>

<data:DataGridTemplateColumn.CellTemplate>

</DataTemplate>

</data:DataGridTemplateColumn.CellTemplate>

</data:DataGridTemplateColumn>

</data:DataGrid.Columns>

</data:DataGrid>

</Grid>

</UserControl>

Gridimizi yukarıdaki şekli ile biraz değiştirdik. Artık DataGrid ile beraber gelen hazır kolonları değil de özel kolon tasarımlarını kullandığımızı düşünelim. Bizim örneğimizde sadece Adi kolonunu ekledik ve bu kolonun tasarımına da bir TextBox koyduk. Böylece bu kolon sürekli TextBox olarak gözükecek. Peki acaba bu TextBox'ı da boş bıraktığımızda validasyon hatasını görebilecek miyiz? Maalesef hayır.

[XAML]

<UserControl xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

x:Class="SilverlightApplication81.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300">

<data:DataGrid x:Name="myGrid" AutoGenerateColumns="False">

<data:DataGrid.Columns>

<data:DataGridTemplateColumn>

<data:DataGridTemplateColumn.CellTemplate>

</DataTemplate>

</data:DataGridTemplateColumn.CellTemplate>

</data:DataGridTemplateColumn>

</data:DataGrid.Columns>

</data:DataGrid>

</Grid>

</UserControl>

Bu noktada değiştirmemiz gereken şey Binding mekanizmamızla alakalı ayarlar. İlk olarak Mode'u TwoWay yaparak buradaki değişikliklerin de nesne tarafına yansımasını sağlıyoruz ki nesne tarafındaki validasyon gerçekleşsin. Ayrıca NotifyOnValidationError ve ValidatesOnExceptions özelliklerini de True yaparak gerekli hataların gösterilmesini sağlıyoruz.

Özel binding ile validasyon.

Görselliği değiştirelim...

Herhangi bir kontrolün validation işlemi sonrasında InValid olması haline gösterilmek üzere InValid State'lerinin bulunması gerekir. Hali hazırda Silverlight içerisindeki çoğu kontrolde bu state'ler zaten hazır ve tasarımları yapılmış durumda. Eğer yukarıdaki örneğimizi Expression Blend ile açar ve TextBox'ın Template'ini editlemek isterseniz söz konusu menüde "Edit a copy" demeyi unutmayın.

TextBox kontolümüzü Template'ini kopyalayarak editleyelim.

Böylece Blend sizin yerinize standart şablonu kopyalayacaktır. Bunu yaptıktan sonra söz konusu şablonun için VisualStateManager'da InValid statelerini bulabilir ve bu stateler için hazırlanmış tasarımları değiştirebilirsiniz.

Blend içerisinde TextBox'a ait ayrı stateler...

State'ler arası tasarımları değiştirdikten sonra büyük ihtimal ile InValid durumunde gösterilen Tooltip'in de tasarımını değiştirebilmek isteyeceksiniz. Blend içerisinden şu an için (Blend 3 MIX Preview sürümü) bir çözüm bulunmasa da kod tarafından gerekli özelleştirmeleri yapabiliriz. Textbox'ımızın Template'inden bir kopya alıp editlerken aslında beraberindeki Tooltip'in tasarımının da bir kopyası uygulamamızın sayfasında Resource olarak saklanıyor.

[XAML]

<UserControl xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows" xmlns:System="clr-namespace:System;assembly=mscorlib" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

x:Class="SilverlightApplication81.MainPage" Width="400" Height="300" mc:Ignorable="d">

<UserControl.Resources>

<vsm:VisualStateManager.VisualStateGroups>

<vsm:VisualStateGroup x:Name="OpenStates">

<vsm:VisualStateGroup.Transitions>

<vsm:VisualTransition GeneratedDuration="0"/>

<vsm:VisualTransition GeneratedDuration="0:0:0.2" To="Open">

</DoubleAnimationUsingKeyFrames>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</vsm:VisualTransition>

</vsm:VisualStateGroup.Transitions>

<vsm:VisualState x:Name="Closed">

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</vsm:VisualState>

<vsm:VisualState x:Name="Open">

</DoubleAnimationUsingKeyFrames>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</vsm:VisualState>

</vsm:VisualStateGroup>

</vsm:VisualStateManager.VisualStateGroups>

<Grid.RenderTransform>

</Grid.RenderTransform>

</Border>

</Grid>

</ControlTemplate>

Yukarıdaki örnek uygulamaızın XAML kodunun ilk altmış satırını görebilirsiniz. Bu altmış satır içerisinde önemli olan şey ValidationToolTipTemplate adındaki ControlTemplate nesnesi. Söz konusu nesne TextBox'ın Template'i içerisinde de kullanılıyor. Aşağıdaki TextBox'ımızın Template'ine ait XAML kodu içerisinde yukarıdaki ControlTemplate'in nasıl kullanıldığını görebilirsiniz.

[XAML]

<ToolTipService.ToolTip>

<ToolTip.Triggers>

<DiscreteObjectKeyFrame.Value>

<System:Boolean>true</System:Boolean>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</ToolTip.Triggers>

</ToolTip>

</ToolTipService.ToolTip>

</Grid>

</Border>

TextBox'ın Template'i içerisinde bulunan bir Border nesnesine Tooltip kontrolü atanmış. Söz konusu Tooltip kontrolünün şablonu ise doğrudan ValidationToolTipTemplate adındaki şablonla eşleştirilmiş durumda. Böylece biz doğrudan ValidationToolTipTemplate nesnesini değiştirerek validasyon esnasında görülen Tooltip'i değiştirebiliriz.

[XAML]

</Border>

Yukarıdaki kesiti ValidationToolTipTemplate içerisinden aldım. Tooltip şablonu içerisinde buradaki Textblock'un Text'i görüldüğü üzere bir Binding ile beraber geliyor. Arkaplanda yolladığımız Exception'ların mesajlarının Tooltip içerisinde gözükmesini sağlayan sistem bu bindingden ibaret. Eğer burayı silersiniz mesajlarınız gözükmeyecektir o nedenle tasarımınızı değiştirirken bu noktaya dikkat etmekte fayda var.

Hepinize kolay gelsin.

Silverlight 3.0 içerisinde şeffaf videolar (Chrome Key Efekti)

Daron Y�ndem Blog — Thu, 02 Jul 2009 09:03:09 GMT

Silverlight içerisinde herhangi bir nesneye şeffaf fon vermek veya bir renk seçerken Alpha kanalını da ayarlamak mümkün fakat elinizde hali hazırda bir görsel varsa ve bu görsel içerisindeki belirli bir rengin şeffafa çevrilmesini istiyorsanız ne yapabilirsiniz?

Ne zaman lazım olacak ki?

"Chroma Key" denilen bu efektin en çok kullanıldığın yer fotoğraf veya videoların birleştirilmesi noktasında karşımıza çıkıyor. Örneğin koşan bir adam videosu var elinizde fakat bu adamı kendi fon görselinizde koşturmak istiyorsunuz. Bu durumda videonun fonunu silip yerine başka bir şeyler koyabiliyor olmanız gerekir. Aynı şey fotoğraflar için de geçerli. Tabi her konuda olduğu gibi bu konuda da belirli kurallar var. Bir şekilde bir resmin ve videonun fonunu silebilmek istiyorsanız aslında o videonun da uygun şekilde hazırlanmış olması gerekiyor.

Chroma Key'e uygun bir video.

Yukarıda görmüş olduğunuz kare bir videonun alınma. Fonun yeşil olması tabi ki şart değil. Bu notkada önemli olan şey video içerisinden almak istediğiniz obje ile fonun birbirine tezat renkler taşıması. Böylece bu videoyu gösterirken yeşil pikselleri bularak şeffaf hale çevirebileceğiz. Durum böyle olunca da rahatlıkla bu videonun arkasına başka bir video veya herhangi bir kontrol yerleştirebiliriz.

Peki nasıl yapacağız?

Bir video veya resim dosyasından bir rengi şeffaf hale getirmek için o dosyanın görselinde her pikseli tek tek gezmemiz gerekecek fakat özellikle video dosyalarından bahsedersek video içerisinde her kareyi de tek tek incelemek epey zahmetli olabilir. Oysa Silverlight 3.0 ile beraber gelen yeni özelliklerden biri olan PixelShader efektleri tam da bu iş için biçilmiş kaftan.

PixelShader efektleri zaten uygulandıkları görselin her pikseli gösterilmeden önce o pikseldeki renk değerlerine müdahale edebilen efektler şeklinde tasarlanıyor. Silverlight 3.0 ile Piksel Shader kullanımı makalemizde daha detaylı bilgi bulabilirsiniz.

Biz örneğimizde kullanmak üzere yeni bir PixelShader efekti yaratacağız. Bu efekt kendisine gelen her pikseli inceleyerek Chrome Key rengine yakın bir renk var ise o rengi şeffaf hale çevirecek. Tüm bu kontrol yapılırken tabi ki eldeki renk ile Chrome key renginin yakınlığı konusunda da bir parametre kullanmak durumundayız. Özetlemek gerekirse, eğer videomuzun fonu yeşil ile Chrome Key rengimiz de yeşil olacak ve PixelShader efektine yeşil rengini vereceğiz fakat duruma göre tam olarak RGB değerleri belli olan bir yeşil rengini değil de o yeşil rengine çok yakın diğer yeşilleri de şeffaflaştırmak isteyebiliriz. İşte bu yakınlık değerini Threshold denilen ayrı bir parametrede tutacağız.

[HLSL]

sampler2D input : register(S0);

float red : register(C0);

float green : register(C1);

float blue : register(C2);

float threshold : register(C3);

float4 main(float2 pos : TEXCOORD) : COLOR

{

float4 color;

float rkey, gkey, bkey, thresh;

thresh = threshold;

rkey = red/255.0;

gkey = green/255.0;

bkey = blue/255.0;

color = tex2D(input, pos);

if (abs(color.r - rkey) <= thresh)

{

if (abs(color.g - gkey) <= thresh)

{

if (abs(color.b - bkey) <= thresh)

{

// Şeffaflaştır

color.a = 0.0;

}

return color;

}

Yukarıdaki kod efektimizim HLSL ile yazılmış hali. Konumuz HLSL olmadığı için detaylarına girmeyeceğim. Önemli olan bu şekilde HLSL efektini yazdıktan sonra efekti compile edip ortaya çıkan PS dosyasını Silverlight ile kullanmak. PixelShader efektlerinin Silverlight ile kullanımı konusunda Silverlight 3.0 ile Piksel Shader makalesini incelemeyi unutmayın.

[C#]

public class AlphaShader : ShaderEffect

{

public AlphaShader()

{

this.PixelShader = new PixelShader();

this.PixelShader.UriSource = new Uri("/Alpha.ps", UriKind.Relative );

this.UpdateShaderValue(InputProperty);

this.UpdateShaderValue(RedProperty);

this.UpdateShaderValue(GreenProperty);

this.UpdateShaderValue(BlueProperty);

this.UpdateShaderValue(ThreshProperty);

}

public Brush Input

{

get { return (Brush)GetValue(InputProperty); }

set { SetValue(InputProperty, value); }

}

public static readonly DependencyProperty InputProperty = ShaderEffect.RegisterPixelShaderSamplerProperty("Input", typeof(AlphaShader), 0);

public static readonly DependencyProperty RedProperty = DependencyProperty.Register("Threshold", typeof(double), typeof(AlphaShader), new PropertyMetadata(0.0, PixelShaderConstantCallback(0)));

public static readonly DependencyProperty GreenProperty = DependencyProperty.Register("Red", typeof(double), typeof(AlphaShader), new PropertyMetadata(0.0, PixelShaderConstantCallback(1)));

public static readonly DependencyProperty BlueProperty = DependencyProperty.Register("Green", typeof(double), typeof(AlphaShader), new PropertyMetadata(0.0, PixelShaderConstantCallback(2)));

public static readonly DependencyProperty ThreshProperty = DependencyProperty.Register("Blue", typeof(double), typeof(AlphaShader), new PropertyMetadata(0.25, PixelShaderConstantCallback(3)));

public double Threshold

{

get { return (double)GetValue(ThreshProperty); }

set { SetValue(ThreshProperty, value); }

}

public double Red

{

get { return (double)GetValue(RedProperty); }

set { SetValue(RedProperty, value); }

}

public double Green

{

get { return (double)GetValue(GreenProperty); }

set { SetValue(GreenProperty, value); }

}

public double Blue

{

get { return (double)GetValue(BlueProperty); }

set { SetValue(BlueProperty, value); }

}

Yukarıdaki sınıf bizim AlphaShader adını verdiğimiz kendi PixelShader efektimizin Silverlight içerisindeki tanımı. Söz konusu PixelShader efekti uygulama içerisindeki compile edilmiş Alpha.ps efektini kullanıyor. Gördüğünüz tüm Dependency Propoerty'ler de aslında HLSL'e gönderdiğimiz parametreler. Chroma Key rengimizin RGB değerlerini ayrı ayrı gönderirken Threshold değerini de 1 ile 0 arasında gönderiyoruz.

Artık efektimiz hazır olduğuna göre uygulamamızın arayüzünü de hazırlayabiliriz.

[XAML]

<UserControl x:Class="SilverlightApplication30.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="800" Height="600"

xmlns:daron="clr-namespace:SilverlightApplication30">

<MediaElement

x:Name="myVideo"

Margin="30,32,109,89"

Source="ornek.wmv"/>

</Grid>

</UserControl>

Gördüğünüz gibi örneğimizde basit bir şekilde bir resim ve üzerinde de bir video bulunuyor. Amacımız video içerisindeki yeşil kısmı kaldırıp sanki video içerisinde arkadaş resmin üzerinde hareket ediyormuş izlenimi yaratmak. Şimdi tekrar kod tarafına geçerek efektimizi MediaElement'imize uygulayalım.

[C#]

void MainPage_Loaded(object sender, RoutedEventArgs e)

{

var x = new AlphaShader();

x.Threshold = 0.37;

x.Red = 91;

x.Green =254;

x.Blue = 125;

myVideo.Effect = x;

}

Gördüğünüz gibi daha önceki adımlarda yarattığımız AlphaShader sınıfımızdan bir kopya alıp tüm Property'lerine uygun değerleri veriyoruz. Sonrasında da artık efektimizi MediaElement'in Effect'ine eşitliyoruz. Peki nasıl bir sonuç mu alıyoruz? Sonuç aşağıda.

PixelShader ile Chrome Key efekti.

Gördüğünüz gibi videomuz içerisindeki yeşil kısımlar tamamen yok oldu ve onun yerine çok daha farklı bir görsel yerleştirebildik. Videomuz oynarken de herhangi bir sorun olmayacak ve PixelShader efektimiz sürekli çalışarak bulduğu yeşil pikselleri şeffaf hale getirecek.

Hepinize kolay gelsin.

Silverlight 3.0 içerisinde DataPager ve istemci/sunucu taraflı sayfalama

Daron Y�ndem Blog — Wed, 01 Jul 2009 16:17:59 GMT

Sayfalama senaryoları her zaman ihtiyacımız olan işlevselliklerden olmuştur. En basit kullanımı ile bir DataGrid içerisindeki verinin sayfalanabilir olarak gösterilebilmesi gerekir. Bu sayfalama işlemi bazen sunucu taraflı bazen de istemci taraflı yapılabilir. Bu makalede Silverlight 3.0 ile beraber gelen DataGrid kontrolünü kullanarak sayfalama işlemlerine göz atacağız.

Sayfalama için görsel kontrol?

Sayfalama işlemi için doğrudan Silverlight 3.0 ile beraber gelen DataPager kontrolünü kullanacağız. Bu kontrol kendisine verilen PagedCollectionView nesnesine göre sayfalama yapabiliyor. Tabi söz konusu veriyi doğrudan DataPager'a vermek pek anlamlı değil o nedenle verimizi yaratıp ilk olarak bir gride bağlayalım. Sonrasında Grid içerisindeki veriyi sayfalaması üzerine DataPager'a gerekli komutu vereceğiz.

İstemci taraflı sayfalama...

İlk örneğimizde tüm veriyi istemci tarafında sayfalayacağız. Bu gibi bir sayfalamayı ancak tüm veriyi istemci tarafına uygun bir sürede alabiliyorsanız yapabilirsiniz. Eğer elinizdeki veri bir defada istemciye yüklenemeyecek durumda ise sayfalamayı da tabi ki sunucu tarafında yapmak gerekecektir. İstemci tarafındaki sayfalama aslında sadece görsel amaçlarla ve ileriki adımlarda filtreme için kullanılabilir.

[XAML]

<UserControl xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

xmlns:layoutToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Layout.Toolkit"

xmlns:dataControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.DataForm"

x:Class="SilverlightApplication77.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300">

<data:DataGrid x:Name="Grid"></data:DataGrid>

<dataControls:DataPager x:Name="Pager"></dataControls:DataPager>

</StackPanel>

</Grid>

</UserControl>

Yukarıdaki örneğimizde bir DataGrid ve bir de DataPager kontrolü bulunuyor. Söz konusu kontrollere gerekli isimleri de vererek kod tarafından ulaşılabilir hale getirip uygulamamıza devam edebiliriz. Elimizde basit bir isim listesi olduğunu düşünürsek ilk olarak bu listeyi bir PagedCollectionView'a çevirmemiz gerekecek.

[VB]

Private Sub MainPage_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded

Dim AnaListe As New List(Of String)

AnaListe.Add("Daron")

AnaListe.Add("Burak")

AnaListe.Add("Muammer")

AnaListe.Add("Uğur")

Dim Liste As New PagedCollectionView(AnaListe)

Grid.ItemsSource = Liste

End Sub

Yukarıdaki kod içerisinde basit bir String List'in PagedcollectionView'a çevrilmesini görebilirsiniz. Aslında işlem epey basit çünkü PagedCollectionView zaten constructor'larından birinde IEnumarable interface'ini implemente eden obje istiyor. Elimizdeki liste de buna uyduğunu göre doğrudan çeviri işlemini hızlıca halledebiliyoruz. Son olarak eldeki PagedCollectionView'u da Grid adındaki DataGrid'imize aktarmamız ilk aşamanın tamamlanması için yeterli olacaktır.

[XAML]

<UserControl xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

xmlns:layoutToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Layout.Toolkit"

xmlns:dataControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.DataForm"

x:Class="SilverlightApplication77.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300">

<data:DataGrid x:Name="Grid"></data:DataGrid>

<dataControls:DataPager x:Name="Pager" PageSize="2" DisplayMode="PreviousNextNumeric"

Source="{Binding ItemsSource, ElementName=Grid}"></dataControls:DataPager>

</StackPanel>

</Grid>

</UserControl>

Şu ana kadar DataPager kontrolümüz ile DataGrid'in birbirinden haberi yoktu. İşte yukarıdaki kod içerisinde bu iki kontrolü birbirinden haberdar ediyoruz ve DataGrid'in ItemsSource'un kodumuz ile vermiş olduğumuz PagedViewCollection'ın DataPager tarafından kontrol edilmesini sağlıyoruz.

Tüm bu işlemleri yapabilmek için basit bir Element Binding kullanarak DataPager'ın Source Property'sini Grid'in ItemsSource'una bind etmemiz yeterli oluyor. Artık elimizde istemci tarafında sayfalama ile çalışabilen bir DataGrid var. DataGrid'in her sayfasında kaç kayıt gösterileceğini PageSize özelliğinden ayarlayabilirsiniz.

Sayfalama desteği ile bir DataGrid kontrolü.

DataPager ile ilgili farklı görsel özellikler için DisplayMode Enumaration'ını incelemenizi tavsiye ederim.

Sunucu taraflı sayfalama...

Eğer veri miktarınız çok yüksek ise maalesef tüm veriyi istemci tarafına almak gibi bir şansınız olmayabilir. Bu gibi durumlarda Silverlight uygulamasının sürekli olarak istediği sayfanın sayısını sunucuya göndererek sadece o sayfadaki veriyi sunucudan alması gerekecektir. Tahmin edebileceğiniz üzere bu işin iki farklı ayağı var; birincisi sunucu tarafında uygun sayfaya ait veriyi sayfa numarasına göre döndürebilen bir web servisinin hazırlanması, ikincisi ise bu servisin Silverlight tarafından doğru olarak kullanılabilmesi.

[Service / VB]

Dim DB As New DataClasses1DataContext

<OperationContract()> _

Public Function VeriGetir(ByVal Atla As Integer, ByVal Al As Integer) As List(Of Urunler)

Return (From inc In DB.Urunlers Skip (Atla) Take (Al) Select inc).ToList()

End Function

<OperationContract()> _

Public Function KayitSayisi() As Integer

Return (From inc In DB.Urunlers Select inc).Count

End Function

Yukarıda sunucu tarafındaki servisimizin kodunu bulabilirsiniz. Toplamda iki servise ihtiyacımız var; bu servislerinden biri veritabanında bulunan toplam kayıt sayısını alarak istemciye göndermek zorunda. Böylece DataPager kontrolü toplam kaç sayfalık bir veri ile uğraştığını bilebilecek. Diğer yandan sayfa sayfa duruma göre veri döndürebilecek bir servis de kesinlikle şart. Tüm bunları LINQ2SQL ile beraber yaparsanız sayfalamanız otomatik olarak SQL tarafına kadar taşınmış oluyor. Aksi halde sizin SQL tarafındaki sayfalama mekanizmasını da kurmanız gerekecektir.

Özellikle VeriGetir adındaki metodumuzu incelemek gerekirse toplamda iki parametre aldığını görebiliriz. Bunlardan biri veritabanından kayıt çekilirken kaç kayıt atlanmasını gerektiğini diğeri ise kaç kayıt alınması gerektiğini belirtiyor. Örneğin her defasında 10'ar kayıt gösteriyorsak ve üçüncü sayfadaysak toplam 20 kayıt atlamamız gerektiği ve 10 kayıt almamız gerektiğini hesaplamak pek zor değil. Bu hesaplamaları Silverlight tarafında yaparak servise parametre olarak vereceğiz. Servis de bize uygun veriyi döndürecek.

[XAML]

<UserControl xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

xmlns:layoutToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Layout.Toolkit"

xmlns:dataControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.DataForm"

x:Class="SilverlightApplication77.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300">

<data:DataGrid x:Name="Grid"></data:DataGrid>

<dataControls:DataPager x:Name="Pager" PageSize="1" DisplayMode="PreviousNextNumeric"></dataControls:DataPager>

</StackPanel>

</Grid>

</UserControl>

Yukarıdaki XAML kodu uygulamamızın ana ekranını temsil ediyor. Bir önceki örneğimizden farklı olarak burada artık bir ElementBinding kullanmadığımı görebilirsiniz. Nedeni çok basit; artık tüm veri DataGrid üzerinde değil o nedenle DataPager gidip de Grid'in ItemsSource'u üzerinden sayfalama yapamayacak.

Not: ElementBinding mekanizmasının çalışmasını ve ilk örneğimizdeki sistemi daha profesyonel bir şekilde veriyi sunucu tarafında sayfalar hale getirmek isterseniz yapmanız gereken IPagedCollectionView interface'ini implemente eden kendi PagedCollectionView nesnenizi programlamanız. Nesne içerisinde sayfa değişim eventlarından bir çok farklı duruma erişip verinin uygun kaynaklardan alınmasını sağlayabilirsiniz. Ben kişisel olarak ne kadar bu yolun daha profesyonel olduğunu düşünsem de hem yazılım geliştirme süreci olacak hem de kalifikasyon açısından hedeflediğimiz işlevsellik için biraz yüksek seviyede kaldığını düşünüyorum. O nedenle makalede çok daha basit bir teknik kullanacağım. Eğer siz daha karışık işlevselliklere ihtiyaç duyarsanız IPagedCollectionView interface'i üzerinden ilerleyebilirsiniz.

DataPager'ı kullanmaktaki tek amacımız kullanıcıya uygun arayüzü göstermesi. Yani "sağ" "sol" düğmeleri ve "sayılar" bizim için yeterli. Bundan sonrasında ne de olsa sunucu tarafında sayfalama yapacağımıza göre DataPager'ın bize kullanıcı tarafından seçili sayfanın sayısını vermesi yeterli olacaktır. Fakat DataPager'ın çalışması için uygun bir PagedViewCollection'ın Source olarak atanmış olması şart.

[VB]

WithEvents Servis As New ServiceReference1.Service1Client

Private Sub MainPage_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded

Servis.KayitSayisiAsync()

End Sub

Private Sub Servis_KayitSayisiCompleted(ByVal sender As Object, ByVal e As ServiceReference1.KayitSayisiCompletedEventArgs) Handles Servis.KayitSayisiCompleted

Dim Liste As New List(Of Nullable(Of Integer))

For index As Integer = 1 To e.Result

Liste.Add(Nothing)

Dim DummyList As New PagedCollectionView(Liste)

Pager.Source = DummyList

Servis.VeriGetirAsync(Pager.PageIndex * Pager.PageSize, Pager.PageSize)

End Sub

Sayfa ilk yüklendiğinde hemen kayıt sayısını getirecek olan servisimizi çağırıyoruz. Söz konusu servisten toplam kayıt sayısı geldiği gibi sadece DataPager'a verilmek üzere boş bir List yaratıyoruz. Bu List içerisinde Item sayısı gelen kayıt sayısı ile aynı fakat List'in içindeki her Item aslında boş! DataPager'ın çalışması için aslında boş bir liste yaratıp kendisini kandırıyoruz.

[VB]

Private Sub Pager_PageIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles Pager.PageIndexChanged

Servis.VeriGetirAsync(Pager.PageIndex * Pager.PageSize, Pager.PageSize)

End Sub

Private Sub Servis_VeriGetirCompleted(ByVal sender As Object, ByVal e As ServiceReference1.VeriGetirCompletedEventArgs) Handles Servis.VeriGetirCompleted

Grid.ItemsSource = e.Result

End Sub

Artık DataPager kontrolümüzün PageIndexChanged durumunu yakalayabiliriz. Her defasında sayfa değiştiğinde sayfa sayısı ile sayfa boyutunu çarpıp atlanacak olan kayıt sayısını buluyoruz. Zaten sayfa sayısı Index olarak geldiği için ilk sayfada 0 gelecek ve atlanacak kayıt sayısı da 0 olacak. Servise göndermemiz gereken ikinci parametre de zaten DataPager'ın PageSize özelliği, yani sayfa başına gösterilecek kayıt sayısı.

Son olarak bu servisimizden gelen sonucu da Grid'imize bağlarsak işlem tamamlanmış olacaktır. Artık elimizde sunucu tarafında sayfalama yapabilen bir arayüzümüz var.

Windows 7 ile 7 saat

Daron Y�ndem Blog — Tue, 30 Jun 2009 16:43:11 GMT

Bugün sizlere yepyeni ve taptaze bir etkinlik duyuruyorum :) Biliyorsunuz Windows 7'nin RTM (Üretime Hazır Sürüm) haline gelmesine şurada çok kısa bir zaman kaldı. Bu zamanı doğru bir şekilde değerlendirebilmek ve hem yazılımcılar hem de sistem yöneticileri olarak bu değişimi hazırlanabilmek adına dolu dolu bir etkinlik düzenledik.

Etkinliğimizin en güzel yanı sistem yöneticileri ve yazılımcılar için ayrı ayrı paralel oturumların bulunuyor olması. Açıkçası ben içerikle ilgili çok heyecanlıyım. İtiraf etmek gerekirse etkinlikteki bazı sürpriz hediyeler eminim ki sizi de heyecanlandıracaktır :) Neyse daha fazla ip ucu vermeden gelin sizinle içeriğimizi paylaşiyim.

BT Uzmanları	Yazılım Geliştiriciler
10.00-10.30 Windows 7'ye Genel Bakış, Sürümler, Language Packs 10.45-11.30 DirectAccess 11.45-12.30 Applocker 13.30-14.00 BitLocker & BitLocker To Go 14.15-14.45 Problem Steps Recorder & UAC Enhancements 15.00-15.30 Search Federation 15.45-16.15 BranchCache 16.30.17.00 Windows XP Mode	10.00-11.00 MultiTouch ve Ink Uygulamaları Geliştirmek 11.15-12.30 Ribbon kontrolünü nasıl kullanırız? 13.30-14.30 Sensor ve Location API’ları nasıl kullanılır? 14.45-15.15 Uygulama uyumluluğu 15.15-16.00 Taskbar ile gelen yenilikler 16.15-17.00 XPS ve Doküman yazdırma yenilikleri

Benimle beraber sevgili Baki Onur Okutucu, Burak Selim Şenyurt, Mesut Aladağ, Muammer Benzeş'in de konuşmacı olacağı etkinlik 11 Temmuz, Cumartesi günü Microsoft Istanbul ofisinde gerçekleşecek. Microsoft Istanbul ofisi haritası için buraya tıklayabilirsiniz. Katılım için www.inetatr.org adresinden kayıt olmayı unutmayın.

Organik Yazılım Günü tam organik bir ortamda yaşandı!

Daron Y�ndem Blog — Sun, 28 Jun 2009 12:20:48 GMT

Dün çok ilginç bir gün geçirdik hep beraber :) Sabah 08.30 gibi aldığım telefonda Yıldız Teknik Üniversitesi'nde bir trafo arızası nedeniyle elektriğin olmadığı bilgisi "Organik Yazılım Günü"müzün organikliğine biraz daha doğallık kattı :) Bir, iki saat içerisinde sorunun giderileceği ümidi ile üniversitede toplaştık. Bir sonraki haber öğlen bir gibi elektriğin geleceğiydi :) Eh biz de en azından "Açık Kaynak Lisans Modelleri" üzerine konuşmak üzere açık bir bahçede :) sohbete daldık.

Açık kaynak lisans modelleri üzerine bir sohbet...

Sohbetimiz açık kaynak lisans modellerinden başladı ve apayrı konulara doğru ilerledi. İtiraf etmek gerekirse ben böyle sohbet bazlı bir etkinlik hayaline sahiptim :) Hangi konsept ile ne şekilde yapılması gerektiğini düşünürken böyle bir vesile pek aklıma gelmemişti. Herkese katılımından dolay çok teşekkür ediyorum.

Peki devamında ne mi yaptık? Sohbetimiz yaklaşık öğlen bire kadar sürdü :) Israrlı bir şekilde elektrikler gelmeyince Beşiktaş'a bir yemeğe indik. Yemek sonrası üniversiteye hala elektriklerin gelmediği bilgisini alınca Starbucks Beşiktaş'ta sohbete devam ettik ve yavaş yavaş oradan da 15.00 gibi dağıldık diyebilirim.

Katılan herkese çok teşekkür ediyorum. Her anlamda ilginç bir gün oldu. Özellikle şehir dışından gelen katılımcılarımızdan elektrik idaresi adına özür diliyorum! Sanırım "elektrik kesintisi" nedeniyle format değiştiren nadir etkinliklerden olduk. Yaz içerisinde planladığımız esas içerik ile etkinliğimizi tekrar edeceğiz. Bu sefer ricam herkes yanında birer kalem pil getirsin :) seri bağlayıp bir şeyler yaparız belki zor durumlarda :)

Hepinize tekrar teşekkürler...

Unutmadan :) Efsanevi fuji yağmurlarında yıkanmış fuji elmaları için Burak'a ÇOK teşekkürler :)

Silverlight Toolkit'ten AutoCompleteBox kullanımı.

Daron Y�ndem Blog — Mon, 22 Jun 2009 12:32:11 GMT

Bu yazımızda Silverlight Toolkit ile beraber gelen AutoCompleteBox kontrolünü inceleyeceğiz. Bilgisayarınızda Silverlight Toolkit yükledikten sonra Toolkit içerisindeki tüm kontrolleri Visual Studio içerisinde Toolbox'ta görebilirsiniz. Ayrıca Toolkit DLL'lerini referans alarak kontrolleri elle XAML sayfalarınıza ekleme şansınız da var. Örneğin AutoCompleteBox kontrolünü inceleyecek olursak; bir sayfaya söz konusu kontrolü eklemek için ilk olarak Toolkit Assembly'lerinden System.Windows.Controls.Input Assembly'sini projenize referans almanız sonrasında da System.Windows.Controls NameSpace'i altından kontrolü bulmanız gerekecektir.

[XAML]

<UserControl xmlns:input="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input" x:Class="SilverlightApplication54.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300">

<input:AutoCompleteBox></input:AutoCompleteBox>

</Grid>

</UserControl>

Yukarıda gördüğünüz basit örnek içerisinde XAML root elementimizde gerekli input XML namespace'i tanımlanmış durumda. Böylece artık input namespace'i üzerinden AutoCompleteBox kontrolümüzü kullanabiliriz. Daha önce de bahsettiğim üzere eğer Visual Studio'nun Toolbox'ından söz konusu kontrolü kod tarafına sürükle bırak tekniği ile yerleştirirseniz zaten tüm bu işlemleri otomatik olarak gerçekleştirilebiliyor.

Haydi veriye bağlayalım!

Kontrolümüzü artık sahneye yerleştirdiğimize göre hemen çalıştırmak ve sonucu görmek isteyeceğiz fakat onun öncesinde tabi ki bir veri bağlantısı yapmamız şart. Kullanıcılar kutuya birşey yazarken AutoComplete kısmında neler gösterilecek?

[XAML]

<UserControl xmlns:input="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input" x:Class="SilverlightApplication54.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300">

<input:AutoCompleteBox x:Name="myAutoCompleteBox" VerticalAlignment="Top"></input:AutoCompleteBox>

</Grid>

</UserControl>

[VB]

Private Sub MainPage_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded

Dim Secenekler() As String = {"Silverlight", "Silvernight", "Silverfight", "SilverMonth"}

myAutoCompleteBox.ItemsSource = Secenekler

End Sub

[C#]

void MainPage_Loaded(object sender, RoutedEventArgs e)

{

string[] Secenekler = { "Silverlight", "Silvernight", "Silverfight", "SilverMonth" };

myAutoCompleteBox.ItemsSource = Secenekler;

}

Yukarıdaki kod içerisinde aslında basit bir şekilde tüm seçenekleri doğrudan AutoCompletebox'ın ItemsSource'una atamış oluyoruz. Sonrasında AutoCompleteBox kendi içerisinde gerekli filtrelemeleri kullanıcılar metin giriş yaptıkça gerçekleştirerek sonucu gösteriyor.

Silverlight içerisinde basit bir AutoCompleteBox

Peki ya web servisinden alacak olsak sonuçları?

Bir önceki örneği incelerken büyük ihtimal ile kendi içinizden "Eee peki kocaman bir listemiz varsa hepsini istemciye mi alacağız?" diye sormuşsunuzdur. Tabi ki hayır. Aslında normal şartlarda yapmamız gereken şey AutoCompleteBox içerisine yazılan kelimeyi sunucuya göndermek ve geri gelen sonucu da AutoCompleteBox'ın AutoComplete bölümünde göstermek. İşte bu işlemi yapabilmek için AutoCompletebox'ın Populating eventını kullanıyoruz.

Örneğimizde Tavsiye adında bir webmethod kullanacağız. Web servisinin yazımı kısmına girmeyeceğim fakat kabaca bahsetmek gerekirse istemciden aranacak kelimeyi alan ve veritabanına gidip uygun AutoComplete seçeneklerini bir list olarak döndüren bir webmethod yeterli olacaktır.

[VB]

Private Sub myAutoCompleteBox_Populating(ByVal sender As Object, ByVal e As System.Windows.Controls.PopulatingEventArgs) Handles myAutoCompleteBox.Populating

e.Cancel = True

Dim servis As New ServiceReference1.Service1Client

AddHandler servis.TavsiyelerCompleted, AddressOf Servis_TavsiyelerCompleted

servis.TavsiyelerAsync(myAutoCompleteBox.Text)

End Sub

[C#]

public MainPage()

{

InitializeComponent();

this.Loaded += new RoutedEventHandler(MainPage_Loaded);

myAutoCompleteBox.Populating += new PopulatingEventHandler(myAutoCompleteBox_Populating);

}

void myAutoCompleteBox_Populating(object sender, PopulatingEventArgs e)

{

e.Cancel = true;

ServiceReference1.Service1Client servis = new ServiceReference1.Service1Client();

servis.TavsiyelerCompleted += Servis_TavsiyelerCompleted;

servis.TavsiyelerAsync(myAutoCompleteBox.Text);

}

Yukarıdaki kodumuzda AutoCompleteBox'ın Populating durumunu yakalayarak hemen e.Cancel değerini True yaparak Populate işlemini iptal ediyoruz. Neden mi? Çünkü Populate işlemi, yani AutoComplete listesinin gösterilmesi işlemi şu anda yapılamaz. İşlemi yapabilmek için bizim Webmethod'umuza parametreyi vermemiz, söz konusu bilginin sunucuya gitmesi ve en önemli cevabın gelmesi gerekiyor! Cevap gelmeden Populate edemeyiz! O nedenle burada hemen Populate işlemini iptal ediyoruz. Sonrasında WebServis'imizden bir kopya alıp Completed durumu da ayrı bir handler'a bağlayıp elimizdeki AutoCompleteBox içerisinde metni Tavsiyeler adındaki Webmethod'umuza gönderiyoruz.

[VB]

Private Sub Servis_TavsiyelerCompleted(ByVal sender As Object, ByVal e As ServiceReference1.TavsiyelerCompletedEventArgs)

myAutoCompleteBox.ItemsSource = e.Result

myAutoCompleteBox.PopulateComplete()

End Sub

[C#]

private void Servis_TavsiyelerCompleted(object sender, ServiceReference1.TavsiyelerCompletedEventArgs e)

{

myAutoCompleteBox.ItemsSource = e.Result;

myAutoCompleteBox.PopulateComplete();

}

Populating durumunda çağırdığımız web servisimizin Completed durumunda artık veri elimizde olduğunda göre doğrudan AutoCompleteBox'ımızın ItemsSource'una verebiliriz. Son olarak tabi ki Populate işlemini bitirdiğimizi de AutoCompleteBox'a belirtmemiz gerek ki hemen sonucu kullanıcıya göstersin.

Arama şeklini nasıl değiştiririz?

Varsayılan ayarları ile AutoCompleteBox'lar kendilerine verilen verinin içinde arama yaparken kullanıcının yazdığı metinile başlayan sonuçları gösterirler. Bunun değiştirmenin yolu AutoCompletebox'ların SearchMode özelliğinde yatıyor.

Veri kaynağında nasıl arama yapılacağını belirleyin.

Peki bu arama sistemleri size yetmedi ve daha da özelleştirmek isterseniz ne yapabilirsiniz? Filtreleme işlemini tamamen ele alma şansınız da var. Bu durum özellikle AutoCompleteBox'a kendi nesne tiplerinizi bağladığınızda çok anlamlı olabilir. Filtreleme esnasından belki de sadece ItemsSource'a verdiğiniz nesnelerin belirli Property'lerine göre ayrı ayrı mantıklarıda aramalar yapılsın isteyebilirsiniz.

[VB]

Private Sub MainPage_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded

myAutoCompleteBox.ItemFilter = AddressOf Arama

End Sub

Function Arama(ByVal metin As String, ByVal nesne As ServiceReference1.Service1Urun) As Boolean

If nesne.Adi.Contains(metin) Then

Return True

Else

Return False

End If

End Function

[C#]

public MainPage()

{

InitializeComponent();

myAutoCompleteBox.ItemFilter = Arama;

}

bool Arama(string metin, ServiceReference1.Service1Urun nesne)

{

if (nesne.Adi.Contains(metin)) {

return true;

}

else {

return false;

}

Yukarıdaki örneğimizde AutoCompleteBox'ın ItemFilter'ına yeni bir metod atıyoruz. Bu metod parametre olarak o anda filtrelenmek istenen Item'ı, yani benim örneğimde ServiceReference ile beraber gelen tipte bir nesneyi ve filtrelemede kullanılacak metni alıyor. Sonrasında gerekli kontrolleri yaptıktan sonra geriye filtrelediğiniz her bir nesnenin gösterilip gösterilmeyeceğine dair birer Boolean değer döndürmeniz yeterli olacaktır.

Görsel özelleştirmeler...

Makalemizde incelediğimiz tüm özellikleri kullandınız, kendi nesnelerinizi web servisi ile döndürdünüz ve özel bir filtrelemede de eklediniz. Fakat AutoComplete listesinde daha çok detay göstermek istiyorsunuz. Bu durumda gelin AutoCompleteBox'ın ItemTemplate'ini bir inceleyelim.

[XAML]

<input:AutoCompleteBox x:Name="myAutoCompleteBox" VerticalAlignment="Top">

<input:AutoCompleteBox.ItemTemplate>

<DataTemplate>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</Grid>

</DataTemplate>

</input:AutoCompleteBox.ItemTemplate>

</input:AutoCompleteBox>

Kod içerisinde de gördüğünüz üzere AutoCompleteBox'ın ItemTemplate'i aslında kendi içerisinde AutoComplete kısmında tekrar ettiği satırları tanımlıyor. Bu satırların tasarımı aslında arkaplanda bir ListBox'ın Item'larıdır. Bizim örneğimizde ulaşmaya çalıştığımız işlevsellik iki veya daha çok Property'i kullanıcıya gösterirken arka plandaki filtrelememiz ile de bir AutoComplete işlevselliği sağlamak. Zaten hali hazırda AutoCompleteBox'ımıza nesnelerimizi ItemsSource üzerinden aktardığımız için o nesnelerin tüm Property'lerine dair Binding'leri de ItemTemplate içerisinde ayarlayabiliyoruz.

AutoComplete kısmı özelleştirilmiş bir AutoCompleteBox.

Taktikler

Eğer herhangi bir AutoCompleteBox'ın ItemsSource'una kendi tanımladığınız tiplerden oluşan listeler verirseniz AutoComplete bölümünde saçma metinler görebilirsiniz. Normal şartlarda bir String Array vs verildiğinde herhangi bir sorun olmuyor fakat kendi tanımladığınız sınıflarda veya web servislerinden Proxy aracılığı ile aldığınız sınıflarda sorun yaşayabilirsiniz. Bu durumu düzeltmenin yolu kendi sınıflarınız için birer ToString extension'ı yazmak olabilir. AutoCompleteBox kendisine verilen tüm nesnelerin üzerinden ToString metodunu çağırarak gelen metni AutoComplete kısmında gösterir. O nedenle siz de kendi sınıflarınızda ToString'i override ederek kendi istediğiniz verileri geri döndürebilirsiniz.

[VB]

Namespace ServiceReference1

Partial Public Class Service1Urun

Public Overrides Function ToString() As String

Return Me.Adi & Me.Soyadi

End Function

End Class

End Namespace

[C#]

namespace ServiceReference1

{

public partial class Service1Urun

{

public override string ToString()

{

return this.Adi + this.Soyadi;

}

Yukarıdaki örnek kod içerisinde ServiceReference1 adında bir servis referansı ile beraber gelen Service1Urun adındaki nesnenin ToString metodunu override ediyoruz. Artık söz konusu nesneden sonra ToString denildiğinde buradaki Function çalışacak ve nesnenin Adi ile Soyadi Property'lerini birleştirerek geri döndürecek. Böylece AutoCompleteBox da bu ToString'den gelen veriyi gösterebilecek.

Otomatik seçilseler...

AutoComplete listesini gösteriyorsunuz fakat her seferinde kullanıcının bir kayıt seçmek zorunda kalmasını da istemiyorsunuz. Belki de en uygun seçecek hemen seçilebilir şekilde gelse? Nasıl mı?

IsTextCompletionEnabled = True olursa...

AutoCompleteBox'ın IsTextCompletionEnabled özelliği True yaparsanız yukarıdaki gibi kullanıcılar metin girişi yaparken bir yandan da en uygun seçeneği seçtirebilirsiniz. Böylece anında seçimi onaylayarak kullanıcılar hızlıca işleme devam edebilirler.

Hepinize kolay gelsin.

Organik Yazılım Günü'nde görüşürüz!

Daron Y�ndem Blog — Tue, 16 Jun 2009 16:31:38 GMT

Uzun süredir bu anı bekliyordum :) Açık kaynak kodu üreten ve tüketen bir yazılımcı olarak bu konuda bilgi ve birikimlerimizi birbirimiz ile paylaşmanın zamanı geldi. Bu sefer çok daha farklı bir etkinlik beraber olacağız.

Gördüğünüz üzere bu sefer oturumlarımız yarım saatlik ve konuşmacılarımız da sizin aranızdan kişiler. Eğer siz de benim gibi açık kaynak kodu destekliyor, açık kaynak kodu üretiyor veya tüketiyorsanız hiç fark etmez, hepinizi 27 Haziran'da bu Organik etkinliğe bekliyoruz!

Kayıt olmayı unutmayın : www.inetatr.org

Silverlight 3.0 içerisinde 3D Projection.

Daron Y�ndem Blog — Sat, 13 Jun 2009 19:31:50 GMT

Silverlight 3.0 ile beraber gelen en ilgi çekici özelliklerden biri 3D desteği. Bu makalemizde Silverlight ile beraber gelen 3D özelliklerine bakmadan önce aslında nasıl bir 3D mantığı ile karşı karşıya olduğumuzu netleştirmekte fayda var. Özellikle Silverlight öncesi WPF ile ilgilnenlerin 3D beklentisi eminim ki çok yüksek olacaktır. Tabi daha öncesinde 3D oyun programlama ile ilgilenenleri liste dışında tutuyoruz :) amacımız zaten oyun tarafı değil.

WPF içerisinde alıştığımız yapıdaki 3D ortamda istediğimiz bir 3D objeyi alarak X, Y ve Z koordinatları ile doğrudan kontrol edebiliyorduk oysa Silverlight tarafındaki 3D desteği biraz daha farklı. Aslında bakılırsa tam olarak 3D desteği olarak da adlandırılmıyor söz konusu mekanizma. Esas bahsedilen özelliğin adı "3D Plane" olarak geçiyor. Peki bunun anlamı nedir? Özetlemek gerekirse aslında Silverlight içerisindeki 3D desteği sadece 3D ortam şeklinde. Yani sadece içerisinde bulunduğunuz ortam 3D :) elinizdeki nesneler 3D değil.

Ne? Nasıl?

Elinizde iki boyutlu bir nesne olduğunu düşünün. Aslında çok basit bir şekilde bir TextBox düşünseniz de yeterli olacaktır. Bir TextBox nesnesi 3D bir nesne midir? Yani kalınlığı var mıdır? Hayır, bir TextBox'ın sadece genişlik ve yüksekliği vardır. İşte bu şekilde 2D nesneleri Silverlight içerisinde artık sanki 3D ortamdaymış gibi gösterebiliyorsunuz. Özünde bahsettiğimiz şey 3D Projection (Yansıtma). Nasıl ki elimizdeki 2D nesnelere RenderTransform'lar uygulayarak iki boyutlu ortamda istediğimiz gibi manipüle edebiliyorduysak artık Silverlight içerisinde tüm görsel nesneleri 3D ortamda da manipüle edebiliyorsunuz. Gelin hemen hızlı bir örnek ile konuya girelim.

Farklı 3D Transform'lar uygulanmış ComboBox'lar.

Yukarıdaki ekran görüntüsünde aslında basit bir ComboBox görüyorsunuz fakat söz konusu ComboBox sanki üç boyutlu ortamdaymış gibi döndürülmüş hatta görüntülerden birinde arkasına çevrilmiş. Tüm bu mekanizma animasyonlar dahil çalışırken eldeki nesneleriniz hepsi "arkası döndürüldüğünde" bile kullanılabilir olmaya devam ediyor. Düşünün, tüm bunlar animasyonlar ile birleştirildiğide üç boyutlu ortamda gezen kontroller şeklinde :) ne kadar ilginç arayüzler yaratılabilir.

Kod tarafına geçiş yapalım...

Kod tarafında herhangi bir nesneyi 3D ortamdaymış gibi ekrana yansıtmak istiyorsanız yapmanız gereken söz konusu nesne için hemen bir Projection tanımlamak. Şu an için Silverlight içerisinde sadece PlaneProjection destekleniyor o nedenle tek seçeneğimiz var.

[XAML]

<UserControl x:Class="SilverlightApplication43.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300">

<ComboBox.Projection>

<PlaneProjection RotationX="208"

CenterOfRotationY="1"

CenterOfRotationX="1"

RotationY="33"

GlobalOffsetY="15"

GlobalOffsetX="35"/>

</ComboBox.Projection>

<ComboBox.Items>

</ComboBox.Items>

</ComboBox>

</Grid>

</UserControl>

Bir önceki bölümde sizinle paylaştığım ekran görüntüsünde sağ tarafta bulunan ComboBox'ın XAML kodunu yukarıda bulabilirsiniz. Burada önemli olan şey ComboBox'ın Projection özelliğine atanmış olan PlaneProjection nesnesi. Söz konusu PlaneProjection nesnesinin birçok özelliği set edilmiş durumda. İşte biz de makalemizin geri kalanında bu özelliklerin anlamlarına göz atacağız.

RotationX, RotationY, RotationZ

İsimlerinden de anlaşılacağı üzere bu özellikler bir şekilde elimizdeki nesnenin üç boyutlu ortamda kaç derece ile döndürüleceğini belirliyor. Peki X, Y ve Z derken neyi kast ediyorlar? Hemen gözünüzde üç boyutlu bir ortam canlandırın ve söz konusu ortadam ComboBox'ımızı koyalım. ComboBox'ı etrafında döndürebileceğiniz aslında üç adet eksen vardır. Bunlardan birincisi X ekseki. Eğer X ekseki etrafında ComboBox'ı döndürmek istiyorsanız RotationX değerine gerekli açıyı verebilirsiniz. Aynı şekilde Y ve Z eksenleri etrafında da eldeki nesne döndürülecekse rahatlıkla özelliklere de açı değerleri vererek istediğiniz sonucu alabilirsiniz.

Eksenler ve Rotation özellikleri...

Yukarıdaki görsel içerisinde X, Y ve Z eksenlerini ve etraflarında döndürülmüş Button görsellerini inceleyebilirsiniz. Bu noktada dikkat edilmesi gereken detaylardan biri de aslında eksenlerin gerçekten de her nesnenin tam ortasından geçiyor olması. Her görsel nesne kendi X, Y ve Z eksenlerine sahip ve bunlar varsayılan ayarlarda nesnenin tam ortasından geçecek şekilde ayarlanmış. Örneğin X ekseni etrafında 45 derece döndürülen bir Button eksen tam da Button'un ortasından geçtiği için kendi merkezi etrafında dönüyormuş gibi gözüküyor.

İsterseniz eksenlerin yerlerini değiştirme şansınız da var. Tüm eksenler varsayılan ayarları ile nesnelerin tam ortasından geçersen harici Offset değerleri ayarlanabiliyor. Offset değerleri bilindiği üzere 0 ile 1 arasında nesnenin sol üst köşesinden başlayarak sağ alt köşesine gider. Eğer X eksenine 0 Offset değerini verirseniz bu X ekseninin düğmenin en üstüne denk geleceği anlamına gelir. Aynı şekilde eğer 1 değerini verirseniz ekseni düğmenin en alt noktasına itmiş olursunuz.

CenterOfRotation ayarları.

Eksenin yerini değiştirmiş olmak artık düğmemizin kendi merkezine göre değilde üst noktasına göre veya alt noktasına göre dönmesini sağlayacaktır. CenterOfRotation olarak geçen bu özelliğin X, Y ve Z Offset değerlerini ayrı ayrı düzenleyebiliyorsunuz. Yukarıdaki görselde de görebileceğiniz üzere aslında X ekseninin Y eksenine göre ne kadar aşağıda veya yukarıda olacağını ayarlıyoruz. O nedenle düğmenizin X eksenin Offset değeri olarak ne kadar uzak olacağına dair bilgiyi CenterOfRotationY değerine atamanız gerekiyor. Aynı şekilde diğer eksenler için de CenterOfrotationX ve CenterOfRotationZ özellikleri de mevcut.

GlobalOffset ve LocalOffset ayarları.

Şu ana kadar eksenleri etrafında nesnelerin ne açı ile döneceklerini ve eksenlerin nesnelerin neresine denk geleceğini ayarladık. Oysa başka dertlerimiz de olabilir. Bunlardan en basiti tüm işlemleri yaparken nesneyi uygulama genelinde Global olarak da posizyonlandırmak isteyebilirsiniz. İşte üç boyutlu ortamda nesnenize Global bir pozisyon vermek istiyorsanız kullanacağınız özellikleri GlobalOffsetX, GlobalOffsetY ve GlobalOffsetZ özellikleri olacaktır. Bu özellikler kesinlikle animasyonunuzu veya nesnenin nasıl döneceğini vs değiştirmez. Nesneyi kendi X, Y ve Z eksenleri ile beraber Global, uygulama bazında ayrı bir X, Y ve Z ekseni üzerinden tekrar pozusyonlandırdığınızı düşünebilirsiniz.

Gelelim animasyonlarınızı en hareketli ve janjanlı hale getirecek olan son özelliğe; LocalOffset! Adından da anlaşılacağı üzere aslınad yine nesnenizi bir şeyden uzaklaştırıyorsunuz fakat bu sefer global anlamda değil. Nesnenin kendi içinde belirlenen açılarla etrafında döndüğü eksenlerden devasa miktarlarda uzaklaştırılarak sanki uzaklardan bir yerden geliyormuş efekti ile ekrana gelmesini sağlayan mekanizma LocalOffset'tir. Düşünün ki nesneniz ekseni etrafında değil de ekseninden 50 piksel uzakta bir dairede dönüyor? Nasıl gözükürdü?

Ekseninden uzaklarda dönen bir Button.

Yukarıdaki görüntüden bir Button'un ekseninden uzakta dönmesi halinde nasıl bir animasyon oluşabileceğini tahmin edebilirsiniz. Offset değerlerini arttırarak ve sadece X değil farklı eksenlerde aynı anda açılar vererek animasyonlar hazırladığınızda nesnelerinizi üç boyutlu ortamda istediğiniz gibi hareketlendirebiliyorsunuz. Tüm bu süreçte Button'un sürekli olarak tıklanabilir kaldığını da hatırlatmak isterim.

Sonuç

Yukarıda bahsettiğimiz tüm özelliklere programatik erişimin haricinde animasyon içerisinde de kullanabileceğiniz kesin. Özellikle unutulmaması gereken nokta Projection'ın tüm nesnelere uygulanabiliyor olması, yani elinizde içi dolu bir StackPanel veya bir DataGrid olabilir ve tüm bunları keni iç elementleri ile beraber rahatlıkla anime edebilirsiniz. Hatta belki StackPanel'inizin içinde bir nesne zaten kendi X, Y, Z koordinatlarına göre üç boyutlu bir animasyonu gerçekleştiriyordur ve siz StackPanel'i de başka bir üç boyutlu animasyona alarak daha ilginç manzaralar da yaratabilirsiniz.

Hepinize kolay gelsin.

Silverlight 3.0 ve harici Resource dosyalarının MergedResourceDictionary yapısı ile kullanımı

Daron Y�ndem Blog — Sat, 06 Jun 2009 19:16:29 GMT

Silverlight ve WPF ile beraber gelen Resource yapıları özellikle web tasarımcıları tarafından alışılmış CSS'in çok daha gelişmiş bir hali şeklinde tanımlanabilir. Sadece görsel anlamda değil aynı anda kontrollerin veya nesnelerin işlevsellik anlamında da birçok özelliklerinin birer stil olarak saklanmasını ve tekrar kullanılmalarının yanı sıra uygulama çerçevesinde merkezi yönetim sağlamasını da düşünürsek Silverlight projelerde Resource kullanımının büyük önemi var.

Maalesef Silverlight 2.0 ile beraber elimizdeki tek seçenek Resource'larımızı App.xaml içerisine yerleştirerek uygulama çapında kullanmaktı. Oysa çoğu zaman harici CSS dosyaları gibi Silverlight tarafında da Resource'larımızı harici dosyalara alarak farklı uygulamalarda da ortak olarak kullanmak istedik. Microsoft bizi dinlemiş olsa gerek ki Silverlight 3.0 ile beraber MergedDictionaries yapısı geliyor.

Nedir bu MergedDictionaries?

MergedDictionary'ler sayesinde harici bir dosyada yer alan ResourceDictionary'lerimizi Silverlight uygulamalarımda yer alan kontrollerinin Resources koleksyonlarına ekleyebiliyoruz. Böylece artık harici dosyalarda Resource'larımızı saklayabiliriz. Peki nasıl yapacağız? Gelin basit bir örnek ile adım adım bu işlemleri nasıl yapabileceğimiz ve ne gibi seçeneklerin bizi beklediğine bir göz atalım.

[XAML / HariciResource.xaml]

<ResourceDictionary

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

</ResourceDictionary>

Yukarıda gördüğünüz kod harici bir XAML dosyası içerisinde tek başına bulunuyor. Aslında bu dosya harici bir ResourceDictionary tanımlıyor ve içerisinde de sadece bir adet SolidColorBrush var. Bunun gibi farklı Resource tiplerini de bu dosya içerisinde saklayabiliriz. Biz şimdilik kodlarımız kısa ve anlaşılır olsun diye bu basit örnek üzerinden ilerleyelim. OzelRenk adındaki bu Resource'u uygulamanız içerisinde kullanabilmeniz için ilk olarak dosyayı Silverlight projenize eklemeniz gerekiyor. Ekleme işlemi sonrası Solution Explorer içerisinden dosyayı seçtiğinizde Properties panelinde Build Action'ın Content olmasına dikkat edin. Böylece XAML dosyası XAP içerisindeki DLL'inize eklenecektir.

Dosyamızı projemize ekledik fakat hala onu herhangi bir yerde tanımlamadık. Bu noktada iki seçenek var, bunlardan biri söz konusu tanımlamayı App.XAML içerisinde yaparak harici Resource dosyasındaki tüm Resource'ların uygulamada her yerde kullanılabilmesini sağlamak, ikincisi ise sadece UserControl başına harici dosyayı Import etmek. Her iki seçenekte de aynı kod kullanılacağı için gelin App.XAML içerisinde nasıl bir değişiklik yapmamız gerektiğine göz atalım.

[XAML / App.xaml]

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

x:Class="SilverlightApplication14.App"

<Application.Resources>

<ResourceDictionary.MergedDictionaries>

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Application.Resources>

</Application>

Gördüğünüz gibi Application.Resources içerisinde bir MergedDictionaries serisi yaratarak içerisine de harici ResourceDictionary'imizi koyuyoruz. Böylece artık harici dosyamızdaki tüm Resource'lar rahatlıkla uygulama genelinde kullanılabilecek.

[XAML / UserControl1.xaml]

<UserControl x:Class="SilverlightApplication14.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300">

</Grid>

</UserControl>

Yukarıda gördüğünüz basit UserControl içerisinde bir Rectangle bulunuyor. Bu Rectangle aslında bizim biraz önce uygulamamıza eklediğimiz harici Resource dosyası içerisindeki bir kaynağı kullanıyor. Sadece buradaki koda baktığımızda aslında söz konusu Resource'ların App.xaml içerisinde olması ile harici dosyada olması arasında bir fark yok.

Ya harici projelerdeki Resource dosyaları?

Şu ana kadarki örneğimizde Resource dosyası kendi projemiz içerisindeydi. Oysa belki de Resource'larınızı harici Silverlight Class Library'ler içerisinde tutuyor olabilirsiniz. İşte böyle bir durumda da doğrudan söz konusu DLL'i referans alarak onun içerisindeki bir Resource Dictionary'yi projenizde kullanmak isteyeceğiniz kesin. Bu gibi bir durumda değişen tek şey hedeflediğiniz XAML dosyasının adresi yani Source.

[XAML / App.xaml]

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

x:Class="SilverlightApplication16.App"

<Application.Resources>

<ResourceDictionary.MergedDictionaries>

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Application.Resources>

</Application>

Yukarıdaki şekli ile örneğimizi incelediğinizde unutmayın ki projemize referans aldığımız ve Assembly adı SilverlightClassLibrary1 olan bir DLL bulunuyor. Söz konusu DLL içerisinde yine bir önceki örnekte kullandığımız HariciResource.xaml dosyası bulunuyor. App.xaml dosyamızdaki tek farklılık HariciResource.xaml dosyasına ulaşırken kullandığımız yol tanımı.

Böylece Resource'larınızı harici DLL'lerde tutabilir ve istediğiniz projeye referans alarak kullanabilirsiniz. Veya projelerinizde Static Resource isimleri kullanarak yer geldiğinde sadece referansı değiştirerek tüm projenin görselliğinin değişmesini sağlayabilirsiniz.

Hepinize kolay gelsin.

Silverlight 3.0 içerisinde GPU ve BitmapCache kullanımı.

Daron Y�ndem Blog — Fri, 05 Jun 2009 17:08:08 GMT

Bazı yazılımsal işlemleri özel donanım desteği her zaman performansı arttırır. Aslında bunun çok basit bir nedeni var özünde. Yapacağımız yazılımsal işleve özel bir donanım kullanıyor olmanın yanı sıra özellikle bugün bilgisayarlarımızda normal şartlarda söz konusu işlemi yapmakla yükümlü birimi başka işlemler için serbest bırakıyor olmamız da önemli bir nokta. Neden mi bahsediyorum? Örneğin bilgisayarlarımızdaki ekran kartları! Hatırlayanlarınız vardır :) Eskiden oyunlardaki 3D hesaplamaları vs bilgisayarlarımızın normal işlemcileri üstlenirdi. Sonrasında ekran kartlarında GPU denilen bir birim ortaya çıktı ve 3D dahil birçok görsel hesaplamalayı işlemcilerimizin üzerinden aldı. Böylece hem işlemcilerimiz rahatladı :) diğer işlemler ile çok daha rahat ilgilenir oldular hem de söz konusu 3D işlemleri yapmaya özel tasarlanmış bir donanım artık söz konusu işlemlerden sorumlu olduğu için çok daha yüksek performans alınabildi.

Silverlight ile alakası nedir?

Aslına bakarsak Silverlight içerisinde de bolca görsel işlem yapıyoruz. En basit örnek olarak bir video oynatmayı bile ele alabiliriz. Biz videomuzu bir MediaElement ile sahneye koyduğumuzda video dosyasının orijinal yükseklik ve genişliği ile hiç ilgilenmeyiz. Oysa arkaplanda oynatılacak olan video uygun şekillerde MediaElement içerisine yerleştirilir ve aslında gerçek zamanlı olarak videonun içindeki her kare resim tekrar boyutlandırılır. Özellikle Full HD gibi yoğun data içeren yüksek çözünürlüklü videolarda aslında ciddi bir işlem gücü gerekiyor ve şu ana kadar da bu işlemleri Silverlight tarafında bilgisayarımızın işlemcisi üstleniyordu.

Oysa zaten bugün hali hazırda neredeyse her bilgisayarda en kötüsünden bir GPU yok mu? Neredeyse GPU'suz bilgisayar satın alamaz hale geldik. Tabi bu güzel bir gelişme ama bu gelişmeden Silverlight'ın da faydalanması gerek! İşte Silverlight 3.0 ile beraber "GPU Acceleration" denilen GPU (donanım) destekli işlemler ile uygulamanın hızlandırılması artık mümkün.

Video uygulamalarında Hardware Acceleration...

Hemen basit bir şekilde elimizdeki High Definition bir videoyu oynatan Silverlight uygulaması hazırlayalım. Ekrana bir MediaElement koyarak Source özelliğini ayarlamamız yeterli olacaktır.

[XAML]

<UserControl x:Class="SilverlightApplication10.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300">

</Grid>

</UserControl>

Yukarıdaki XAML kodu ile uygulamamızı çalıştırdığımda herhangi bir sorun yok. Video rahatlıkla oynuyor fakat kendi makinemde yaptığım testte CPU kullanımı %25 civarında geziyor. Acaba sadece bu videonun en azından tekrar boyutlandırma işini işlemciden alıp GPU'ya aktarsak işlemci kullanımı ne kadar düşer?

Silverlight içerisinde varsayılan ayarları ile GPU kullanımı gelmiyor. GPU kullanımını bir uygulamada açmak için söz konusu uygulamanın HTML sayfa içerisine yerleştirildiği OBJECT taglarına ekstra bir parametre geçmeniz gerekiyor.

[HTML]

<param name="EnableGPUAcceleration" value="true" />

</a>

</object>

Yukarıdaki HTML kodları arasında da görebileceğiniz üzere artık Silverlight uygulamamızı gösterecek olan OBJECT taglarına ek olarak bir de EnableGPUAcceleration parametresi veriyor ve söz konusu değeri de True olarak set ediyoruz. Böylece artık Silverlight uygulamamız GPU desteğine kavuşacak fakat ek olarak uygulama içerisinde hangi kontrollerin GPU tarafından oluşturulması gerektiğini de belirtmemiz gerekiyor. Bunun için kontrol bazında CacheMode ayarlanıyor. Şu anda sadece CacheMode olarak BitmapCache destekliyor. BitmapCache'in tam olarak ne yaptığına bir sonraki örneğimizde göz atacağız. Şimdilik MediaElement'imize nasıl BitmapCach uygulanır onu görelim.

[XAML]

<UserControl x:Class="SilverlightApplication10.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300">

<MediaElement.CacheMode>

<BitmapCache/>

</MediaElement.CacheMode>

</MediaElement>

</Grid>

</UserControl>

Silverlight içerisinde tüm nesnelerin artık bir CacheMode özelliği var. Bu özelliğe bir BitmapCache vererek donanım desteğini arkanıza alabilirsiniz. Yukarıdaki örneği donanım desteği ile çalıştırdığımda benim makinemde CPU kullanımı %25'ten %20'lere indi. Tabi bu yaptığınız işleme ve GPU'nuzun gücüne göre değişecektir.

Silverlight'ta CPU kullanımı farkları.

Unutmadan birkaç detaya göz atalım. Silverlight'ın donanım desteğini arkasına alabilmesi için hedef makinede DirectX9.0c yüklü olması gerekiyor. Eğer söz konusu yükleme makinede yok ise yine eski tarz yazılım bazlı sisteme geri dönülüyor. Mac ortamı için ekstra bir şart daha var; maalesef Mac ortamında donanım desteği sadece tam ekran modunda çalışabiliyor.

Şu an için GPU'ya aktarılan işlemler Transform, Rectangular Clipping ve Blending işlemleri. İleriki sürümlerde farklı işlemlerin de GPU tarafına aktarılabilmesine dair eklentiler vaatler arasında.

BitmapCache nedir?

Aslında BitmapCache çok dikkatli yaklaşılması gereken bir teknik. Örneğin her noktada BitmapCache kullanmaya başlarsak aslında performans kazanalım derken kaybetmemize de neden olabilir.

Bildiğiniz üzere Silverlight içerisinde sürekli olarak ekran vektörel olarak çiziliyor. Bazı durumlarda özellikle hızlı animasyonlarda anime ettiğiniz nesnenin görsel olarak sürekli yeniden çizilmesini istemeyebilirsiniz. Oysa o görsel vektörel bir tekrar çizme sürecinden geçirmek yerine daha önce çizilmiş vektörel sonucu bitmap olarak kullanmak performans noktasında ciddi katkı sağlayabilir.

BitmapCache'in performansa faydası.

Yukarıdaki grafik testini yaparken çok sayıda notka içeren bir vektörel çizim kullandım. Söz konusu vektörel çizim XAML kodunu makaleye yapıştırmıyorum çünkü hem anlamsız hem de gereğinden uzun :) Vektörel çizimi bir animasyon ile ekranda sürekli olarak büyütüp küçülttüm. Bu süreçte Normal şartlarda Silverlight her karede vektörel çizim vektör verisinden tekrar çizdi. BitmapCache ile GPU desteğini açtığımda ise ilk başta çizilen vektörel datadan bir Bitmap kopya alıp artık Bitmap koyayı büyütüp küçültmeye başladı. Aradaki %10'a yakın performans farkını yukarıdaki görebilirsiniz.

BitmapCache Mantığı.

Tabi unutmamak gerek ki vektörel yerine bitmap işlemler yaptırdığınızda sistemin ilk aldığı bitmap içerisinde kalite geçerli olacaktır ve nesne büyüdükçe tekrar çizilmediği için normal animasyonlardaki kalite elde edilemeyecektir. Fakat bazı durumlarda bu kalite farkının kullanıcı tarafından algılanması pek mümkün olmayabiliyor. İşte böyle durumlarda BitmapCache hayat kurtarabilir.

Neresi Cache'den geliyor? Neresi gelmiyor?

BitmapCache ayarlarını yaptıktan sonra uygulamanızı test ederken gerçekten ekranda nerelerin Cache'lenip Cache'lenmediğini görmek isterseniz yine HTML OBJECT tagına geri dönüp aşağıdaki parametreyi ekleyebilirsiniz. Böylece artık Silverlight uygulamanız çalışırken Cache'lenmeye yerleri ayrı renklerde gösterecektir.

[HTML]

<param name="EnableCacheVisualization" value="true" />

</a>

</object>

Hepinize kolay gelsin.