Silverlight 2.0 introduktion, del 3 - start med XAML

Article
06/23/2008

HUSK:

Silverlight er nu i beta 2, og derfor kræver det at du installere Microsoft Silverlight Tools Beta 2 for Visual Studio 2008, og det nyeste preview af Expression Blend.

Har du ikke læst de 2 forrige posts (1, 2) omkring min indledning til Silverlight 2.0, så vil jeg opfordre dig til at gøre det inden du fortsætter.

I den sidste post skrev jeg, at jeg ville lave en post omkring XAML i Silverlight og hvad det kan hjælpe os med at løse.

Det første jeg kan starte med at sige er, at XAML er mere udbredt end i Silverlight, ja faktisk bliver det brugt i størrer udstrækning i WPF som står for Windows Presentation Foundation. XAML kommer fra WPF, og i Silverlight har vi kun mulighed for at skrive XAML som et mindre subset af hele det bibliotek WPF gør brug af.

XAML (eXtensible Application Markup Language) er et deklaretivt sprog ligsom HTML og XAML's "mor" XML. Du bruger XAML til visuelt at udtrykke dig med. Du kan sagtens selv kode din XAML, men du kan også få værktøjer til at skrive din XAML kode for dig. Vi har allerede set hvordan bla. Expression Blend kan skrive XAML for os, og man kan ligeledes også tilgå XAML koden i ens Visual Studio. Med XAML kan du også gøre brug af code-behind filer til at tilgå dine XAML elementer programmelt, de giver endda mulighed for at hooke sig op på forskellige events, præcis som udviklerne kender det fra normal web eller windows programmering.

Her ser du en UserControl som den bliver lavet i et Silverlight projekt i Visual Studio 2008.

</Grid>
</UserControl>

Ligsom XML er XAML case-sensitivt når det kommer til selve elementer og deres navngivning.

Eftersom Silverligt "kun" gør brug af et subset fra det store WPF XAML bibliotek kan alt det i WPF ikke lade sig gøre i samme udstrækning som i Silverlight. Der vil med sikkerhed blive åbnet op for XAML godteposen i Silverlight i fremtidige versioner, men lige nu må vi nøjes med de mest nødvendige dele.

Canvas / Grid:

Det første tag der skal fremstå i en XAML fil er enten Canvas eller Grid.

Det passer faktisk ikke 100%, fordi du kan godt andre have elementer (f.eks <Rectangle></Rectangle>) som det første men så mister du hurtigt chancen for at have andre elementer med i spil. Kort sagt, Canvas og Grid kan indeholde alle andre elementer som f.eks en Rectangle, Button, Ellipse etc, og det får du ikke lov til hvis du f.eks åbner dit XAML dokument med f.eks Rectangle.

Jeg bruger en blanding af værktøjer til at teste XAML af med, Visual Studio 2008, Expression Blend og KAXAML. Visual Studio 2008 bruger jeg når jeg ønsker at udvikle videre fra en XAML prototype som jeg har testet af i KAXAML. KAXAML er gratis og den giver dig et nemt og intelligent miljø til at udvikle i XAML.

Det næste du skal huske er at få de altafgørende XAML namespaces med i åbningstaget, også selvom det er en Rectangle du vil starte med. Så hvis du ligsom mig er startet ud med at åbne vores XAML dokument med en Grid og tilføje en Rectangle, så ser din XAML fil nogenlunde således ud:

Gem din XAML kode som demo.xaml og prøv engang at åbne den med Internet Explorer. Nu skulle du gerne se en rød firkant ca. midt på skærmen. Tillykke, du har nu lavet dit første XAML dokument - var det svært ? :0)

Det eneste problem er bare, at nu er vores Rectangle så dum at vi ikke kan bruge den til noget, men husk, at vi skal kunne kravle før vi kan går.

TextBlock, Fonts, Run:

Hvis du kender til HTML, så tænk på <TextBlock> som værende et <Div> tag og <Run> et <Span> tag. TextBlock og Run er fra WPF verdenen hvorimod Div og Span er fra HTML. Husk det mens vi fortsætter.

Hvis du vil skrive tekst i Silverligt er der 2 måder at gøre det på, ihvertfald når vi gør det med TextBlock. Du kan skrive teksten enten imellem åbningstagget og lukketaget, ligsom forneden:

<TextBlock>Hej Verden!</TextBlock>

Eller du kan gøre det via Text attributen på selve elementet:

Jeg kan bedst lide nr. 2, men det er en smagssag og du kan gøre som det passer dig bedst.

Der er selvfølgelig nogle flere muligheder med TextBlock elementet, såsom styling og positionering.

Foreground attributen er værd lide at fremhæve, for der er flere muligheder med den. Du kan bruge 3 forskellige typer af farver; RBG trible, navn (red, green, blue, etc.), aRBG. RGB kender du måske, det er den type der ser således ud: #336699 eller #EEEEEE etc. A i aRGB står for aplhatransparency, og det detyder at du kan give attributtens 2 første karaktere en værdi mellem 0 og 255 i hex format og opnå en transparent forgrundsfarve. 4E står f.eks for tallet 79 i hex tabellen. Det giver ca. en transparens på 32%!

Når du vælger en font i Silverlight skal du være opmærksom på, at selve det plugin Silverlight kræver af Browseren for at køre kommer med en række indbyggede fonte. Her er listen af de fonte du kan bruge:

Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Times New Roman, Trebuchet MS, Verdana, Lucida.

Selvom der er installeret andre fonte på klientens maskine kan Silverlight ikke gøre brug af dem, og hvis Silverlight ikke genkender den font du har skrevet i koden, vil den automatisk bruge Lucida fonten.

<TextBlock FontFamily="Verdana" FontSize="18px" TextAlignment="Center" Background="Black" FontWeight="Bold" Foreground="#4E00FFFF" Text="XAML historien">
<LineBreak />
<Run FontFamily="Trebuchet MS" FontSize="12px" FontWeight="Normal" Foreground="#9EEEEEEE">
Der var engang en udvikler der elskede XAML, og han lignede dig :0)
</Run>
<LineBreak /><LineBreak />
<Run FontFamily="Verdana" FontSize="10px" FontWeight="Normal" Foreground="#9EFFFFFF">
Skrevet af Daniel
</Run>
</TextBlock>

Her ser du hvordan jeg har brugt Run og LineBreak elementerne i sammenspil med TextBlock elementet. Det ligner det vi kender fra HTML, de forskellige tags hedder bare noget andet.

Du kan wrappe tekst ved at gøre brug af TextWrapping attributen på netop TextBlock elementet. <TextBlock TextWrapping="Wrap" />.

Næste post skal handle hvordan man laver forskellige former af vector grafik direkte i XAML. Stay tuned.

Silverlight 2.0 introduktion, del 3 - start med XAML

Additional resources