Windows Phone 7'de Touch Programlamaya Giriş

0 dakikada yazıldı

8807 defa okundu

Düzenle

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]

<Grid
ManipulationDelta
="ContentGrid_ManipulationDelta"  x:Name="ContentGrid"
Grid.Row
="1">

    <Image
RenderTransformOrigin
="0.5,0.5"
Height
="254" HorizontalAlignment="Left"
Margin
="70,66,0,0" Name="image1"
Stretch
="Fill" VerticalAlignment="Top"
Width
="336" Source="/WindowsPhoneApplication1;component/Images/Koala.jpg" >

        <Image.RenderTransform>

            <TransformGroup>

                <ScaleTransform
x
:Name="ImageScale" />

                <TranslateTransform x:Name="ImageTranslate" />

            </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.