Silverlight 3 Beta – 3D Efektleri (Perspective Transforms)

Yazar: Sem GÖKSU
Kategori: Silverlight
Eklenme Tarihi: 26.3.2009 05:08:23



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


Sem GÖKSU

Sem Göksu, 15.12.1983 / İstanbul doğumludur. Süleyman Demirel Üniversitesi Bilgisayar Programcılığı Mezunudur. Okul döneminde ve sonrasında kısa bir süre ASP, C++, VB 6 ile ilgilenmiş ve projeler geliştirmiştir. 2002 Yılından itibaren .NET teknolojileri ile ilgilenmekte ve ASP.NET, SQL Server ve C#'da uzmanlaşmıştır.
Bu makaleye ilk yorum yapan siz olun.

Yorumunuz