Silverlight introduktion, del 4 - fundamentale XAML elementer

Article
06/23/2008

Sidste gang kiggede vi lidt overordnet på hvad XAML var for en fisk, hvordan du nemt kunne komme igang, vi fik endda lavet et par XAML dokumenter og snakket lidt omkring tekst og fonte.

Den her gang skal det handle om forskellige former i XAML. Når jeg siger former, så mener jeg dybest set grafik og hvordan man kan lave det med XAML.

Hvis du vil teste de statements af jeg bruger i denne post kan du enten downloade KAXAML eller åbne XAMLPad.

Line, Rectangle, Polygon, Ellipse:

Ovenstående elementer er så lette at arbejde med, at det næsten er skuffende. Den mest simple ting du kan tegne med XAML er en <Line> og resten følger ellers stille og roligt med når du skal lave lidt mere krævende grafik - uden at være for avanceret.

Der er 3 fællesnævner for de sidste 3 elementer i listen; <Rectangle>, <Polygon> og <Ellipse>. De har alle sammen mulighed for at tilgå disse egenskaber: Fill, Stroke og StrokeThickness, egenskaber vi skal have et kig på lige om lidt.

Silverlight bruger et kordinat system som er pixel baseret og tager udgangspunkt i øverste venstra hjørne. Så når du tegner en streg i XAML skal du med andre ord angive hvor den skal starte og hvor den skal slutte. Vær ikke nervøs, det er meget simpelt.

Det var da noget af det nemmeste og smukkeste jeg har indtil nu har lavet i XAML - en rød streg :0)

Nu da vi kan tegne streger kan vi ligeså tage et skridt videre og se på hvordan vi f.eks en lukket form som f.eks en trekant. Til det formål kan vi bruge elementet <Polygon>. For at lave et polygon objekt skal du bruge Point attributen hvori du specificere hvor henne på skærmen dit objekt skal optræde, og mere end det, du kan faktisk lave et hvilket som helst kantet objekt med en polygon. Når du angiver din kordinater i Points attributen, så bliver det sidste kordinat forbundet med det første, også selvom du specifiere 10 eller 30 kordinater.

Prøv selv den her:

Hvis du ønsker en form der ikke lukkes af til sidst kan du benytte dig af <Polyline> istedet.

Et <Rectangle> element opfører sig lidt anderledes en polygon og polyline, da man ikke angiver kordinater men en Width og en Heigth, og ydermere kan angive en RadiusX og RadiusY til dens hjørner. Lad os prøve ad.

Her vil du se et hel firkantet objekt:

og her vil du se dette samme objekt bare med runde hjørner:

Den sidste af de basale elementer er Ellipse. Den opføre sig stort set som en Rectangle, bortset fra at den ikke har RadiusX eller RadiusY attributer:

Nu har du stiftet bekendtskab grundelementerne for en simpel XAML fil: <Line>, <Polygon>, <Rectangle>, <Run>, <TextBlock>,<Ellipse> etc.

Den sidste form er lidt mere vigtig men også mere advanceret (det er utroligt at det altid er sådan). Heldigvis er det næste element vi skal kigge på <Path> næsten for advanceret til at gide skrive det i hånden, men det er alligevel vigtigt at forstå princippet baged.

<Path>:

Uanset hvor kompleks din form skal være kan blive lavet om til en Path. Lad os se på hvordan den virker.

En Path består af forskellige tegne instrukser, og det gør den ved hjælp af dens vigtigste egenskab Data.

Det kommer hurtigt til at se ud af meget, især hvis man ikke ved hvad det der står indenfor Data attributen betyder.

Det første der sker indenfor Data er M114,134. M står for Move og de tol tal er igen kordinat punkter. Det vil sige at vi beder om at starte vores Path på x kordinat på 114 og vores y kordinat på 134. Der starter vores Path altså.

Så kommer der en C233,221 322,138 322,138. C står for "cubic" og stammer oprindeligt fra det vi kender som Beizer kurven. Pierre Beizer opfandt en række matematiske lininger der kunne hjælpe ham med at udregne kurver til han arbejde som bildesigner.

C er faktisk en af det mest advancerede kurver du kan lave i XAML, og den kræver en række parametre. Vi har lige fortalt XAML at vi gerne vil have en tegning der starter på kordinat 114,143 (den første vi snakkede om, den med M foran) og nu fortæller vi altså XAML at vi gerne vil bede om kurve der ender ved 322,138 men som har 2 kontrol kordinater 233,221 og 322,138. Sejt ik' :0)

Anden anden mulighed er en A beizer. A laver en buet ellipse og skal bruge følgende parametre:

1. x og y radius af Ellipsen.
2. rotation vinkelen af Ellipsen.
3. 1 eller 0 alt efter om vinkelen skal være størrer eller mindre en 180 grader.
4. 1 eller 0 alt efter om buen skal tegnes i en positiv eller negativ retning.
5. buens endelig kordinat.

Prøv at kør den her:

Du kan også sagtens tegne linier med Path elementet:

L står for line og det er præcis hvad vi gør brug af i ovenstående eksempel. L er den mest simple form for "tegning" du kan bruge.

Udover A,M,L og C så er der også Q, V, S, T, H, Z, X. Prøv selv at leg lidt med dem i en XAML editor for at finde ud hvad der er muligt med dem.

Nu synes jeg du har fået lidt basal viden omkring et par af de kontroller og XAML du kan benytte dig af i både Silverlight og WPF. Jeg forslår dig, at du leger lidt med diverse kontroller og evt. prøver at bruge dem i et Silverlight projekt.

Stay tuned -

Silverlight introduktion, del 4 - fundamentale XAML elementer

Additional resources