C#nedir?com
 
YAZAR HAKKINDA
Mehmet Sencer Karadayı
Mehmet Sencer Karadayı
http://mehmet.karadayi.net
İletişme geçmek için tıklayın.
4 Makalesi yayınlanmakta.
Yazar hakkında detaylı bilgi için tıklayın.
Yayınlanan diğer makaleleri için tıklayın.
İlgili etiketler: Animasyon Behavior C# Efekt Mehmet Sencer Karadayı Silverlight Silverlight 3 SL VB Web Silverlight Mehmet Sencer Karadayı
 
YAZI HAKKINDA
Türü : Makale
Serbest Köşede C#nedir?com üyelerinin hazırladıkları yazılar yayınlanır. Bu yazılar editör incelemesine girmeden yayınlanır.
Seviyesi : İleri
Kategori : Silverlight
Yayınlanma Tarihi : 6.9.2010
Okunma Sayısı : 30008
Yorum Sayısı : 9     yorum yaz
Site İçi AramaSİTE İÇİ ARAMA
Üye Girişini AçÜye GİRİŞİ
Üye girişi için tıklayın.
Kullanıcı Adı
Şifre
 
Beni her zaman hatırla
Bir hafta boyunca kullanıcı bilgilerinizi kullanıcı çıkışı yapana kadar hatırlar. (Paylaşılan bilgisayarlarda önerilmez.)
 
Şifremi / Kullanıcı Adımı unuttum.
 
.net TV RSS Serbest KÖŞE (?)
Serbest Köşede C#nedir?com üyelerinin hazırladıkları yazılar yayınlanır. Bu yazılar editör incelemesine girmeden yayınlanır.
emre TAŞ
XML - Deniz Kılınç
emre TAŞ
yazının devamı >
emre TAŞ
Decompiling and Reverse Engineering .Net Radyo
emre TAŞ
yazının devamı >
emre TAŞ
Masaüstü mü ? İnternet Mi? .Net Radyo
emre TAŞ
yazının devamı >
emre TAŞ
.Net Kavramları - .Net Radyo
emre TAŞ
yazının devamı >
emre TAŞ
Yeni Başlayanlar için - .Net Radyo
emre TAŞ
yazının devamı >
Makale Gönder Bende Yazmak İstiyorum
.net TV RSSBlogroll
Turhal Temizer 'in Blogu
ChatBot UI Sample 24.11.2017
Turhal Temizer 'in Blogu
C# – IRR Function 24.11.2017
Burak Selim Şenyurt
Go Web Sunucusunu Docker Üzerinden Yayınlamak 24.11.2017
Burak Selim Şenyurt
Docker Üzerinde .Net Core Uygulaması Çalıştırmak 24.11.2017
  Diğer Herşey
Sponsorlar
BT Akademi
Medya Portakal
Video Hosting Sponsoru
Csharpnedir.com bir Ineta üyesidir
Uzman Abi
Her Yönüyle C# - Sefer Algan
Silverlight 3' de Behavior kullanarak Kar Yağışı Efekti Yaratmak
 
Kapat
Sayfayı Yazdır Sık Kullanılanlara Ekle Arkadaşıma Gönder MySpace Del.Ico.Us Digg Facebook Google Mixx Reddit StumbleUpon

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.

  1. ChangePropertyAction : Herhangi bir kontrolün, herhangi bir anda, herhangi bir özelliğini değiştirmemize yarar.
  2. 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.
  3. 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.

Get Microsoft Silverlight

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#]
  1. public class KarYagisi : Behavior<Canvas>
[VB]
  1. Public Class KarYagisi
  2.     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#]
  1. private static Random randomNumber;
[VB]
  1. 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#]
  1. protected override void OnAttached()
  2. {
  3.     base.OnAttached();
  4.  
  5.     randomNumber = new Random();
  6.  
  7.     this.AssociatedObject.Loaded += new RoutedEventHandler(ApplicationLoaded);
  8. }
