Silverlight introduktion, del 5 - positionering af XAML elementer
Jeg tror det er på tide vi lige kigger lidt nærmere på hvordan vi kan positionere vores elementer i XAML.
Som jeg nævner i en af de forrige posts omkring XAML, så har vi i Silverlight med et kordinat system at gøre og det betyder vi skal tage udgangspunkt i at ramme 2 punkter til hver akse en Y og X kordinat. Du kan se hvordan det fungere ved at tegne en <Rectangle> i Expression Blend værktøjet og holde øje med både Margin, HorizontialAlignment og VerticalAlignment attributen .
Se selv her:
<Grid x:Name="LayoutRoot" Background="White">
<Rectangle Height="47" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" Width="91" Fill="#FFFF0B0B" Stroke="#FF000000" Opacity="1"/>
</Grid>
Her kan du se at vores Rectangle har en højde (height) og en vidde (width), og udover det fortæller vi med XAML at vores Rectangle skal tegnes på position 0,0,0,0 (kig på Margin) og placeres til venstre på skærmen (HorizontalAlignment="Left") og i toppen.
Det er faktisk nemmere at vise med et par billeder:
Her kan du se jeg har tegnet en rød <Rectangle> og sat Expression Blend til at vise grids på deisignfladen. Du sætte grid på ved at klikke på den første af de 3 knapper nedenunder (som også er på billedet ovenover):
Prøv så at flytte din rectangle rundt på designfladen med dine piletaster og se hvordan dine attributer ændre sig (mest din Margin der vil ændre sig). Du kan også bruge musen til at flytte rundt med elementet på, men så kan du ikke se dine attributers værdier ændre sig.
En anden ting du skal være klar er hvordan elementer (canvas, rectangle, ellipse, path etc) bliver positioneret i forhold til hinanden.
Se den her kode f.eks:
<Canvas Margin="21,26,27,23" Background="#FFFF0000" >
<Canvas Height="206" Width="308" Canvas.Left="24" Canvas.Top="22" Background="#FF000000">
<Canvas Height="128" Width="230" Canvas.Left="35" Canvas.Top="34" Background="#FFB1D312"/>
</Canvas>
</Canvas>
Her har vi 3 gange Canvas hvor hvert Canvas har sin egen baggrundsfarve og er positioneret med Canvas.Left og Canvas.Top attributerne. De 2 positionerings attributer er sat i forhold til det element vi befinder os inde i. Det vil sige at det sidste Canvas tag er rykket 35 pixels (Canvas.Left="35") til venstre for det Canvas vi står inden i (canvas nummer 2).
Med z-index egenskaben skal du se dine elementer som værende "lag" du lægger ovenpå hinanden og derefter sortere i rækkefølgen. Z-index bestemmer i hvilken rækkefølge dine elementer skal vises.
<Canvas Margin="8,22,8,22">
<Rectangle Canvas.ZIndex="2" Height="108" Width="158" Canvas.Left="19" Canvas.Top="20" Fill="#FFCC2F2F" Stroke="#FF000000"/>
<Rectangle Canvas.ZIndex="1" Height="126" Width="99" Canvas.Left="102" Canvas.Top="51" Fill="#FF3476C4" Stroke="#FF000000"/>
<Rectangle Canvas.ZIndex="0" Height="72" Width="107" Canvas.Left="142" Canvas.Top="141" Fill="#FF17A921" Stroke="#FF000000"/>
</Canvas>
Prøv at ændre Canvas.ZIndex på alle tre Rectangler og se hvad der sker. Her kan du igen se at alle tre Rectangles bruger vores Canvas til at bestemme positionen på skærmen.
Så lærte vi også lidt omkring postionering af elementer og hvordan vi kan ændre i rækkefølgen når de skal renderes.