Kurumsal Otomasyon Çözümlerinde Zirve

Expression Blend ile silverlight örnek uygulama

Silverlight ile küçük bir örnek uygulama yapalım . Öncelikle bu örnekte kullanacağımız araçları bilgisayarınıza kurun.
–          Microsoft Expression Blend June 2008 Preview
–          Microsoft Silverlight Tools Beta 2 for Visual Studio 2008
–          Visual Studio 2008
Silverlight uygulamalarınızı sadece Visual  Studio kullanarakta tasarlayabilirsiniz ama Microsoft Expression Blend ‘deki kadar kolay olmayacaktır. Biz bu örnekte Tasarım işini Expression Blend’de kodlama işini ise Visual Studio’da yapacağız.
Blend’i açalım ve yeni bir Silverlight Application Başlatalım.
expression-blend-ile-silverlight-ornek-uygulama-1

expression-blend-ile-silverlight-ornek-uygulama-1

Sol tarafta Objects And Timeline kısmında yaptığınız animasyonları ve Toolbox tan sürükleyip bıraktığınız objeleri takip edebilirsiniz.  Sol taraftan seçtiğiniz objeye ait özellikleride sağ taraftaki Properties ekranından görebilirsiniz. Eğer Visual Studio kullanıyor iseniz pek yabancılık çekmiyeceğiniz bir yapı.
Öncelikle Objects and Timelines kısmından UserControl ‘u seçelim ve Height=200 Width=300 olarak değiştirelim.
Arkaplanı rengini değiştirme içinse yine sol taraftan Layoutroot’u seçelim ve Properties ekranından
Brushes kısmına gelelim. Burada seçtiğiniz kontrole ait renkleri belirlerken eğer tek renk verecek iseniz Solid Color Brush yada Gradient bir renk olacaksa Gradient Brush’ı seçebilirsiniz. Background’ı seçelim ve Gradient Brush diyerek renkleri seçelim.
expression-blend-ile-silverlight-ornek-uygulama-2

expression-blend-ile-silverlight-ornek-uygulama-2

Alttaki renk paletinde bulunan göstergeler size hangi renkler arasında geçiş olacağını belirtiyor. Burda 2 renk arasında geçiş var fakat eğer isterseniz alttaki bu renk paletine istediğiniz noktada tıklarsanız bir renk tercihi daha belirecektir.
expression-blend-ile-silverlight-ornek-uygulama-3

expression-blend-ile-silverlight-ornek-uygulama-3

LayoutRoot’un içine 3 tane TextBox sürükleyip bırakın. Name özelliklerini txtad,txtsoyad,txtyas ve Text Özelliklerini Adınız?,Soyadınız?,Yaşınız? Olarak değiştirelim. Textboxların altınada bir adet Button bırakalım name özelliğine Dugme yazalım.
expression-blend-ile-silverlight-ornek-uygulama-4

expression-blend-ile-silverlight-ornek-uygulama-4

Bu örnekte yapmak istediğimiz, uygulama ilk çalıştığı anda ekranda sadece en üstteki txtadi Textbox’ı gözükecek. Kullanıcı Adını yazdıktan sonra txtsoyadi TextBox’ı animasyon ile görüntülenecek ve sonra diğeri ve en son olarakta Button görüntülenecek. Gelelim animasyona, aslında Expression Blend ile çok pratik ve güzel animasyonlar hazırlayabilirsiniz.
expression-blend-ile-silverlight-ornek-uygulama-5

expression-blend-ile-silverlight-ornek-uygulama-5

Yeni bir StoryBoard ekliyelim ve ilk animasyonumuzu hazırlayalım. Ben ismine “SoyadiGelsin” diyorum siz farklı bir isim verebilirsiniz. StoryBoard’u eklediğiniz anda kayıt modunda bekliyecekdir. (“Yukarıdaki kırmızı nokta kayıt modunda olduğunuz anlamındadır”). Kayıt modunda yapacağınız her değişiklik animasyon olarak kaydedilecektir. txtsoyadi için bir animasyon hazırlayalım. (“Sol taraftan txtsoyadi’nı seçmeyi unutmayın”).
expression-blend-ile-silverlight-ornek-uygulama-6

expression-blend-ile-silverlight-ornek-uygulama-6

Öncelikler txtsoyad’ı için 0. Saniyede keyframe oluşturalım ve txtsoyad’i  Opacity özelliğini 0 yapalım. Ekledikten sonra 2. saniyeye geçelim ve Opacity özelliğini 100 yaparak txtsoyadi kendi etrafında 1 tur döndürün.
expression-blend-ile-silverlight-ornek-uygulama-7

expression-blend-ile-silverlight-ornek-uygulama-7

Son olarakta Yukarıdaki kırmızı noktaya basarık kayıt işlemini bitirin.Timeline’daki play tuşuna basarık yaptınığınız animasyonu deneyin. Eğer hata varsa tekrar kaydetmeyi deneyin.  Peki bu yaptığımız animasyon ne zaman çalışacak?.  Blend’i kapatmadan Visual Studio 2008 (VS)  başlatın Silverlight uygulamanızı VS’de açın. Page.xaml.cs dosyasına çift tıklayın. Şimdi Blend’e dönelim VS’niz açık kalsın. txtad TextBox’ını seçin ve Properties Ekranından Events’i tıklayın (sağ üst köşede). Burada yapmak istediğimiz Kullanıcı Mouse’u txtad Texbox’ından ayrıldığı anda bizim az önce oluşturduğumuz animasyonu çalıştırmak. MouseLeave Eventi bulun ve adayril yazarken event’i oluşturun. VS’ ye geri dönerseniz event’in oluşturulduğunu göreceksiniz.Buraya aşağıdaki kodu yazın.
private void adayril(object sender, MouseEventArgs e)
{
     txtsoyad.Visibility = Visibility.Visible;
     SoyadiGelsin.Begin();// burada storyboard’a kaydettiğimiz animasyonu çalıştırıyoruz.
}
Yukarıdaki Constructure’ıda aşağıdaki gibi düzenleyin.Uygulamamız çalıştığında diğer kontroller gizli olarak gelsin.
public Page()
{
       // Required to initialize variables
       InitializeComponent();
       txtsoyad.Visibility = Visibility.Collapsed;
       txtyas.Visibility = Visibility.Collapsed;
       dugme.Visibility = Visibility.Collapsed;
}
         Dilerseniz Kullanıcı mouse ile tekrar txtad üzerine geldiği anda txtsoyadi tekrar gizleyelim. Bunu için txtad ‘ın MouseEnter eventini az önce yaptığımız şekilde oluşturun ve aşağıdaki kodu yazın.
txtsoyad.Visibility = Visibility.Collapsed;
txtyas.Visibility = Visibility.Collapsed;
dugme.Visibility = Visibility.Collapsed;
       Bundan sonra yapmamız gereken txtyas için yeni bir StoryBoard oluşturup yukarı yaptığımız adımları aynen txtyas içinde yapmak.
      Asp.NET uygulamanıza bu SilverLight’ı eklemek isterseniz derleme sonunda üretilen .xap dosyası sizin için yeterli olacaktır.Web uygulamanıza Silverlight kontrolunu ekleyin ve Source olarak Blend ile hazırladığımız .xap uzantılı dosyayı gösterin.
      Expression Blend ile temel işlemlere değinerek basit bir Silverlight uygulaması hazırladık. Daha complex animasyonlarınız için yol gösterici olacağını umuyorum.

Yorum Yapılmamış

Bir cevap yazın