Silverlight’ı kullanarak animasyon denemesi yapanlarınız olmuştur. Kutuları hareket ettirmek, topları yuvarlamak, renk değişiklikleri yapmak vs. Bunların verdiği haz şöyle dursun biz Silverlight kullanarak bir web sitesi için Kullanıcı Giriş ekranı yapalım. Bu sayede bir animasyonu programlama diliyle nasıl kontrol edebildiğimizi de görmüş oluruz.
Başlayalım…
Expression Blend programını çalıştırıyoruz ve Silverlight 2 Application ‘ ı seçiyor Name kısmından projemize isim veriyor Language kısmından da kullanacağımız programlama dilini seçip OK diyoruz.
Çalışma alanımız karşımıza geliyor. İlk başta çalışma alanımızı kullanacağımız boyutlara getirelim. Bunu iki şekilde yapabiliriz.
Birincisi: XAML tarafına geçip kodlardan UserControl tagındaki Width ve Height değerlerini değiştirerek.
İkincisi: Properties tabından Layout kısmına gelip Width ve Height değerlerini değiştirerek.
Bu tür değişiklikleri ilgili panelden yapabildiğimiz gibi XAML kodlarından da yapabiliyoruz fakat makalenin devamında kolaylık ve anlaşılabilirlik açısından XAML tarafını kullanmayacağız.
Çalışma alanımızın boyutlarını da ayarladığımıza göre artık gerekli nesneleri projemize ekleyebiliriz. Kullanıcı adı, şifre ve menüdeki yazılar için ToolBar’dan TextBlock ekleyelim. Kullanıcı giriş paneli yaptığımız için bize birer TextBox, PasswordBox ve Buton gerekiyor, bunları da ToolBar ‘ın en altındaki ( >> ) çift ok simgesinden Asset Library ‘i açıp ekliyoruz. Eklerken yukarıdaki Search kısmını kullanabilirsiniz ayrıca Asset Library de bulamadığınız bir şey olduğunda Show All kısmının işaretli olup olmadığını kontrol ediniz.
Projede kullanacağımız araçları ekledik şimdi ufak bir iki düzenleme yapalım, arkaya bir çerçeve yukarı bir başlık vs..
Evet panelimizi şekil olarak elde etmiş bulunuyoruz.
Şimdi sıra animasyon vermeye geldi. Benim aklımdaki animasyon kullanıcı Giriş butonuna tıkladığında ekrana eklediğimiz tüm nesneler çerçevenin ortasına doğru gelerek kaybolsunlar ve kullanıcının karşısına kullanıcı menüsü gelsin.
Animasyona başlarken ilk çalışma ortamımızı animasyona göre ayarlayalım. Menüden Window->Active Workspace->Animation Workspace yolunu izleyerek çalışma alanımızı değiştiriyoruz.
Animasyon çalışma alanında ekrana Objects and Timeline paneli geliyor. Bu panel yardımıyla objelerimizi yönetip onlara animasyon verebileceğiz.
Animasyona başlamak için ilk olarak bir Storyboard oluşturmamız gerekiyor bunu Objects and Timeline panelimizde objelerin üst kısmında bulunan ( +) artı işaretine tıklayak oluşturuyoruz. Tıkladığımızda karşımıza bir pencere geliyor ve bizden Storyboard ismi girmemizi istiyor. Ben Storyboard adı olarak “LoginAnimation” yazdım.
Ekledikten sonra objelerimize isim vermemiştik. Objelerimizi programlama esnasında daha kolay yakalayabilmek için isimlendirelim.
Panelimizden objeleri tek tek seçerek Properties daki Name kısmından onlara isim veriyoruz.
Evet isim verme işlemimizde bittiğine göre artık animasyon verme kısmına gelebiliriz. Bir objeye animasyon verebilmek için önce objeyi seçiyor ve ilk saniyeye Keyframe ekliyoruz.
Keyframe eklemek için Timeline üzerinde bulunan, yanında süre yazan, küçük (+) artı simgesine tıklıyoruz. Üzerine gelince Record Keyframe yazıyor. Daha önce tıkladığımız Storyboard ekleme butonuyla karıştırılmasın.
Play butonuna basıp yaptığınız ilk hareketi izleyebilirsiniz. Biz sadece ilk ve son saniyedeki duruma karar verdik aradaki tüm geçişleri Silverlight bizim için halletti.
Yapacağımız animasyon için objelerin ekranın ortasına gelip kaybolmalarından söz etmiştik. Kaybolma efekti için Opacity ve Visibility özelliklerini kullanacağız. Yani obje %100 Opacity değerine sahipken ekranın ortasına geldikçe bu değer %10 ‘ a kadar düşecek tam ortaya geldiğinde Visibility özelliği Collapsed moduna geçecek ve objemiz ekrandan kaybolacak.
Bu iki özelliğe de Properties panelinin Appearance bölümünden ulaşıyoruz.
Ekrandaki bütün objelerimize aynı şekilde animasyon verdikten sonra projemizi kaydediyoruz.
Giriş yapıldığında gelecek menüye de yukarıdan aşağıya doğru kayarak gelme animasyonu veriyoruz.
Animasyon işlemimiz bitti ve artık Expression Blend de bir işimiz kalmadı. Gerisini Visual Studio ‘ dan halledeceğiz.
Normalde bir web projesi oluştururken izlenmesi gereken en ideal yol önce Visual Studio ‘ yu çalıştırmak oradan bir Silverlight projesi oluşturmak ve o projeyi Expression Blend tarafında açmaktık. Bu sayede projemize web için gerekli dosyalarda otomatik olarak eklenecektir. Fakat bu dosyalar kalabalık yapıp kafa karıştırmasın diye biz projemizi direk Expression Blend de oluşturduk. Bu şekilde de projemiz internet tarayıcıda çalışacaktır.
Bu kısa bilgiden sonra kaldığımız yerden devam ediyoruz.
Visual Studio ‘ muzu çalıştırıp Expression Blend de oluşturduğumuz projeyi Open Project diyerek açalım.
Projemizdeki dosyaları Solution Explorer panelinden görebiliriz. Biz buradaki dosyalardan sadece Page.xaml ve Page.xaml.vb dosyalarını kullanacağız. Aslında Page.xaml ‘ le de bi işimiz yok. Biz objeleri direk Page.xaml.vb dosyasından yakalayarak ilerleyeceğiz.
Yapacağımız işlemleri kısaca gözden geçirelim.
Butonumuzun Click olayı sayesinde TextBox ve PasswordBox bölümlerindeki girilen verileri önceden belirlenen bilgilerle karşılaştıracağız, eğer bilgiler doğruysa hazırlamış olduğumuz animasyon oynayacak ve kullanıcının karşısına menü gelecek
Söylediğimiz gibi ilk olarak butonumuzun Click olayıyla TextBox ve PasswordBox bölümlerindeki verileri yakalayan ve doğru bilgilerle karşılaştıran kodu yazalım.
Private Sub buton_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles buton.Click
Dim kadi, pass, kullanicidata, passworddata
kullanicidata = "omer_frk"
passworddata = "Medrese-i Yusufiye"
kadi = kadibox.Text
pass = sifrebox.Password
If kadi = kullanicidata And pass = passworddata Then
’Girilen bilgiler doğruysa bu bölümdeki kodlar çalışacak.
Else
’Girilen bilgiler yanlışsa bu bölümdeki kodlar çalışacak.
End If
End Sub
Aslında kodlarımız bu kadar, geriye bir tek bilgilerin doğru veya yanlış olduğu durumlarda yapılmasını istediğimiz işlemlerin kodunu yazmak kalıyor.
Şayet bilgiler doğruysa animasyonumuz başlayacak ve kullanıcı menüsüne kavuşacak demiştik. Animasyonu başlatan kodumuzu yazalım.
LoginAnimation.Begin()
Bu tek satırlık kodu projemizde ilgili alana ekliyoruz.
Bir de bilgilerin yanlış olması durumunda çalışacak kodumuz var. Biz senaryonun bu kısmına göre bir animasyon hazırlamadığımız için sadece ekrandaki bir TextBox ‘ ın Text değerini değiştirerek bilgilerin yanlış olduğunu belirtelim.
baslik.Text = "Bilgiler Hatalı"
Bu durumu da bu tek satırlık kodla çözdük. Şimdi kodlarımızın son halini görelim.
Private Sub buton_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles buton.Click
Dim kadi, pass, kullanicidata, passworddata
kullanicidata = "omer_frk"
passworddata = "Medrese-i Yusufiye"
kadi = kadibox.Text
pass = sifrebox.Password
If kadi = kullanicidata And pass = passworddata Then
LoginAnimation.Begin()
Else
baslik.Text = "Bilgiler Hatalı"
End If
End Sub
F5 yapıyoruz ve projemizi test ediyoruz. Bir hata yapmadıysak bu haliyle projemiz çalışacaktır.
Artık web sitemizde sayfayı yenilemeden kullanıcı girişi işlemini yaptırmayı sağlayabiliyoruz.
