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:

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