Grundkurs mit Jessy Liberty : Canvas & StackPanel

Auch wenn dieses Thema schon gut von Microsoft unterstützt wird, empfinde ich die Darstellungsweise von Jesse Liberty ‚ Windows Phone Fundamentals immer noch einmalig gut.

Dieser Mann kann sehr gut Sachverhalte darstellen und somit habe ich mich entschieden diese Serie mit in meinem Blog aufzunehmen.

Heute geht es um das Thema was einfach aussieht aber auch sehr vertrakt enden kann, wenn der Entwickler nicht genau aufpasst sein UI Design nicht genau anpasst. Canvas und Stackpanel.

Diese Controls sind mit die wichtigsten Designcontrols, Jesse zeigt in diesem Beitrag die Grundlagen.

StackPanel

 

 

 

 

 

 

 

 

Darstellung als Canvas:

<Canvas>
    <Rectangle Fill="Red" Width="100" Height="100" Canvas.Top="100" Canvas.Left="100" />
    <Rectangle Fill="Orange" Width="100" Height="100" Canvas.Top="100" Canvas.Left="200" />
    <Rectangle Fill="Yellow" Width="100" Height="100" Canvas.Top="100" Canvas.Left="300" />
    <Rectangle Fill="Green" Width="100" Height="100" Canvas.Top="200" Canvas.Left="100" />
    <Rectangle Fill="Blue" Width="100" Height="100" Canvas.Top="200" Canvas.Left="200" />
    <Rectangle Fill="Purple" Width="100" Height="100" Canvas.Top="200" Canvas.Left="300" />
</Canvas>
und das selbe nocheinmal mit einem StackPanel:
<StackPanel>
    <StackPanel Orientation="Horizontal">
        <Rectangle Fill="Red" Width="100" Height="100" />
        <Rectangle Fill="Orange" Width="100" Height="100" />
        <Rectangle Fill="Yellow" Width="100" Height="100" />
    </StackPanel>
    <StackPanel Orientation="Horizontal">
        <Rectangle Fill="Green" Width="100" Height="100" />
        <Rectangle Fill="Blue" Width="100" Height="100" />
        <Rectangle Fill="Purple" Width="100" Height="100" />
    </StackPanel>
</StackPanel>
Kurs Übersicht :
Advertisements

About pocketmobile

Window Phone Developer

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: