Vektorski diamanti

Prejšnji vikend na //publish/ Hackathonu v Brežicah sem želel narediti igro, kjer sestavni del igre so diamanti. Kot mentor nisem imel veliko časa za izdelavo igre in sem raje izdelal fitnes aplikacijo Heart rate sensor for Zephyr HxM (že v WP trgovini). Preden sem šel na to aplikacijo, sem že naredil nekaj diamantov. Trenutno nimam časa za razvoj igre, če pa katerega zanimajo diamanti ali pa želi vedeti, kako enostavno narediti vektorske slike v XAML, je to pravi post.

image

XAML koda vseh likov je čisto spodaj.

Read the rest of this entry »

Advertisements

Izdelava vektorskih slik za XAML razvijalce (2. del) – Blend in Combine

Poglejte si članek Izdelava vektorskih slik za XAML razvijalce (1. del) za prvi del, izdelava enostavne ikone s XAML kodo. V tem članku bomo na hitro spoznali Blend orodje, risanje v Blendu, Combine funkcionalnosti in ker se bliža valentinovo, bomo še narisali eno srce.

image

Read the rest of this entry »

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.

Izdelava vektorskih slik za XAML razvijalce (1. del)

Včasih rabimo eno enostavno vektorsko sliko, ampak ne vemo od kod jo dobiti. Slike iz drugih virov ne moramo dovolj modificirati, da ustreza našim potrebam. Enostavne slike je mogoče sestaviti iz enostavnih oblik v XAML-u.

Prva ikona, ki jo bomo naredili, bo WiFi signal indikator. Ta je sestavljena iz 5 enako širokih štirikotnikov v obliki stopnic, ki jih ločujejo 4 prazni prostori. To ikono bomo naredili v dveh pristopih. V poznejših člankih bomo uporabljeno znanje izkoristili za bolj kompleksne primere.

Ikona iz enostavnih oblik

<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
    <Rectangle Fill="White" VerticalAlignment="Bottom" Width="50" Height="50" Margin="0,0,20,0" />
    <Rectangle Fill="White" VerticalAlignment="Bottom" Width="50" Height="100" Margin="0,0,20,0" />
    <Rectangle Fill="White" VerticalAlignment="Bottom" Width="50" Height="150" Margin="0,0,20,0" />
    <Rectangle Fill="White" VerticalAlignment="Bottom" Width="50" Height="200" Margin="0,0,20,0" />
    <Rectangle Fill="White" VerticalAlignment="Bottom" Width="50" Height="250" Margin="0,0,20,0" />
</StackPanel>

image

Ta rešitev je omejena le na specifično velikost. S pomočjo Viewbox kontrole lahko izboljšamo prilagodljivost na velikost.

<Viewbox>
    <!— WiFi XAML koda –>
</Viewbox>

Ikona s pomočjo razdeljevanja Grid-a in pozicioniranja Rectangle-ov

Nekatere ikone pa so preveč kompleksne, da bi jih lahko hitro naredili le s nekaj oblikami. Večino ikon, ki so sestavljene iz kvadratov, lahko sestavimo s pomočjo razdeljevanja Grid kontrole v vrstice in stolpce in Rectangle kontrole. Postopek je dolgotrajnejši, je pa zato bolj fleksibilen in včasih bistveno bolj enostaven.

Verticalna porazdelitev

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
</Grid>

image

Tukaj imamo 5 vrstic s enako velikostjo ne glede na višino. Višina posamezne vrstice je 1/5 celotne višine grida.

Horizontal porazdelitev

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="2*" />
    </Grid.ColumnDefinitions>
</Grid>

image

Tukaj imamo 9 stolpcev, razdeljeno po 5 stolpcev s dvojno velikost in med njimi so stolpci s enojno velikost. To pomeni, da je vsak lihi stolpec 2x večji od sodega stolpca.

Pozicioniranje Rectangle-a

Znotraj tega grida lahko elementom določimo Grid.Row, Grid.Column, Grid.RowSpan in Grid.ColumnSpan, ki se uporabljajo za pozicioniranje elementa znotraj starša (Grid kontrola). Index za Row in Column se začne s 0 in Row/ColumnSpan morata biti vsaj 1.

<Rectangle Fill="White" Grid.Row="3" Grid.Column="2" Grid.RowSpan="2" />

image

Končni rezultat

Primer celotnega dizajna za Wifi signal indikator s pomočjo razdeljevanja vrstic in stolpcev znotraj Grid-a.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="2*" />
    </Grid.ColumnDefinitions>

    <Rectangle Fill="White" Grid.Row="4" />
    <Rectangle Fill="White" Grid.Row="3" Grid.Column="2" Grid.RowSpan="2" />
    <Rectangle Fill="White" Grid.Row="2" Grid.Column="4" Grid.RowSpan="3" />
    <Rectangle Fill="White" Grid.Row="1" Grid.Column="6" Grid.RowSpan="4" />
    <Rectangle Fill="White" Grid.Column="8" Grid.RowSpan="5" />
</Grid>

image

Ta enostavna ikona načeloma ne potrebuje zadnje rešitve, saj nimamo veliko prednost pred prvim pristopom. V prihodnjem članku bo predstavljena malo bolj kompleksna ikona, kjer bo ta pristop bistveno lažji kot prvi pristop.