WynApse Home Page
Home    Blog    About    Contact       
Latest Article:

My Tags:
My Sponsors:

Lifetime Member:

<SilverlightTooltip Number="007" Text="Layout and Centering" />


Silverlight Layout

I've seen some questions about the canvas color come up, and if you've seen me give a presentation or read through any of my presentation material, you'll know I use the canvas color during development.

I find myself taking a guess at Canvas.Left and Canvas.Top for objects that I place on the canvas, and then have to tweak them into place later. Since most of my Silverlight is items that can be located somewhere on my page, I try to keep the content contained inside as small an area as possible.

Width & Height

One way to keep track of where your objects are relative to the edge of your canvas is to put an empty Rectangle with a Stroke of 1 at the bottom of the XAML, or in other words, at the top of the ZIndex.

This works, and works very nicely, but if you change the size of the canvas, you then need to change the Rectangle also.

An alternative is to set a canvas color in your Create that is different from the colors of your content so that you can see the extent of the canvas. I usually make it be gray: #FFC0C0C0. Obviously if you use the color gray, or anything close, in your XAML, then you'll want to use something else that gives you contrast.

The advantage of using a contrasting color is that it simply changes size as you change your canvas size.


Another thing I try to do is center my Silverlight content on the canvas, because my canvases are usually centered on something... the page or the sidebar maybe. Centering is sometimes subjective, so I use a '|' character centered all by itself on a line of html to see where the center of my page is no matter how wide. You'll see one of those at the top center of this page.
Copyright © 2006-2022, WynApse