[VB]
  1. Protected Overrides Sub OnAttached()
  2.     MyBase.OnAttached()
  3.  
  4.     randomNumber = New Random
  5.  
  6.     AddHandler Me.AssociatedObject.Loaded, AddressOf ApplicationLoaded
  7. 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#]
  1. void ApplicationLoaded(object sender, RoutedEventArgs e)
  2. {
  3.     foreach (FrameworkElement element in this.AssociatedObject.Children)
  4.     {
  5.         FrameworkElement localCopy = element;
  6.         //TextBlock da kar taneleri gibi davranmasın diye ona "asd" ismini vermiştim.
  7.         if (localCopy.Name != "asd")
  8.         {
  9.  
  10.             double yPosition = Canvas.GetTop(localCopy);
  11.             double xPosition = Canvas.GetLeft(localCopy);
  12.  
  13.             double speed = 2 * randomNumber.NextDouble();
  14.             double counter = 0;
  15.             double radius = 30 * speed * randomNumber.NextDouble();
  16.  
  17.             localCopy.Opacity = .2 + randomNumber.NextDouble();
  18.  
  19.             CompositionTarget.Rendering += delegate(object o, EventArgs arg)
  20.             {
  21.                 counter += Math.PI / (180 * speed);
  22.  
  23.                 if (yPosition < Application.Current.RootVisual.DesiredSize.Height)
  24.                 {
  25.                     yPosition += .2 + speed;
  26.                 }
  27.                 else
  28.                 {
  29.                     yPosition = -localCopy.Height;
  30.                 }
  31.  
  32.                 Canvas.SetTop(localCopy, yPosition);
  33.                 Canvas.SetLeft(localCopy, xPosition + radius * Math.Cos(counter));
  34.             };
  35.         }
  36.         else
  37.         {
  38.             localCopy.Opacity = .2 + randomNumber.NextDouble();
  39.         }
  40.  
  41.     }
  42.  
  43. }
[VB]
  1.     Dim yPosition As Double
  2.     Dim xPosition As Double
  3.     Dim speed As Double
  4.     Dim counter As Double
  5.     Dim radius As Double
  6.     Dim localCopy As FrameworkElement
  7.     Private Sub ApplicationLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
  8.         For Each element As FrameworkElement In Me.AssociatedObject.Children
  9.             localCopy = element
  10.             If Not localCopy.Name = "asd" Then
  11.  
  12.                 yPosition = Canvas.GetTop(localCopy)
  13.                 xPosition = Canvas.GetLeft(localCopy)
  14.  
  15.                 speed = 2 * randomNumber.NextDouble
  16.                 counter = 0
  17.                 radius = 30 * speed * randomNumber.NextDouble
  18.  
  19.  
  20.                 localCopy.Opacity = 0.2 + randomNumber.NextDouble
  21.  
  22.                 AddHandler CompositionTarget.Rendering, AddressOf ObjectRender
  23.             End If
  24.         Next
  25.     End Sub
  26.     Private Sub ObjectRender(ByVal sender As Object, ByVal e As EventArgs)
  27.         counter += Math.PI / (180 * speed)
  28.         If yPosition < Application.Current.RootVisual.DesiredSize.Height Then
  29.             'Sayfanın içindeyse
  30.             yPosition += 0.2 + speed
  31.         Else
  32.             'Sayfanın dışında ise
  33.             yPosition = -localCopy.Height
  34.         End If
  35.         Canvas.SetTop(localCopy, yPosition)
  36.         Canvas.SetLeft(localCopy, xPosition + radius * Math.Cos(counter))
  37.     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.

Makale:
Silverlight 3' de Behavior kullanarak Kar Yağışı Efekti Yaratmak Silverlight Mehmet Sencer Karadayı
  • Yazılan Yorumlar
  • Yorum Yaz
