Silverlight ile 31 Gün yazi dizimizin 5.günündeyiz. Bugünkü yazimizda Silverlight’ta Drag & Drop(sürükle & birak) uygulamalarinin nasil kullanilabilecegini görecegiz.
Neden Sürükle & Birak?
Sürükle & Birak, üzerinde düsünülmesi gereken önemli bir özelliktir. Çünkü bilgisayarda sürekli kullandigimiz seylerdendir ama asla ne oldugu konusunda düsünmemisizdir. Dosyalari Geri Dönüsüm Kutusu’na tasirken veya bir dokümandaki yazilari, baska bir yere tasirken bunu çokça kullaniriz. Bu sadece weble iliskilendirilen genel bir özellik degildir. Zaten bu da bu algimizi degistirmemiz için sadece baska bir sebeptir.
Birkaç tane XAML nesnesi olusturun.
En basit haliyle, 2 dikdörtgen ve 1 elips olusturuyorum. Bir tane çemberimiz, bir tane karemiz ve bir de dikdörtgenimiz olacak ve her biri de farkli renkte olacak. XAML söyle olmali:
Bir miktar olay görüntüleyici olusturun.
Yazimizin geri kalan kisminda, Page.xaml dosyamizin arkaplaninda çalisan kodlar(code-behind) yer alacaktir.Ilk adimimiz, formumuza bir miktar olay görüntüleyici eklemek. Bunu baslangiç metodumuzda yapabiliriz ama bir kaç satir kodumuz oldugundan bunu kendi metoduna çikarmanizi öneririm. Benim baslangiç ve yeni InitializeEvents() metodlarim söyle görünmektedir:
Shape_MouseLeftButtonDown
MouseLeftButtonDown olay metodumuzda bir kaç seyi belirlememiz gerekir. Birincisi; mouse’un su an nerede oldugunu bilmeliyiz. Bu oldukça önemlidir. Ve nereye gittigini de bilmemiz gerekecektir. Iste ihtiyacimiz olan sey:
isMouseCaptured isminde bir boolean degeri ayarladigimi da farkedeceksiniz. Bu MouseMove metodumuz için gereklidir. Bu sekilde, mouse hareketlerinin bilinip bilinmedigini kontrol edebilecegiz. Tüm hamlelerimiz buna bagli olacaktir. Bu boolean degerlerin(mouseX ve mouseY degiskenlerimizin) mümkün oldugunca iyi sekilde class’imizin özelliklerine uygun olarak tanimlandigindan emin olun.
Shape_MouseMove
Gelelim metodumuzda fasulyenin faydalarina. Iste burada dananin kuyrugu kopacak. Mouse’un, formun pozisyonundan ne kadar uzakta oldugunu hesaplamamiz gerekecek. Mouse’un üst ve sol pozisyonlarini da mouse’un yeni pozisyonu olarak ayarlamamiz gerekecek.
deltaX ve deltaY degerleri, mouse’un nereden nereye geldigini bulup, aradaki mesafeyi hesapliyor. Bu datayi, mouse’un bir sonraki pozisyonuyla su anki pozisyonunun formda birbiri ile iliskilendirilmesinde kullaniyoruz. iki tane s.SetValue degerlerimiz de, su anki formda yeni Üst ve Sol özelliklerin ayarlanmasinda yer aliyor. Son olarak, mouse’un nerede oldugunu kaydedelim ki bir sonraki sefere elimizde karsilastiracak bir seylerimiz bulunsun da metod son bulsun.
Shape_MouseLeftMouseButtonUp
Bu metod, daha çok bir temizlik metodudur. Boolean degerlerimizi false olarak ayarliyoruz, mouse hareketlerini serbest birakiyoruz ve mouseX ve mouseY degerlerinin de içini bosaltiyoruz. Bakin söyle görünüyor:
Çalisiyor, ama hala bir problem var.
Bu noktada, Silverlight’ta çalisan bir Sürükle & Birak örnegine ihtiyaciniz var. Zaten farkedeceksiniz de. Mesela belli bir yörüngede sürükleme yaparken, diger formlari arkaplana atacaktir. Düzgün çalisan bir Sürükle & Birak örneginde, sürükledigimiz nesnelerin her zaman üstte olmasini isteriz. Bunu yapmak için de sürükledigimiz objeyi birakabilmek için formun z-index’ini yeniden düzenlemeliyiz. Bu da bu islemi Shape_MouseLeftButtonDown metodunda yapacagiz demek oluyor. zindex isminde farkli bir global degisken olusturdum. Forma her tikladigimda, formun zindex degerini bir arttiriyorum ve birer de degiskenlere ekliyorum. Buradaki 2 satirlik kod, bu islemi bizim metodumuzda nasil yaptigimizi gösteriyor:
s.SetValue(Canvas.ZIndexProperty, zIndex);
zIndex++;
Örnek Kod
Simdi, tamamen fonksiyonel bir Sürükle&Birak örnegine ihtiyaciniz var. Benim üzerinde çalistigim tüm kodlari görmek istiyorsaniz, buradan color=#0000cc Silverlight Sürükle&Birak örnegimi indirebilirsiniz. Zaten bu örnek, sayfanin alt kisminda da çalisiyor olmali, eger çalismiyorsa buraya tiklayarak da çalisan bir color=#0000cc Silverlight Sürükle&Birak örnegini görebilirsiniz.
Haberci Destek Tim adina çevirisi Hanefi tarafindan yapilmistir.
