Silverlight Layout Options – Canvas (Part 1 of 3)


There are many decisions to be made when you’re building a new application, and Silverlight introduces some new (but old) paradigms when it comes to the layout of your interface.

In this first part of three articles, we’re going to be talking about the <Canvas> option. I equate this to a more familiar concept in HTML known as absolute positioning. Each element will be given its own specific location on the page, and nothing but code can move them. This is also one of the downfalls of the <Canvas>, but for many apps, this may not matter.

With elements absolutely positioned, things just don’t adjust. If a user resizes their browser, the elements don’t move. If a user tries to see your application on a smaller screen than you anticipated, part of the app is going to be hidden. (Think mobile phones, for example…if you position everything out to fit in a window 800 x 600, that 320 x 200 screen is not going to show very much).

However, this is still 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 now developing in a universal plugin, not 17 flavors of browser and platform combinations.

So how do we do it? Here’s some example code:

Click to see this running...

As you can see, it’s pretty straightforward. We have a button, an ellipse, and a rectangle, and their positions are defined by the Canvas.Left and Canvas.Top attributes. You can also nest <Canvas> tags, and the Left and Top attributes apply to the immediate parent of the element you are positioning.

Click here to see the code above running in a browser.

(continue to Part 2…and Part 3…)

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