Silverlight’ta Mouse Hareketleri-Ders 1

Silverlight yazı dizisinde ilk olarak mouse işleyicilerine odaklanarak başlıyoruz.

Kullanıcıların çeşitli sayfaları tıkladıkları zamanı, etkileşimli bir uygulama ile belirlemek istiyoruz. Bu yüzden, bu mouse olaylarının nasıl kullanılacağı konusunda yardımcı olacağız. Bu nedenle en başından başlayarak ileriye doğru, yani daha üst seviyelere kadar adım adım ilerleyeceğiz. Öncelikle Visual Studio 2010 üzerinden yeni bir silverlight projesi oluşturalım. Projenin adını “SilverlightMouseEvents” verdim fakat isterseniz başka bir isim de verebilirsiniz.

Version olarak da Silverlight 3.0’ı kullanacağız.

Şimdi mouse hareketlerinin ilki olarak MouseEnter olayına bir göz atalım.

MouseEnter Olayı

Bunu iki seviye üzerinden göstereceğim. İlk olarak mouseEnter olayını Silverlight üzerinde bir kumanda etkinliği olarak göstereceğiz. Kullanıcının mouse ile yaptığı girdilerde herhangi bir boşluk oluşması durumunda Silverlight bu duruma müdahale edecektir. Yani herhangi bir boşluk olması durumunda Silverlight devreye girecektir. Başlangıç olarak aşağıdaki gibi XAML dosyamızda bir elipse nesnesi oluşturalım.

Şimdi XAML kodlarımıza MouseEnter olayını girelim, fakat bunu kod olarak nasıl yapılacağını göstereceğim. Aşağıdaki kod bloklarına dikkat etmelisiniz. Burada XML’larımız satır içindeki işleyicilerle değiştirilmiştir.

Şimdi de C# tarafında kodlarımıza bir göz atalım.

Konuyu mümkün olduğunca kısa tutmaya çalışıyorum çünkü fazla uzaması karmaşaya neden olabilir. Ellipse de renklerin nasıl değiştirileceğini göstereceğim. Her yöntem için bir satır ekledim ve her değişiklik farklı bir renkte olacaktır. Bu noktada, web sayfasının Silverlight alanı üzerinde mouse imlecimizi dolaştırdığımızda, çemberin rengi yeşil olarak değişecektir, mouse’u çemberin üzerine getirdiğimiz zaman ise renk mor’a dönecektir.

MouseLeave Olayları

Bu durum hemen hemen MouseEnter ile aynıdır. Fakat, ne zaman ki mouse bir şeyleri terkettiği zaman yani herhangi bir alandan başka bir alana geçiş yaptığı zaman, XAML kodlarında tamamiyle bir değişme olayacaktır. Yani burada XAML koduna tekrar (baştan girmeye) başlıyoruz.

Bu sefer bütün kodları ard arda gireceğim. Uygulamayı başlatırken otomatik olarak bazı kodları ekleyecektir gerisini ise kendim ekleyeceğim. Aşağıdaki resimden kodları inceleyebilirsiniz.

MouseLeftButtonDown Olayı

Bu durumda, XAML kodlarını tekrar tekrar kullanmaya devam edeceğim. Değişen tek şey XAML kodumuzun control sınıfı olmasıdır. Aslında başkada değişen bir şey yoktur. Hem donanımda hem de XAML kodlarında işleyicilerin nasıl olacağını gösterdim. Böylece XAML kodlarını gördük. Şimdi bu durumu kodlamada nasıl olacağını bir sonraki örnekte göstereceğim.

MouseLeftButtonDown olayı gördüğünüz gibi budur işte. Kullanıcı farenin sol tuşuna bastığında ışık hüzmesi çıkar. Bir sonraki kısımda MouseLeftButtonUp olayını anlatacağım için lütfen bu konuya dikkat edin ve göreceksiniz aralarında önemli bir fark bulunmaktadır. O nedenle lütfen dikkat edin. Bu özellik sürükle & bırak yaptığımızda açık bir şekilde anlaşılır. Aşağıda buna örnek olarak hazırladığım kodları inceleyebilirsiniz.

MouseLeftButtonUp Olayı

Şimdiye kadar her etkinlik için bir olay işleyici yöntemi oluşturduk. Bir çok durumda ancak birden fazla işlemi yapabilmek için tek bir yöntemle bir çok öğeyi çağırabilmek için aynı kodu tekrar tekrar yazmak zor ve ağır bir durumdur. Bunu tek tek yazmak baya zaman alır ve aşırı yorucudur. Bu kodları tekrar tekrar yazmanıza gerek yok. Bir sonraki örneğimizde, Stack Panel içerisine ikinci bir çember daha ekliyorum. Arka planda ikinci bir olay daha var. Aşağıda XAML kodlarımızı inceleyebilirsiniz.

Şimdi her iki olayıda çağırdık ve istediğimiz şey, bir olay olurken diğer olayında olmasıdır. Yani , MouseLeftButtonUp devreye girdiği zaman, aynı zamanda arka planda değişecektir. Her iki görevi tek kod içerisine gömdük. Aşağıda kodlarımızı inceleyebilirsiniz.

Aslında bu yöntemler ellipse başvurularını yakalamak için vardır. “Sender” bu bilgileri içermektedir, yani biz bir renk seçmeden önce bir başvuru yapmaktayız ve bu başvuruyu yakalamak için bu kodları oluşturmaktayız.

MouseMove Olayı

Bu son örneğimizde, MouseMove olayına göz atacağız. Her konumdan önce mouse hareket etmektedir. Uygulamanın tamamını kontrol etmek için bu kodu atayabilirsiniz veya uygulamanın sadece belli bir öğesini kontrol edebilirsiniz. Sürükle & bırak ile her iki durumda dahil olmak üzere bir çok konuda pek şey yapabilirsiniz. Bir sonraki yazım bu durumu daha kapsamlı olarak ele almaktadır.

Bu sefer ki XAML kodumda bir TextBox var. Birinin ismi Xbox diğerinin ismi ise YBox. Mouse imleci hareket ettikçe X ve Y koordinatlarını vererek hangi kutulara giderse o koordinatların devreye girmesi için ayarlarız.

Yukarıdaki yazı ve örneklerin tamamını dikkatle okuyup incelediyseniz, bundan sonra gelecek olan kod muhtemelen daha karmaşık gelmeyecektir. Fakat bu kez mouse’un mevcut yerini belirlemek için sadece metin kutularına değerleri atayıp, MouseEventArgs metodunu kullanacağız.

Bölüm Özeti

Bu konu ile Silverlight’da mouse hareketlerine bağlı olayları hızlıca bir giriş yapıp kısa örneklerle incelemiş olduk. Bir sonraki yazı dizimizde Silverlight’ta Ekran Geçişlerine göz atacağız. Faydalı olması temenisiyle…

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak.