Windows Phone Fundamentals– Canvas & StackPanel

Windows Phone Fundamentals

Yesterday, I began a series of posts going back to the fundamentals of Windows Phone StackPanel programming, beginning with the grid layout.  Today we examine two other layout controls: the canvas and the StackPanel. 

The Canvas control behaves like absolute positioning in HTML/CSS. Each element will be given its own specific location on the page. With elements absolutely positioned, they don’t adjust. Elements will overlap, without having any positioning-related effect on its neighbors. This is one of the fastest ways to get your elements positioned on a page, and the taboos that came with absolute positioning in CSS are erased, because we’re developing for a mobile operating system, not seventeen flavors of browser and platform combinations.

Here’s the Xaml to re-create the same layout that we used in the Grid example.

<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>


For each element in your Canvas, you will need to specify the Canvas.Top and Canvas.Left properties. Omitting these values will result in your elements being positioned in the top left corner of the Canvas, at position 0,0. As with the Grid, you can embed these controls inside each other, giving you the ability to segment and separate your content into different panels.

Another important difference to notice in the Canvas example is that we have to be explicit about sizes of our elements. In the Grid example, we didn’t have to size our Rectangles because they will automatically fill the size of the Grid cell they occupy. In a Canvas, everything needs to be explicit, or the element will either not show up (because it has a height and width of zero), or will render at its default size (if it has one.)

The StackPanel Control

The last of the big three panel controls is the StackPanel. This control might seem a little more familiar to the CSS fans who love flow-based layouts. As the name might suggest, the StackPanel stacks the elements it contains. By default stack panels stack one object atop another, but you can also set a property to have the objects “stack” side by side.

Most of our positioning will be determined by manipulating the margins of the individual elements on the page. By doing this, we can place our elements specific distances apart without having to specify their exact position on the page.

In the example below, I am going to recreate the same output we created with the Grid, using StackPanels. Since I have 6 Rectangles that I want to arrange in a 3×2 block, I will start with an outer StackPanel that, by default, will stack my elements vertically. However, I want to have two rows of 3 Rectangles each, so I am going to nest two more StackPanels inside. Each of these child StackPanels will need their Orientation property set to Horizontal to create the rows. Again, the code below renders the exact same layout as the Grid and Canvas examples

<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>

 

This article and the previous are based on the forthcoming book Migrating To Windows Phone by Jesse Liberty and Jeff Blankenburg.

Share

About Jesse Liberty

Jesse Liberty is a Master Consultant for Falafel Software, and has three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Technical Evangelist for Telerik and for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS.
This entry was posted in Essentials. Bookmark the permalink.

9 Responses to Windows Phone Fundamentals– Canvas & StackPanel

  1. Andy says:

    Thank you for this posting. This is exactly what I was looking for.

  2. Tom says:

    “This is one of the fastest ways to get your elements positioned on a page, and the taboos that came with absolute positioning in CSS are erased, because we’re developing for a mobile operating system, not seventeen flavors of browser and platform combinations. ”

    How do you feel that assumption’s holding up now that Windows Phone 8 is re-introducing multiple screen sizes? :)

    It’s a sad fact that mobile fragmentation, particularly with screen sizes, will remain with us until the concept of pixels has been abstracted out of the scope of programmers…

  3. Pingback: Windows Phone. Layout. Control StackPanel. « Javier Suárez Ruiz | Blog

  4. Pingback: Developer series: Windows Phone Fundamentals : wpseven | Windows Phone 7 | WP7

  5. Pingback: Windows Phone Fundamentals – Canvas & StackPanel – www.nalli.net

  6. Dale says:

    Which is more effecient to use? Stack Panels or a Wrap Panel?

  7. Simon Davies says:

    Its great you are going over some of your tuts etc as WP7 has changed a lot especially with the new WP7.1 version under beta, and as a new wp7 person its great to see some up to date info. etc.

    With regards to the stackPanel, could you not use the wrapPanel instead to do what you are demonstrating above??

    Thanks
    Si

  8. Pingback: Windows Phone Fundamentals– Canvas & StackPanel | WP7 Developers Links

  9. Pingback: Anonymous

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>