Tag Archives: Silverlight 3

Pixel Shader Effects i Silverlight 3

15 Apr

Som en del af Silverlight 3 har vi mulighed for at arbejde med “Pixel Shader Effects”. Helt nøjagtigt dækker begrebet over at kunne lave blur og shadow samt at kunne lave egne effekter på alle typer af grafisk indhold i Silverlight.

Effekterne anvendes typisk til at skabe noget dybde på sitet eller give en ekstra dimension på eksempelvis rollover på knapper.

Lad os se på lidt kode!

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

På den første border har jeg lavet en blur effekt med en radius på 10 pixels.

   1: <Border.Effect>
   2:     <BlurEffect
   3:         Radius="10" />
   4: </Border.Effect>

På den anden border har jeg tilføjet en shadow effekt. Jeg har vinklet skygget –45 grader (så den peger skråt ned til højre), givet en radius på 50 pixels og en dybde i skyggen på 10 pixels.

   1: <Border.Effect>
   2:     <DropShadowEffect
   3:         Direction="-45"
   4:         BlurRadius="50"
   5:         ShadowDepth="10" />
   6: </Border.Effect>

Samlet set vil vores 2 borders se således ud:

 

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

Thomas

http://thomasm.tenteo.com

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

Silverlight 3 – fra A-Z

20 Mar

Silverlight 3 er nu ude i offentlig beta! :) Det er vi mange der er glade for, specielt med alle de nye features som er kommet med. Tim Heuer (Mr. Silverlight) har skrevet en udemærket post omkring, hvad Silverlight 3 indeholder.

I næste uge holder TENTEO et gå-hjem-møde om Silverlight – blandt andet om nogle af de nye features som Silverlight 3 byder på. Der er stadig enkelte pladser tilbage, så det er bare med at få sendt tilmeldingen afsted.

Jeg vil i løbet af de næste uger, poste omkring de nye features i Silverlight 3. Jeg vil beskrive dem grundigt, give masser af kodeeksempler og så vidt muligt prøve at placere dem i en større sammenhæng, hvor det giver mening.

Grafik

Features

Happy Coding!
Thomas Castøe Martinsen
http://thomasmartinsen.net