Silverlight 2’nin en büyük eksiklerinden biri 3D efektlerinin olmamasıydı. Silverlight 3 Beta ile birlikte bu eksiklik de giderildi ve artık Silverlight uygulamalarında 3D efektlerini kullanabiliyoruz. Tabi şunu da özellikle belirtmekte fayda var. Silverlight henüz 3D-Engine desteklemiyor. Yani yaptığımız uygulama gerçek bir 3D uygulaması olmayacaktır.
Silverlight 3 Beta UIElementlerine 3D Efektleri uygulayabilmek için her UIElementin ”Projection” isimli bir propertysi var. Eğer bir kontrole 3D efekti uygulamak istiyorsak UIElementin Projection özelliğini kullanmak zorundayız. Örnek kullanımı aşağıdaki gibidir.
[XAML]
Silverlight 3 Beta UIElementlerine 3D Efektleri uygulayabilmek için her UIElementin ”Projection” isimli bir propertysi var. Eğer bir kontrole 3D efekti uygulamak istiyorsak UIElementin Projection özelliğini kullanmak zorundayız. Örnek kullanımı aşağıdaki gibidir.
[XAML]
<UIElement.Projection><PlaneProjection Rotation="Deger"></PlaneProjection>
</UIElement.Projection>
</UIElement.Projection>
UIElementlerin Projection özelliği abstract bir tiptir. PlanProjection da bu tipten kalıtılarak oluşturulmuş bir tiptir. Böylece nesnelerin Projection özelliğine PlaneProjection tipini atayabiliriz.
[C#]
UIElement.Projection = new PlaneProjection() { Rotation = deger };
İlk olarak PlaneProjection tipinde yer alan bazı özellikleri inceleyelim. PlaneProjection'ın 12 tane özelliği var.
RotationX
UIElementin dönme merkezinin, X koordinatında döndürülmesini sağlar.
<Image Source="sllogo.jpg" Width="150" Height="170"><Image.Projection><PlaneProjection RotationX="-60"></PlaneProjection></Image.Projection>
</Image>
</Image>
RotationY
UIElementin dönme merkezinin, Y koordinatında döndürülmesini sağlar.
<Image Source="sllogo.jpg" Width="150" Height="170"><Image.Projection><PlaneProjection RotationY="-60"></PlaneProjection></Image.Projection>
</Image>
</Image>
RotationZ
UIElementin dönme merkezinin, Z koordinatında döndürülmesini sağlar.
<Image Source="sllogo.jpg" Width="150" Height="170"><Image.Projection><PlaneProjection RotationZ="-60"></PlaneProjection></Image.Projection>
</Image>
</Image>
CenterOfRotationX, CenterOfRotationY, CenterOfRotationZ özelliklerini kullanarak nesnenin dönme merkezini taşıyabiliriz. Bu özellikler 0 ile 1 arasında bir değer alabilir. 0 En üst nokta 1 ise an alt noktadır. Default değerleri x ve y için 0.5, z için 0’dır.
<Image Source="sllogo.jpg" Width="150" Height="170">
<Image.Projection>
<PlaneProjection RotationZ="-60" CenterOfRotationX="0.6"></PlaneProjection> </Image.Projection>
</Image>
<Image.Projection>
<PlaneProjection RotationZ="-60" CenterOfRotationX="0.6"></PlaneProjection> </Image.Projection>
</Image>
LocalOffsetX, X ekseninde nesne ile Plane(3D alanı) arasındaki mesafeyi belirler.
LocalOffsetY, Yekseninde nesne ile Plane(3D alanı) arasındaki mesafeyi belirler.
LocalOffsetZ, Z ekseninde nesne ile Plane(3D alanı) arasındaki mesafeyi belirler.
GlobalOffsetX, X ekseninde nesne ile ekran arasındaki mesafeyi belirler.
GlobalOffsetY, Y ekseninde nesne ile ekran arasındaki mesafeyi belirler.
GlobalOffsetZ,Z ekseninde nesne ile ekran arasındaki mesafeyi belirler.
Yeni bir Silverlight uygulaması oluşturalım ve projemize bir Rectangle, 6 slider ekleyelim. Rectangle nesnesinin Projection özelliğindeki Rotation X,Y Z ve CenterOfRotation X,Y,Z Özelliklerine bağlayacağız. Böylece Silverlight 3 Beta ile gelen bir diğer yenilik olan Kontrollerin birbirine bağlanması konusunu incelemiş olacağız. XAML kodumuz aşağıdaki gibidir.
[XAML]
<Canvas x:Name="LayoutRoot" Background="White" Width="400" Height="300" >
// Rectangle nesnesi oluşturalım
<Rectangle x:Name="Kare" Width="100" Height="100" Fill="Red" Canvas.Top="50" Canvas.Left="140">// Projection özelliğine PlaneProjecytion nesnesi ile 3D efektleri için özellikleri belirleyelim.
// Rectangle nesnesinin CenterOfRotation özelliklerini belirledik. Böylece nesnenin dönme merkezi default değerler olarak atandı
<Rectangle.Projection><PlaneProjection x:Name="Kare3d" CenterOfRotationX="0.5" CenterOfRotationY="0.5" CenterOfRotationZ="0"/></Rectangle.Projection></Rectangle>// Kare3d isimli PlaneProjection nesnesinin RotationX özelliğini slider kontrolünün value özelliğine bağlıyoruz. Böylece slider kontrolünün valuesi değiştikçe Nesnenin RotationX özelliğide değişecek.
<Slider Minimum="0" Maximum="360" Width="180" Value="{Binding ElementName=Kare3d, Mode=TwoWay,Path=RotationX}" Canvas.Left="20" Canvas.Top="200"/>// Kare3d isimli PlaneProjection nesnesinin RotationY özelliğini slider kontrolünün value özelliğine bağlıyoruz. Böylece slider kontrolünün valuesi değiştikçe Nesnenin RotationY özelliğide değişecek.
<Slider Minimum="0" Maximum="360" Width="180" Value="{Binding ElementName=Kare3d, Mode=TwoWay,Path=RotationY}" Canvas.Left="20" Canvas.Top="230" />// Kare3d isimli PlaneProjection nesnesinin RotationZ özelliğini slider kontrolünün value özelliğine bağlıyoruz. Böylece slider kontrolünün valuesi değiştikçe Nesnenin RotationZ özelliğide değişecek.
<Slider Minimum="0" Maximum="360" Width="180" Value="{Binding ElementName=Kare3d, Mode=TwoWay,Path=RotationZ}" Canvas.Left="20" Canvas.Top="260"/> // Kare3d isimli PlaneProjection nesnesinin CenterOfRotationX özelliğini slider kontrolünün value özelliğine bağlıyoruz. Böylece slider kontrolünün valuesi değiştikçe Nesnenin CenterOfRotationX özelliğide değişecek.
<Slider Minimum="0" Maximum="1" Width="180" Value="{Binding ElementName=Kare3d, Mode=TwoWay,Path=CenterOfRotationX}" Canvas.Top="200" Canvas.Left="210"/>// Kare3d isimli PlaneProjection nesnesinin CenterOfRotationY özelliğini slider kontrolünün value özelliğine bağlıyoruz. Böylece slider kontrolünün valuesi değiştikçe Nesnenin CenterOfRotationY özelliğide değişecek.
<Slider Minimum="0" Maximum="1" Width="180" Value="{Binding ElementName=Kare3d, Mode=TwoWay,Path=CenterOfRotationY}" Canvas.Top="230" Canvas.Left="210"/>// Kare3d isimli PlaneProjection nesnesinin CenterOfRotationZ özelliğini slider kontrolünün value özelliğine bağlıyoruz. Böylece slider kontrolünün valuesi değiştikçe Nesnenin CenterOfRotationZ özelliğide değişecek.
<Slider Minimum="0" Maximum="1" Width="180" Value="{Binding ElementName=Kare3d, Mode=TwoWay,Path=CenterOfRotationZ}" Canvas.Top="260" Canvas.Left="210"/>// Bilglendirme için kullanacağımız TextBlock kontrolleri
<TextBlock Canvas.Top="180" Canvas.Left="20" Width="87" Height="16" FontWeight="Bold" Text="Rotation">TextBlock><TextBlock Canvas.Top="180" Canvas.Left="210" Height="16" Width="118" Text="CenterOfRotation" FontWeight="Bold"/><TextBlock Canvas.Top="200" Canvas.Left="4" Height="16" Width="8" Text="X" FontWeight="Bold"/><TextBlock Canvas.Top="230" Canvas.Left="4" Height="16" Width="8" Text="Y" FontWeight="Bold"/><TextBlock Canvas.Top="260" Canvas.Left="4" Height="16" Width="8" Text="Z" FontWeight="Bold"/>
</Canvas>
// Rectangle nesnesi oluşturalım
<Rectangle x:Name="Kare" Width="100" Height="100" Fill="Red" Canvas.Top="50" Canvas.Left="140">// Projection özelliğine PlaneProjecytion nesnesi ile 3D efektleri için özellikleri belirleyelim.
// Rectangle nesnesinin CenterOfRotation özelliklerini belirledik. Böylece nesnenin dönme merkezi default değerler olarak atandı
<Rectangle.Projection><PlaneProjection x:Name="Kare3d" CenterOfRotationX="0.5" CenterOfRotationY="0.5" CenterOfRotationZ="0"/></Rectangle.Projection></Rectangle>// Kare3d isimli PlaneProjection nesnesinin RotationX özelliğini slider kontrolünün value özelliğine bağlıyoruz. Böylece slider kontrolünün valuesi değiştikçe Nesnenin RotationX özelliğide değişecek.
<Slider Minimum="0" Maximum="360" Width="180" Value="{Binding ElementName=Kare3d, Mode=TwoWay,Path=RotationX}" Canvas.Left="20" Canvas.Top="200"/>// Kare3d isimli PlaneProjection nesnesinin RotationY özelliğini slider kontrolünün value özelliğine bağlıyoruz. Böylece slider kontrolünün valuesi değiştikçe Nesnenin RotationY özelliğide değişecek.
<Slider Minimum="0" Maximum="360" Width="180" Value="{Binding ElementName=Kare3d, Mode=TwoWay,Path=RotationY}" Canvas.Left="20" Canvas.Top="230" />// Kare3d isimli PlaneProjection nesnesinin RotationZ özelliğini slider kontrolünün value özelliğine bağlıyoruz. Böylece slider kontrolünün valuesi değiştikçe Nesnenin RotationZ özelliğide değişecek.
<Slider Minimum="0" Maximum="360" Width="180" Value="{Binding ElementName=Kare3d, Mode=TwoWay,Path=RotationZ}" Canvas.Left="20" Canvas.Top="260"/> // Kare3d isimli PlaneProjection nesnesinin CenterOfRotationX özelliğini slider kontrolünün value özelliğine bağlıyoruz. Böylece slider kontrolünün valuesi değiştikçe Nesnenin CenterOfRotationX özelliğide değişecek.
<Slider Minimum="0" Maximum="1" Width="180" Value="{Binding ElementName=Kare3d, Mode=TwoWay,Path=CenterOfRotationX}" Canvas.Top="200" Canvas.Left="210"/>// Kare3d isimli PlaneProjection nesnesinin CenterOfRotationY özelliğini slider kontrolünün value özelliğine bağlıyoruz. Böylece slider kontrolünün valuesi değiştikçe Nesnenin CenterOfRotationY özelliğide değişecek.
<Slider Minimum="0" Maximum="1" Width="180" Value="{Binding ElementName=Kare3d, Mode=TwoWay,Path=CenterOfRotationY}" Canvas.Top="230" Canvas.Left="210"/>// Kare3d isimli PlaneProjection nesnesinin CenterOfRotationZ özelliğini slider kontrolünün value özelliğine bağlıyoruz. Böylece slider kontrolünün valuesi değiştikçe Nesnenin CenterOfRotationZ özelliğide değişecek.
<Slider Minimum="0" Maximum="1" Width="180" Value="{Binding ElementName=Kare3d, Mode=TwoWay,Path=CenterOfRotationZ}" Canvas.Top="260" Canvas.Left="210"/>// Bilglendirme için kullanacağımız TextBlock kontrolleri
<TextBlock Canvas.Top="180" Canvas.Left="20" Width="87" Height="16" FontWeight="Bold" Text="Rotation">TextBlock><TextBlock Canvas.Top="180" Canvas.Left="210" Height="16" Width="118" Text="CenterOfRotation" FontWeight="Bold"/><TextBlock Canvas.Top="200" Canvas.Left="4" Height="16" Width="8" Text="X" FontWeight="Bold"/><TextBlock Canvas.Top="230" Canvas.Left="4" Height="16" Width="8" Text="Y" FontWeight="Bold"/><TextBlock Canvas.Top="260" Canvas.Left="4" Height="16" Width="8" Text="Z" FontWeight="Bold"/>
</Canvas>
Slider kontrollerinin değerlerini değiştirerek 3D özelliğini kullanım.
Bu makalenin de sonuna geldik başka bir makale de görüşmek üzere. Silverlight ile kalın ;)
Sem GÖKSU
www.semgoksu.com | www.yazilimgunlugu.com
sem.goksu@yazilimgunlugu.com
Kaynaklar
MSDN
Silverlight SDK
Hiç yorum yok:
Yorum Gönder