HAZ
18
2012
http://www.kirupa.com/blend_silverlight/falling_snow_silverlight_pg4.htm Kodlar buradan kopyala-yapıştır yapılmış.. Biraz utan be en azından kaynak olarak göster.. sanki kendi emeğinmiş gibi anlatmışsın.. Değişken adlarına dek aynı kodlar.. çakma olduğu gerçeğinin daha düzgün görseli olmasından da belli.. Bu makaleyi kirupa.com'a şikayet ediyorum.
KAS
25
2011
Arkadaşım eline sağlık. Gayet güzel bir makale olmuş. Makale yazmak için Türkçe'nin mükemmel olmasına da gerek yok. Böyle saçma sapan yorum yazanlara takılma. kendileri de birkaç makale yazsınlar da yararlanalım. Laf kalabalığından başka bişey yaptıkları yok. Bu tarz kişilere cevap vermek, boş iş ile iştigal etmek olur. Saygılar.
KAS
26
2010
Sayın Musa Çoban. "...Türkçe okunduğu gibi yazılan bir değildir...". Bir değildir yerine bir dil değildir yazmalısınız. Makale yazan arkadaşıma da teşekkürlerimi iletiyorum. Eline, emeğine sağlık.
KAS
12
2010
Bu makaleyi emek verip hazırlayarak, tüm internet kullanıcıları ile paylaştığınız için teşekkür ederim.
KAS
3
2010
Düzeltme : "ilkokul öğrencilerinin bile yapmayacağı cinsten Türkçe hatalarımı"
KAS
3
2010
Musa Bey, Saygı çerçevesinde yapılan her türlü, yapıcı-yıkıcı eleştiriye açığım. Fakat üslubunuz ve kullandığınız ifadeler rencide edici. Bu platform çok köklü ve başarılı bir paylaşım platformu; tartışma platformu değil! Bu yüzden bundan sonraki yorumlarınıza cevap vermeyeceğimi belirterek başlamak istiyorum sözlerime. Benim, sizin tabirinizle, "ilkokul öğrencilerinin yapacağı cinsten Türkçe hatalarımı" eleştirmeden önce bir kez daha düşünmenizi önerirdim. Bu önerimin nedenleri ise; 1-Eğer benim yazdığım "imkan" yanlışsa sizin yazdığınız "imla" kelimesi de yanlış olur. Türkçe' de yaklaşık on senedir inceltme eki yok. Bilgilerinize. 2-"Türkçe okunduğu gibi yazılan bir değildir." demişsiniz. Bu cümlenize de bir anlam veremedim. 3-Noktalama hatalarınıza hiç girmedim bile.Sözde soru cümlelerinin sonuna soru işareti koyulmayacağı gibi tamamlanmış cümlelerin sonuna da üç nokta koyulmaz. Bunların yanı sıra, içerik hakkında yaptığınız yoruma katılıyorum. Bahsettiğiniz konular kadar karmaşık bir konu değil. Fakat sonuçta herkes ileri seviye bilgisayar bilimleri ile ilgili makale yazacak değil, değil mi? Şunu unutmamanızı rica ediyorum; size çok basit gelen bir içerik bir başkası için çok karmaşık olabilir. Ricam, burada yazılanları şahsınıza bir saldırı ya da kendini beğenmişlik olarak algılamamanız. Benim bu yorumu yazmamın amacı okurların önünde beni rencide etme çabanız.
KAS
2
2010
Mehmet bey terimlerin İngilizce olmasıyla ya da İngilizce Türkçe arasında geçiş yapmanızla bu hataların nasıl bir ilgisi olabilir anlamadım ? "bakıcak, çarpıcak, ..." demek ilkokul öğrencilerinin bile yapmayacağı imla hatalarıdır. Türkçe okunduğu gibi yazılan bir değildir. İçerik konusuna gelirsek işletim sistemlerinin bellek haritalaması gibi veya pre-emptive multitasking ya da derleyicilerin loop unrolling optimizasyonunu nasıl yaptığı gibi her yerde bulunmayan ağır ve özel bir içeriği anlatıyor olsanız "hadi neyse" diyeceğim de böyle bir içeriği kişiler her yerde bulabilir. Kaldı ki içerik mükemmel bile olsa bu türden bir ilkokul öğrencisi hatalarını haklı çıkarmaz. Ayrıca bu tür sitelerde bir editör kavramıdır gidiyor, editör denilen kişiler -yazar yapsa bile- bu tür hataları düzeltenlerdir... Bakalım bu başı bozukluk daha nereye varacak ?
KAS
2
2010
Evet haklısınız; bahsettiğiniz hatalar mevcut yazımda. Fakat "Türkçe Katliamı" biraz abartılı bir ifade gibi geldi bana. Konusu geçen teknolojinin tüm bileşenlerinin ismi İngilizce malum. Bu yüzden İngilizce ve Türkçe arasında sürekli bir değişim oluyor; bu durum da bazı yazım hatalarına yol açabiliyor. Ben Türkçe yazım hatalarımdan dolayı tüm okurlardan özür dilerim. Fakat asıl noktayı kaçırdığınızı düşünüyorum. Önemli olan anlatılan, içerik. 3-4 tane yazım hatasından dolayı tüm içeriği yok saymanız bence şekilcilikten başka bir şey değil. İyi günler, Mehmet Sencer KARADAYI
KAS
1
2010
Silverlight'tan önce bir Türkçe öğrenip öyle yazı yazsaydınız keşke. Yazınız Türkçe adına tam bir katliam olmuş maalesef. "nasıl kar yağışı efekti yaratırız'ı inceliyor olacağız", çarpıcak, imkan, oluşturabiliceğimizi, Oluşturucağımız , Hazırsak artık başlayabiliriz" Neye hazırız ?
Sayfalar : 1 
Yorum yazabilmek için üye girişi yapmalısınız. Üye girişi için tıklayın.
Üye değilseniz Üyel Ol linkine tıklayarak üyeliğinizi hemen başlatabilirisniz.
 
  • Bu Konuda Son 10
  • Eklenen Son 10
  • Bu Konuda Geçmiş 10
Bu Konuda Yazılmış Yazılmış 10 Makale Yükleniyor
Son Eklenen 10 Makale Yükleniyor
Bu Konuda Yazılmış Geçmiş Makaleler Yükleniyor