Basal viden om grafiske elementer i Silverlight
I Silverlight del 1 snuste jeg en lille smugle til det at lave en brugerflade i XAML, og kom igennem det mest basale med at man skal have et canvas som rod element og jeg viste hvordan man kan indsætte en TextBlock. Nu vil jeg så gå videre og se på en række andre elementer man kan bruge til at tegne brugergrænseflader med.
Faktisk kan man bruge TextBlocken fra sidst som udgangspunkt, da den viser nogle af de grundlæggende properties som findes på alle grafiske elementer: Name, Canvas.Left og Canvas.Top. Disse properties vil man sandsynligvis sætte på et hvert element sådan at det har et navn man kan bruge til at finde elementet programmatisk, og sådan at man kan styre hvor elementer placeres. Hvis man skal finde et element ud fra dets navn er der en funktion som kan kaldes fra alle grafiske elementer der hedder FindName("kontrolnavn") f.eks. kan man finde en kontrol med navnet mySquare således.
var myControl = rootElement.FindName("mySquare");
Basale former
Der findes 3 helt basale former man kan tegne i silverlight som er:
-
Rectangle
-
Ellipse
-
Polygon
Rectangle
Rectangle er en af de mest brugte former, da den giver en meget enkel måde at tegne rektangler på. Det er faktisk så enkelt at jeg vil lade et eksempel tale for sig selv.
<Rectangle Width="200" Height="100" Fill="Green" Stroke="Black" StrokeThickness="5" />
Hvad der gør ekementet endnu smartere er at det har to Properties der hedder RadiusX og RadiusY, som kan bruges til at lave runde hjørner. RadiusX kan antage en værdi fra 0 og op til halvdelen af elementets Width - og tilsvarende kan RadiusY være op til halvdelen af Height.
Ellipse
Selvom man faktisk med hjælp af RadiusX og RadiusY som beskrevet kan lave et Rectangle til en ellipse findes der også et element beregnet til formålet hvis man ønsker at regne ellipser.
<Ellipse Width="200" Height="100" Fill="Green" Stroke="Black" StrokeThickness="5" />
Her beskriver Width og Height det areal som ellipsen vil fylde ud, hvilket gør det enormt nemt at arbejde med. Man kan ved at sætte propertien Stretch til enten "None", "Uniform" eller "UniformToFill" ændre på måden ellipsen skaleres på. None gør at ellipsen ikke fylder noget, og det vil derfor kun være Stroke (altså elementets kant) man kan se. Uniform og UniformToFill sørger for at elementet altid er lige så højt som det er bredt. Forskellen består i at Uniform vælger den mindste værdi sådan at ellipsen kan være inden for arealet man definerer hvor UniformToFill vælger den største så kan fylder arealet ud og den overskydende del af ellipsen skæres væk.
Polygon
Den sidste basale form er polygon eller "mangekant som det hedder på dansk". For at definere en sådan form angiver man en række points som er koordinatsæt (x,y) der beskriver skæringspunkterne.
<Polygon Fill="Green" Stroke="Black" StrokeThickness="5" Points="10,10 100,100 200,5" />
Idet en polygon kan være meget kompleks og have flere krydsende punkter kan det være svært at afgøre hvilke områder der er indenfor og ydenfor formen, og der med hvilke der skal fyldes af Fill farven. Til at styre dette har polygoner en property FillRule som kan sættes til "EvenOdd" eller "NonZero". EvenOdd er default og fylder kun regioner hvis man vil krydse et ulige antal segmenter for at gå fra området til et område uden for polygonen. NonZero er en mere kompleks algoritme som oftest vil betyde at alle arealer indenfor polygonen fyldes.
Linier
En anden mulighed for at lave grafiske elementer er at tegne linier. Også her findes der 3 elementer som vi kan benytte os af.
Line
Line elementet bruges til at tegne en helt enkel streg fra punkt 1 til punkt 2.
<Line X1="10" Y1="10" X2="100" Y2="100" Stroke="Black" StrokeThickness="5" />
Polyline
Polyline er som du måske har gættet til at tegne flere linier efter hinanden. Dette gøres ligesom for polygoner ved at definere et antal Points.
<Polyline Points="10,10 100,100 200,5" Stroke="Black" StrokeThickness="5" />
Hvis man sætter Fill propertien på en polyline der ikke udgør en lukket figur vil arealet det bliver fyldt svare til hvis man trækker en linie fra det første til det sidste punkt.
Path
Path er en mere kompleks struktur der kan udtrykke hvilken som helst form. Dette gøres ved at sætte dennes Data element der kan sættes til et vilkårligt geometry element. Da geometry elementer er et helt emne i sig selv vil jeg nøjes med at vise et eksempel der viser hvordan man laver et rektangel.
<Path Fill="Blue">
<Path.Data>
<RectangleGeometry Rect="0,0 80,80" />
</Path.Data>
</Path>
Ligesom diskuteret tidligere har RectangleGeometry også RadiusX og RadiusY properties til at lave afrundede hjørner.
Subscribe