Bu bölümde Silverlight ile 31 Gün yazi dizimizin ikincisi olan "Silverligth’ta Ekran Geçisleri" konusuna göz atacagiz. Bunun için öncelikle yine VS 2010 programimizi açip "SilverlightScreenTransitions" adinda yeni bir Silverlight uygulamasi olusturuyoruz.
Simdi geçisler için bir tane daha XAML dosyayi olusturmamiz gerekiyor. Resimde oldugu gibi proje adi üzerinde sag tiklayarak Add > New item > Silverlight User Control seçnegini seçip ainda Page2.xaml vererek yeni bir XAML dosyayi olusturuyoruz.
Simdi varsayilan “Page.xaml” dosyasina geri dönelim. Yeni sayfamizda gezinti yapabilmemiz için bize izinleri saglayacak olan, herhangi bir link, bir baglanti(buton) veya gezinmeyi saglayacak herhangi bir seye ihtiyacimiz var. Bunun için asagidaki gibi kodlarimizi yazalim.
Controlümüzün tam ortasina kirmizi bir dikdörtgen yerlestiriyoruz. Daha sonra ise, sayfayi düzenlemeye ihtiyacimiz olacak. Amacimiz sadece “Tebrikler!" metnini sayfaya koymak. Bu nedenle Page2.xaml dosyamiza asagidaki gibi kodlarimizi giriyoruz.
Bu noktada, 2 XAML dosyamiz mevcuttur, biri diktörtgen(olay isleyicisi ile birlikte), digeri ise sadece “TextBlock” tur. Burada dikdörtgene tikladigimiz zaman, baska bir XAML dosyasina gitmek istiyoruz. Bunu nasil yapabilirsiniz (VB.NET’te, sadece noktali virgül gözardi edilebilir). Bu satira sadece page.xaml.cs(veya .vb) isleyici kodunu ekleriz.
this.Content = new Page2();
Simdi baska bir ekrani nasil alacagimizi biliyoruz, o zaman geçisler hakkinda daha detayli bilgi verebiliriz. Ilk geçisi tanimlayarak baslayalim:
Hareketli bir animasyon dosyasindan baska bir XAML dosyasina aktarma olayi. Daha iyi anlayabilmek için powerpoint de slaytlar arasindaki geçisleri düsünün. Ekrani karartmalar, aydinlatmalar vs. Simdi buna bir örnek olusturalim.
Geçisler için Içe ve Disa Dogru Uygulanan Ekran Karartma Islemi
Ikinci slaytimiza geçerken bir karartma islemi olusturacagiz. Bunun için bir XAML dosyasinda animasyon olusturacagiz. Page.xaml’de disa yönelik(fade out), Page2.xaml’de ise içe yönelik(fade in) karartma gerçeklestirecek animasyonlari olusturacagiz. Her ikisi arasinda yazmis oldugumuz kodu kullanarak, bir sonra ki dosyaya geçmemiz gerekecek.
Page.xaml Anismasyonu
Buradaki tek fark benim ortaya koydugum yeni Storyboard’dir. Sadece bir saniye içinde %100’den %0’a kadar LayoutRoot ile bir donukluk olur.
Page2.xaml Animasyonu
Bu dosyada tam tersi olarak animasyon yapiyoruz, fakat düsünmemiz gereken baska bir sey daha var. Animasyonumuz %0’dan %100’e kadar bir donukluk almasina ragmen, LayoutRoot ögesinin donukluk oranin %0 olduguna kesinlikle emin olmamiz gerekmektedir. Bu olmadan XAML dosyasi %100’lük bir oranla yüklenecektir. Daha sonra bu 0’dan 100’e kadar degerler oraninda kararmaya baslayacaktir. Tam olarak istenen etki bu degildir. LayoutRoot ögesinde belirtilmis donukluklari göreceksiniz.
Animasyon Olay Isleyici
Bunun için kodun gerisini açik bir sekilde degistirmek gerekiyor. Tiklama yaptigimiz zaman bir animasyona çagrisim yapacagiz. Fakat bir animasyonun nasil tamamlanacagini biliyor musunuz? Teknik olarak ifade etmek gerekirse; bir tane timer olusturup bir saniye bekledikten sonra ikinci XAML dosyasini çagiririz. Fakat bu karisik ve herhangi bir siralamaya bagli olarak gerçeklesmeyecektir. Neyse ki bizim olay isleyicilerimiz animasyonlara ekleme yapabiliyor. Yani bizim fade out animasyonumuzun tamamlandigina dair “Islem Tamamlandi!” seklinde bilgi veren olay isleyicisi olusturabiliriz. Animasyon tamamlandiktan hemen sonra bu olay isleyicisi çagrilmis olacaktir. Asagidaki ekran görüntüsünden kodlari inceleyebilirsiniz.
Bir sonraki XAML dosyasina geçis daha basittir baslangiç yönteminde, olusturduklarimiza fadeOut animasyonu diyoruz.
Makelemizin sonuna geldik, bir baska çalismada görüsmek üzere...
Haberci Destek Tim adina çevirisi CW-XL- tarafindan yapilmistir.
