Merhabalar. Bu Silverlight makalemizde, Behavior(davranış) dosyası oluşturarak nasıl kar yağışı efekti yaratırız'ı inceliyor olacağız.
Öncelikle biraz Silverlight' daki Behavior (davranış) kavramından bahsetmek istiyorum. Aslında Behavior yapısını, karmaşık kodlama gerektiren işlemleri, kod yazmadan XAML içerisinden halletmemize yarayan araçlar olarak tanımlayabiliriz. Mesela, bazı fizik kurallarını nesnelere uygulamak için Behavior' lara ihtiyaç duyarız. Bu noktada Silverlight SDK ve Blend 3 ile gelen birkaç Behavior' a değinmek istiyorum.
- ChangePropertyAction : Herhangi bir kontrolün, herhangi bir anda, herhangi bir özelliğini değiştirmemize yarar.
- FluidMoveBehavior : Bir Panel kontrolü düşünelim. Bu Panel kontrolünde gerçekleşen herhangi bir görsel değişimden altındaki kontrollerin etkilenmesi esnasında animasyon gerçekleştirmemize yarar.
- HyperlinkAction : Herhangi bir nesneye HyperLink davranışı vermemize yarar.
Listeyi daha uzatabiliriz ama gerek yok.
Bu makalede ise, sürükle bırak yaptığımız, işlerimizi kolayca halletmemize yarayan Behavior' ları nasıl oluşturabiliceğimizi göreceğiz ve aşağıda gördüğünüz efekti yaratacağız.
Tasarım Aşaması
Hazırsak artık başlayabiliriz. Öncelikle Blend' de yeni bir Silverlight 3 projesi oluşturalım. File-->New Project-->Silverlight 3 Application + Website
Projemizi Yaratalım!
Projemiz oluştuktan sonra ilk iş olarak LayoutRoot kontrolünün tipini değiştiriyoruz. Öntanımlı olarak Grid tipinde gelir. Grid ne kadar güzel özelliklere sahip olsa da, bizim Canvas kullanmamız daha yararlı olacaktır. Bunun için LayoutRoot' a sağ klik yapıyoruz ve Change Layout Type--> Canvas 'ı seçiyoruz.
Layout Root' un Tipini Değiştirdik
Bir de sayfamıza gece efekti sağlamak için Properties-->Brushes-->Gradient Brush 'ı kullanalım.
Renk kodlarınına dikkat edin!
Artık kar tanelerimizi oluşturabiliriz. Ellipse nesnesi bu iş için biçilmiş kaftan bence. Copy-Paste yardımı ile sayfamızı değişik ebatlarda, beyaz Ellipse' lerle dolduralım. Bu işlemler sonucunda aşağıdaki görüntüye benzer bir görüntü elde etmiş olmalıyız.
Ortadaki TextBlock Tercihe Bağlıdır :)
Tasarım aşamasının sonuna gelmiş bulunmaktayız. Artık Behavior' ımızı oluşturabiliriz.
Behavior Yazma Aşaması
Behavior kullanmamızın bize sağladığı en büyük yarar, onlarca kartanesinin düşüş animasyonunu bir kerede halledebilme imkanı sunması. Bu nedenle projemize yeni bir Behavior ekleyelim. Blend' in tasarım alanında sol üst köşede, Projects tabından Silverlight projemizi bulalım. Sonra sağ klik yapıp açılan context menuden Add New Item seçeneğini seçelim. Karşımıza bir pencere çıkacak. Oradan da Behavior'ı işaretleyip, isimini de "KarYagisi" verebiliriz.
Behavior'ımızı Oluşturduk
Tüm bu işlemler bittikten sonra, kodlamaya başlamaya geliyor sıra. Oluşan dosyanın içine bakıcak olursanız, gözünüze otomatik olarak oluşturulmuş OnAttached() ve OnDetaching() metodları çarpıcaktır. İsimlerinden de anlaşılacağı üzere, behavior bir nesneye bağlandığında OnAttached metodu, bir nesneden ayrıldığında da OnDetaching metodu çalışacaktır. Bu prensiplere göre kodumuzu yazmalıyız.
İlk dikkat etmemiz gereken nokta behavior' ın hangi nesneye etki ediceğini belirlemek. Varsayılan olarak DependencyObject geliyor. Biz Behavior' ımızı, daha önce Canvas tipine çevirdiğimiz Layout Panel' a bağlıyacağımız için bu değeri Canvas olarak değiştiriyoruz. Burada önemli olan nokta , oluşturduğunuz Behavior' ı hangi tipteki nesneye bağlayacak olmanız. Ona göre bu değeri değiştirmeniz gerekiyor.
[C#]
- public class KarYagisi : Behavior<Canvas>
[VB]
- Public Class KarYagisi
- Inherits Behavior(Of Canvas)
Kodlama sırasında bolca rastgele(random) değer almış double tipindeki değerlere ihtiyaç duyacağız. Örnek vermek gerekirse, kartanelerinin opaklık değerleri, hızları ve dönüş açıları farklı olmalı. Hiç bir kartanesi dümdüz yere düşmez değil mi :).
Bu yüzden öncelikle Random bir değişken oluşturuyoruz.
[C#]
- private static Random randomNumber;
[VB]
- Private Shared randomNumber As Random
Gelelim bir sonraki yapıcağımız hamleye. OnAttached() metodunun altına Behavior' ın bağlandığı nesnenin Load olayını yakalayabilmek için yeni bir RoutedEventHandler tanımı ekliyoruz.
[C#]
- protected override void OnAttached()
- {
- base.OnAttached();
-
- randomNumber = new Random();
-
- this.AssociatedObject.Loaded += new RoutedEventHandler(ApplicationLoaded);
- }
[VB]
- Protected Overrides Sub OnAttached()
- MyBase.OnAttached()
-
- randomNumber = New Random
-
- AddHandler Me.AssociatedObject.Loaded, AddressOf ApplicationLoaded
- End Sub
ApplicationLoaded metodu içinde efektimizi yaratmaya geldi sıra. ApplicationLoaded olayına erişiyoruz çünkü bir SL uygulaması çalıştığında sayfaya bir çok şey yüklenir. Bizim bir karmaşaya yol açmamak için tüm uygulama yüklendikten sonra işlemlerimizi yapmamız gerekiyor. Oluşturucağımız efektin Layout Panel içindeki her objeyi etkilemesini istediğimiz için bu sorunu bir foreach döngüsü ile halledebiliyoruz. Bu sayede her bir nesnenin Render() olayında, ilk oluştuğunda ve ekran her yeniden yüklendiğinde uğrayacağı olayda , rastgele değerler almış hız, açı ve opaklık derecesi gibi değerlerimizi tanımlayabiliyoruz. Nasıl mı?
[C#]
- void ApplicationLoaded(object sender, RoutedEventArgs e)
- {
- foreach (FrameworkElement element in this.AssociatedObject.Children)
- {
- FrameworkElement localCopy = element;
- //TextBlock da kar taneleri gibi davranmasın diye ona "asd" ismini vermiştim.
- if (localCopy.Name != "asd")
- {
-
- double yPosition = Canvas.GetTop(localCopy);
- double xPosition = Canvas.GetLeft(localCopy);
-
- double speed = 2 * randomNumber.NextDouble();
- double counter = 0;
- double radius = 30 * speed * randomNumber.NextDouble();
-
- localCopy.Opacity = .2 + randomNumber.NextDouble();
-
- CompositionTarget.Rendering += delegate(object o, EventArgs arg)
- {
- counter += Math.PI / (180 * speed);
-
- if (yPosition < Application.Current.RootVisual.DesiredSize.Height)
- {
- yPosition += .2 + speed;
- }
- else
- {
- yPosition = -localCopy.Height;
- }
-
- Canvas.SetTop(localCopy, yPosition);
- Canvas.SetLeft(localCopy, xPosition + radius * Math.Cos(counter));
- };
- }
- else
- {
- localCopy.Opacity = .2 + randomNumber.NextDouble();
- }
-
- }
-
- }
[VB]
- Dim yPosition As Double
- Dim xPosition As Double
- Dim speed As Double
- Dim counter As Double
- Dim radius As Double
- Dim localCopy As FrameworkElement
- Private Sub ApplicationLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
- For Each element As FrameworkElement In Me.AssociatedObject.Children
- localCopy = element
- If Not localCopy.Name = "asd" Then
-
- yPosition = Canvas.GetTop(localCopy)
- xPosition = Canvas.GetLeft(localCopy)
-
- speed = 2 * randomNumber.NextDouble
- counter = 0
- radius = 30 * speed * randomNumber.NextDouble
-
-
- localCopy.Opacity = 0.2 + randomNumber.NextDouble
-
- AddHandler CompositionTarget.Rendering, AddressOf ObjectRender
- End If
- Next
- End Sub
- Private Sub ObjectRender(ByVal sender As Object, ByVal e As EventArgs)
- counter += Math.PI / (180 * speed)
- If yPosition < Application.Current.RootVisual.DesiredSize.Height Then
- 'Sayfanın içindeyse
- yPosition += 0.2 + speed
- Else
- 'Sayfanın dışında ise
- yPosition = -localCopy.Height
- End If
- Canvas.SetTop(localCopy, yPosition)
- Canvas.SetLeft(localCopy, xPosition + radius * Math.Cos(counter))
- End Sub
Yukarıda yaptığımız işi özetlemek istiyorum. Öncelikle sayfaya koyduğum TextBlock hareket etmesin diye onu efektin dışında bıraktım. Sonra düzenlediğimiz nesnenin x ve y pozisyonunu değişkenlere atadım. randomNumber değişkeninin yardımıyla rastgele oluşturduğum hız, açı ve opaklık değerlerini değişkenlerine atadım. Her bir nesnenin Render() olayına erişerek, onları Y ekseninde hareket ettirdim.
Olay bu kadar kolay ! Böylelikle Behavior' ımızı oluşturmuş olduk.
Behavior' ı Layout Nesnesine Bağlama Aşaması
Evet, son aşamaya da gelmiş bulunuyoruz. Bu aşamada oluşturduğumuz Behavior' ı Layout' a uygulayacağız. Öncelikle projemizi Build etmemiz lazım. CTRL-SHIFT-B tuş kombinasyonu ile projemizi Build ettikten sonra tasarım alanının solundaki Assets tabının altına Behaviors kısmına tıklıyoruz. Karşımıza çıkan listeden KarYagisi adlı behavior' ımızı bulup, sürükle bırak metodu ile sol alttaki Layout Root nesnesinin üstüne bırakıyoruz.
Projeyi çalıştırdığınız zaman herhangi bir adımda hata yapmadıysanız sorunsuz çalıştığını göreceksiniz.
Böylelikle bu yazımızın sonuna gelmiş olduk. Başka bir Silverlight makalesinde görüşmek üzere herkese iyi kodlamalar.