Archive | April, 2009

TextBlock versus Label

29 Apr

Some thoughts on the use of TextBlock versus Label in Silverlight.

Even though TextBlock lives in the System.Windows.Controls namespace, it is not a control.  It derives directly from FrameworkElement.  Label, on the other hand, derives from ContentControl. 

This means that Label can:
1. Be given a custom control template (via the Template property).
2. Display data other than just a string (via the Content property).
3. Apply a DataTemplate to its content (via the ContentTemplate property).
4. Do whatever else a ContentControl can do that a FrameworkElement cannot.

But be aware! The use of Label is a way more heavy then TextBlock due to its Visual Tree.

Visual Tree of a Label:
<Label>
<Border>
   <ContentControl>
     <ContentPresenter>
       <Grid>
         <TextBlock Text="Hello World"/>
       </Grid>
     </ContentPresenter>
   </ContentControl>
</Border>
</Label>

Visual Tree of a TextBlock:
<TextBlock Text="Hello World" />

So unless you really need the funcationlity provided by a Label you should use a TextBlock.

TM
http://thomasmartinsen.net

Silverlight Animation Framework

28 Apr

Compiled Experience har skrevet en super serie af posts om at bygge et simpelt animation framework til Silverlight.

http://compiledexperience.com/Blog/post/Beginning-a-Silverlight-Animation-framework.aspx

TM
thomasmartinsen.net

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

Sidste frist for indsendelse af forslag til den store Silverlight konkurrence

8 Apr

Husk at sidste frist for indsendelse af forslag til den store Silverlight konkurrence (http://thomasm.tenteo.com/2009/03/06/silverlight-konkurrence/ ) og vinde en XBOX 360 er den 16. april 2009.

I skal indsende jeres forslag inklusive kildekode og en kort beskrivelse til forslag@silverlight-konkurrence.dk. Forslagne vil blive bedømt af Thomas Martinsen fra TENTEO og Daniel Mellgaard Frost fra Microsoft Danmark. Jo mere kreative I er desto bedre.

Vi glæder os meget til at se alle spændende forslag igennem.

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

Follow

Get every new post delivered to your Inbox.

Join 1,356 other followers