Bizim Blog - Windows Phone 7'de Touch Programlamaya Giriş

Windows Phone 7'de Touch Programlamaya Giriş

Windows Phone 7'nin ilk duyurularında yapılan açıklamalarda özellikle WP7 ile çalışacak cihazlarla ilgili bazı şartların yerine getirilmesi gerektiğinin açıklanması çok sevindirici oldu. Bu şartlardan biri de cihazların WVGA (800x480) 4 point multitouch capacitive ekrana sahip olmaları şartıydı. Bu şartın WP7 yayınlanana kadar var olmaya devam edip etmeyeceğini bilemeyiz ama şimdiden WP7 dünyasında Silverlight ile Multitouch programlamaya ufak bir giriş yapabiliriz.

WP7 için yayınlanan Developer Tools paketini bilgisayarınıza yüklediğinizde yanında gelen emülatör aslında Multitouch emülasyonunu da bir anlamda destekliyor. Eğer emülatörü çalıştırdığınız sistem bir Windows 7 ise ve hali hazırda donanım / bilgisayar multitouch bir ekrana sahipse bu doğrudan emülatör üzerinde de WP7 arayüzünde Multitouch özelliklerini kullanabileceğiniz anlamına geliyor. Böylece rahatlıkla development ortamınıza da sahip olabiliyorsunuz. Bu yazımıda WP7 üzerindeki Silverlight'ın Multitouch yaklaşımına ayrıca göz atmamız gerekecek çünkü normal Silverlight Multitouch API'lerinden farklı olarak şu anki mobil ortamda Silverlight kabaca WPF'e çok daha yakın API'ler sunuyor. Özellikle Silverlight 3 veya 4'teki gibi kendi ManipulationProcessor'ınızı yazmanıza gerek kalmaması çok hızlı sonuçlar almanızı sağlıyor.

[XAML]

<Image.RenderTransform>

</TransformGroup>

</Image.RenderTransform>

</Image>

</Grid>

Yukarıdaki XAML kodu örnek uygulamamızın ana ekranındaki Content kısmını temsil ediyor. Hemen projemize bir resim ekledikten sonra onu gösterecek Image kontrolünü de sahneye alıyoruz. Image nesnemizle ilgili pozisyon ve boyut değişikliği yapacağımız için uygun Transform nesnelerini de gruplayarak RenderTransform özelliğine atıyoruz. Böylece bu Transform'lara verdiğimiz isimlerle kod kısmından ulaşarak rahatlıkla resmin boyutunu ve konumunu değiştirebileceğiz. Dikkat edilmesi gereken nokta Touch durumunu yakalamak istediğiniz kontrolün ManipulationDelta event'ında bir listener ataçlamak. Peki nedir bu ManipulationDelta? Aslında bu otomatik olarak arka planda çalışan manipulasyon işlemi sonrasında gerekli hesaplamalar da yapıldıktan sonra çalışacak olan event. Böylece biz TouchPoint'ler arası koordinat değişikliklerinden kaynaklanan hesaplamaların sonuçları elde edildiğinde haberdar edileceğiz. Söz konusu event'ın argümanları üzerinden de hesaplamaların sonuçlarını alabileceğiz.

[C#]

private void ContentGrid_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)

{

if (e.CumulativeManipulation.Scale != null)

{

ImageScale.ScaleX = e.CumulativeManipulation.Scale.X;

ImageScale.ScaleY = e.CumulativeManipulation.Scale.Y;

}

ImageTranslate.X = e.CumulativeManipulation.Translation.X;

ImageTranslate.Y = e.CumulativeManipulation.Translation.Y;

e.Handled = true;

}

Eventimiz içerisinde kod sanırım daha basit olamazdı! Argüman üzerinden gelen CumulativeManipulation nesnesi içerisinde tüm yeni hesaplanmış değerler bulunuyor. Tek yapmamız gereken özünde bu değerleri elimizdeki uygun nesnelere transfer etmek. Scale konusunda bir if kontrolü olduğunu göreceksiniz. ManipulationDelta eventı kullanıcı tek TouchPoint ile birşeyler yaptığında da çalışıyor. Yani kullanıcı tek parmağı ile birşeyleri sadece yerinden oynatıyor da olabilir. Böyle bir durumda Scale özelliği tabi ki null geliyor fakat Translation dolu gelmeye devam ediyor. Bu nedenle bir if kontrolü ile durumu kontrol altında tutmak mantıklı olabilir.

Hareket ve hız algılama!

Touch telefonlarda oluşan alışkanlıkardan biri de ekranda tek parmak ile sağa, sola doğru çizgiler oluşturarak aslında ekrandaki görseli ekranın sağına veya soluna itme hareketidir. Bu gibi bir işlevsellik için yine Manipulation sistemi kullanılabilir fakat bu sefer ManipulationDelta yerine ManipulationCompleted event'ına bir listener ataçlayabiliriz. Böylece tüm Manipulation işlemi bittiğinde son sonucu toplam olarak alabiliriz.

[C#]

public MainPage()

{

InitializeComponent();

this.ManipulationCompleted += new EventHandler<ManipulationCompletedEventArgs>(MainPage_ManipulationCompleted);

}

void MainPage_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)

{

if (e.FinalVelocities.LinearVelocity.X > 1000 && e.FinalVelocities.LinearVelocity.Y > 500)

{

SolaGit.Begin();

}

Yukarıdaki kod içerisinde ManipulationCompleted'da argüman üzerinden kullanıcının yaptığı hareketin hızını vektör olarak alıyoruz. FinalVelocities altında yer alan LinearVelocity özelliğinin X ve Y değerlerini kontrol ederek hangi yöne hangi hızda hareket yapıldığını kontrol edebilirsiniz. Yapılan hareketin yönüne ve hızına göre de farklı bir animasyon çalıştırılarak ekranda uygun değişiklikler yapılabilir.

Bu yazımızda hızlıca WP7 üzerinde Silverlight tarafındaki Touch API'lerine giriş yaptık. Özellikle WPF'e benzemesi ile API'ler çok tanıdık. Diğer yandan kişisel bir yorum olarak özellikle WP7'ye özel eklenen API'lerin isimlendirilmelerinden yola çıkarak üzerlerinde son sürüme kadar epey değişiklik olacağını da tahmin etmek zor değil.

Hepinize kolay gelsin.
Daron Yöndem