Perspective 3D i Silverlight 3

1 Apr

Silverlight 3 indeholder en række muligheder for at arbejde med grafik på en noget rigere måde – en af mulighederne er at arbejde med 3D grafik.

Det er blevet populært at arbejde med “Perspective Plane” i moderne UI design – og lige netop giver Silverlight 3 os mulighed for. Perspective 3D giver os mulighed for at rotere og scalere vores indhold i en tredje dimension uden at skrive noget ekstra kode.

Perspective 3D kan være rigtig godt til at fange en brugers opmærksomhed, til at give indhold mere eller mindre fokus simpelthen ved at placere det “længere væk” på skærmen. Andre steder hvor det kunne give mening at anvende Perspective 3D er at lave en liste i 3D (eksempelvis som i Vista task switch) eller i forbindelse med transitions (lade ting “flyve” ind og ud af skærmen).

Lad os se på lidt kode!

I mit kodeeksempel har jeg lavet en Border der indeholder en TextBlock med en masse tekst og en knap. Vi har på vores kontroller fået en Attached Property der hedder Projection.

   1: <Border.Projection>
   2:     <PlaneProjection
   3:         RotationY="-60"
   4:         GlobalOffsetZ="-300" />
   5: </Border.Projection>

I eksemplet har jeg roteret vores border -60 grader om Y-aksen samt “skubbet” den 300 pixels tilbage i forhold til dens oprindelige placering.

Perspective3D

Perspective3D

Koden til det ovenstående eksempel finder du på vores skydrive.

Thomas

http://thomasm.tenteo.com

3 Responses to “Perspective 3D i Silverlight 3”

  1. TM June 21, 2009 at 15:42 #

    Her er en god artikel der også beskriver PlaneProjection:
    http://blogs.msdn.com/jaimer/archive/2009/06/03/silverlight3-planeprojection-primer.aspx

Trackbacks/Pingbacks

  1. Perspective 3D i Silverlight 3 - thomas martinsen - April 1, 2009

    […] Du kan læse den her: http://thomasm.tenteo.com/2009/04/01/perspective-3d-i-silverlight-3/ […]

  2. Silverlight 3 – fra A-Z « thomas martinsen - April 1, 2009

    […] Perspective 3D i Silverlight 3 […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: