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.

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

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 Orientation="Horizontal">
        <Rectangle Fill="Red" Width="100" Height="100" />
        <Rectangle Fill="Orange" Width="100" Height="100" />
        <Rectangle Fill="Yellow" Width="100" Height="100" />
    <StackPanel Orientation="Horizontal">
        <Rectangle Fill="Green" Width="100" Height="100" />
        <Rectangle Fill="Blue" Width="100" Height="100" />
        <Rectangle Fill="Purple" Width="100" Height="100" />


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

About Jesse Liberty

Jesse Liberty has three decades of experience writing and delivering software projects and is the author of 2 dozen books and a couple dozen Pluralsight & LinkedIn Learning courses. He was a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP and a Microsoft MVP.
This entry was posted in Essentials. Bookmark the permalink.