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