"Silverlight ile 31 Gün" yazi dizisinde ilk olarak mouse isleyicilerine odaklanarak basliyoruz.

Kullanicilarin çesitli sayfalari tikladiklari zamani, etkilesimli bir uygulama ile belirlemek istiyoruz. Bu yüzden, bu mouse olaylarinin nasil kullanilacagi konusunda yardimci olacagiz. Bu nedenle en basindan baslayarak ileriye dogru, yani daha üst seviyelere kadar adim adim ilerleyecegiz. Öncelikle Visual Studio 2010 üzerinden yeni bir silverlight projesi olusturalim. Projenin adini "SilverlightMouseEvents" verdim fakat isterseniz baska bir isim de verebilirsiniz.

Version olarak da Silverlight 3.0’i kullanacagiz.

Simdi mouse hareketlerinin ilki olarak MouseEnter olayina bir göz atalim.

MouseEnter Olayi

Bunu iki seviye üzerinden gösterecegim. Ilk olarak mouseEnter olayini Silverlight üzerinde bir kumanda etkinligi olarak gösterecegiz. Kullanicinin mouse ile yaptigi girdilerde herhangi bir bosluk olusmasi durumunda Silverlight bu duruma müdahale edecektir. Yani herhangi bir bosluk olmasi durumunda Silverlight devreye girecektir. Baslangiç olarak asagidaki gibi XAML dosyamizda bir elipse nesnesi olusturalim.

Simdi XAML kodlarimiza MouseEnter olayini girelim, fakat bunu kod olarak nasil yapilacagini gösterecegim. Asagidaki kod bloklarina dikkat etmelisiniz. Burada XML’larimiz satir içindeki isleyicilerle degistirilmistir.

Simdi de C# tarafinda kodlarimiza bir göz atalim.

Konuyu mümkün oldugunca kisa tutmaya çalisiyorum çünkü fazla uzamasi karmasaya neden olabilir. Ellipse de renklerin nasil degistirilecegini gösterecegim. Her yöntem için bir satir ekledim ve her degisiklik farkli bir renkte olacaktir. Bu noktada, web sayfasinin Silverlight alani üzerinde mouse imlecimizi dolastirdigimizda, çemberin rengi yesil olarak degisecektir, mouse’u çemberin üzerine getirdigimiz zaman ise renk mor’a dönecektir.

MouseLeave Olaylari

Bu durum hemen hemen MouseEnter ile aynidir. Fakat, ne zaman ki mouse bir seyleri terkettigi zaman yani herhangi bir alandan baska bir alana geçis yaptigi zaman, XAML kodlarinda tamamiyle bir degisme olayacaktir. Yani burada XAML koduna tekrar (bastan girmeye) basliyoruz.

Bu sefer bütün kodlari ard arda girecegim. Uygulamayi baslatirken otomatik olarak bazi kodlari ekleyecektir gerisini ise kendim ekleyecegim. Asagidaki resimden kodlari inceleyebilirsiniz.

MouseLeftButtonDown Olayi

Bu durumda, XAML kodlarini tekrar tekrar kullanmaya devam edecegim. Degisen tek sey XAML kodumuzun control sinifi olmasidir. Aslinda baskada degisen bir sey yoktur. Hem donanimda hem de XAML kodlarinda isleyicilerin nasil olacagini gösterdim. Böylece XAML kodlarini gördük. Simdi bu durumu kodlamada nasil olacagini bir sonraki örnekte gösterecegim.

MouseLeftButtonDown olayi gördügünüz gibi budur iste. Kullanici farenin sol tusuna bastiginda isik hüzmesi çikar. Bir sonraki kisimda MouseLeftButtonUp olayini anlatacagim için lütfen bu konuya dikkat edin ve göreceksiniz aralarinda önemli bir fark bulunmaktadir. O nedenle lütfen dikkat edin. Bu özellik sürükle & birak yaptigimizda açik bir sekilde anlasilir. Asagida buna örnek olarak hazirladigim kodlari inceleyebilirsiniz.

MouseLeftButtonUp Olayi

Simdiye kadar her etkinlik için bir olay isleyici yöntemi olusturduk. Bir çok durumda ancak birden fazla islemi yapabilmek için tek bir yöntemle bir çok ögeyi çagirabilmek için ayni kodu tekrar tekrar yazmak zor ve agir bir durumdur. Bunu tek tek yazmak baya zaman alir ve asiri yorucudur. Bu kodlari tekrar tekrar yazmaniza gerek yok. Bir sonraki örnegimizde, Stack Panel içerisine ikinci bir çember daha ekliyorum. Arka planda ikinci bir olay daha var. Asagida XAML kodlarimizi inceleyebilirsiniz.

Simdi her iki olayida çagirdik ve istedigimiz sey, bir olay olurken diger olayinda olmasidir. Yani , MouseLeftButtonUp devreye girdigi zaman, ayni zamanda arka planda degisecektir. Her iki görevi tek kod içerisine gömdük. Asagida kodlarimizi inceleyebilirsiniz.

Aslinda bu yöntemler ellipse basvurularini yakalamak için vardir. "Sender" bu bilgileri içermektedir, yani biz bir renk seçmeden önce bir basvuru yapmaktayiz ve bu basvuruyu yakalamak için bu kodlari olusturmaktayiz.

MouseMove Olayi

Bu son örnegimizde, MouseMove olayina göz atacagiz. Her konumdan önce mouse hareket etmektedir. Uygulamanin tamamini kontrol etmek için bu kodu atayabilirsiniz veya uygulamanin sadece belli bir ögesini kontrol edebilirsiniz. Sürükle & birak ile her iki durumda dahil olmak üzere bir çok konuda pek sey yapabilirsiniz. Bir sonraki yazim bu durumu daha kapsamli olarak ele almaktadir.

Bu sefer ki XAML kodumda bir TextBox var. Birinin ismi Xbox digerinin ismi ise YBox. Mouse imleci hareket ettikçe X ve Y koordinatlarini vererek hangi kutulara giderse o koordinatlarin devreye girmesi için ayarlariz.

Yukaridaki yazi ve örneklerin tamamini dikkatle okuyup incelediyseniz, bundan sonra gelecek olan kod muhtemelen daha karmasik gelmeyecektir. Fakat bu kez mouse’un mevcut yerini belirlemek için sadece metin kutularina degerleri atayip, MouseEventArgs metodunu kullanacagiz.

Bölüm Özeti

Bu konu ile Silverlight’da mouse hareketlerine bagli olaylari hizlica bir giris yapip kisa örneklerle incelemis olduk. Bir sonraki yazi dizimizde Silverlight’ta Ekran Geçislerine göz atacagiz. Faydali olmasi temenisiyle...

Haberci Destek Tim adina çevirisi CW-XL- tarafindan yapilmistir.