Osnove XAML layout kontrol (vse platforme) 1. del

Ugotavljam, da veliko razvijalcev ne razume, kako deluje XAML layout engine. V tem članku bom predstaviti, kako uporabiti najbolj pogoste lastnosti kontrol za oblikovanje kot so margin, horizontal alignment, vertical alignment in horizontal alignment.

Margin

Margin kontrole je prazen prostor zunaj kontrole. Ta prazen prostor določimo s 4 vrednostmi. Te vrednosti po vrsti definirajo levi, zgornji, desni in spodnji razmik.

image

<Grid margin="10,20,30,40" background="Blue" />

Horizontal/Vertical alignment

To je horizontal ali vertikalna poravnava. Za večino predmetov je privzeta vrednost Stretch, ki razširi na maksimalno velikost. HorizontalAlignment ima vrednosti Left, Center, Right in Stretch. VerticalAlignment ima vrednosti Top, Center, Bottom in Stretch.

Brez poravnav

image

<Grid Background="Red" />

HorizontalAlignment

Poravnave Left, Center in Right bo maksimalno stisnilo kontrolo v horizontalni smeri glede na velikost kontrole in vsebine znotraj kontrole.

image

<Grid Width="60" Background="Red" HorizontalAlignment="Left" /><br />
<Grid Width="60" Background="Green" HorizontalAlignment="Center" /><br />
<Grid Width="60" Background="Blue" HorizontalAlignment="Right" />

VerticalAlignment

Poravnave Top, Center in Bottom bo maksimalno stisnilo kontrolo v horizontalni smeri glede na velikost kontrole in vsebine znotraj kontrole.

image

<Grid Height="60" Background="Red" VerticalAlignment="Top" /><br />
<Grid Height="60" Background="Green" VerticalAlignment="Center" /><br />
<Grid Height="60" Background="Blue" VerticalAlignment="Bottom" />

Nekaj primerov kombiniranih dizajnov

image

<Grid Height="60" VerticalAlignment="Top" Background="Red" /><br />
<Grid Height="60" VerticalAlignment="Bottom" Background="Green" Margin="60,0,0,0" /><br />
<Grid Width="60" HorizontalAlignment="Left" Background="Blue" Margin="0,60,0,0" /><br />
<Grid Background="Orange" Margin="60,60,0,60" />

Naslednji članek bom predstavil gradnike uporabniškov vmesnikov, Grid, StackPanel in ScrollViewer.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: