Blog

  • 24 Mar 2009

Silverlight 3 Beta – 3D Efektleri (Perspective Transforms)

Merhaba arkadaşlar, bu makalemizde Silverlight 3 Beta ile gelen 3D efektlerinin Silverlight uygulamalarında nasıl kullanıldığına bakacağız.

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]
<UIElement.Projection>
<PlaneProjection Rotation="Deger"></PlaneProjection>
</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>

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>

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>

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>

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"/>

// Kare2 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>



Uygulamayı test edebiliriz artık. Test etmek için tıklayınız

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

Yorum (1)

  • yoldan geçen biri / 17.7.2010 02:50:05

    demo sürüm kullanıyormuşsunuz o yuzden test edemedim. Sizi uyarmamı önerdi silverlight

Yorum Yaz