SilverLight – Layout Managers

I know it is customary to start out presentations of new technology with a “Hello World” application, but if you have any interest in SilverLight you’ve probably already seen one of those and it really didn’t help you a whole lot.

Where we really need to start off is at the beginning, with the foundational concepts that will enable you to get moving on your own basic SilverLight application.  What you need to know is how SilverLight is like and unlike other things you might already know.

The best place to start in that regard is with the Layout Managers.

There are three basic layout managers available to you in SilverLight.  By nesting layout managers within other layout managers you can achieve the various types of layouts you might be looking for.

Canvas Layout
The one that will feel the most familiar to Windows programmers is the Canvas Layout.  Any controls you place within a Canvas Layout will be absolute positioned within the layout container.

image

Grid Layout
The Grid Layout will feel most familiar to web developers who have used the table tags for all of their layouts.  You can use the Grid Layout to create fixed or relative sized cells and you can place controls within a cell or have them span a cell.  This works a lot like the Windows Forms Grid Layout manager.

So that a grid defined like this:

image

Can be used to place elements like this:

image

Stacked Layout
The last layout manager places controls in a row or a column one after the other.  Either one under the other, or next to each other side by side.

image

Other Places Talking About SilverLight Layout Managers:

New layout controls in the Silverlight Toolkit – If you have special layout requirements you can use the DockPanel or WrapPanel source code as a starting point for your own layout control. I also recommend checking out Dave Relyea’s twopart series on the Silverlight 2 Layout System …

Silverlight Layout Control – Getting Started with XAML … – This video shows how to use XAML to create complex layouts using the AgLayoutControl™ Suite for Silverlight.

Silverlight – Layout Management – Silverlight and WPF support a flexible layout management system that enables developers and designers to easily coordinate how controls are positioned within a UI surface. This layout system supports both a fixed …

Silverlight 2.0 Layout Management – This is the most powerful layout container in Silverlight. It allows you to organize your elements into an invisible grid of rows and columns. Many elements can be placed inside a cell. That element can be another layout container. …

Silverlight Layout Control: building complex layouts from simple … – With the release of Silverlight 2 Beta 1, all developers got a long awaited layout management system and some useful panels: StackPanel and Grid. In addition to Canvas, these containers were intended to satisfy all the layout needs …


Related Post

  • Silverlight – Wire up your form for programmingSilverlight – Wire up your form for programming As I mentioned a couple of weeks ago, learning Silverlight is a lot more about relearning some basic assumptions than it is about learning a new language.  We've already looked at the basic layout ...
  • Silverlight – Binding ResourceDictionariesSilverlight – Binding ResourceDictionaries In the last two Silverlight posts I've introduced databinding in Silverlight.  We've seen that databinding, while similar to what we've experienced in Windows Forms and ASP.NET applications, is ma...
  • Friday Books – Silverlight 2 in ActionFriday Books – Silverlight 2 in Action Product Description ***When you purchase the Print book, you can download a PDF copy from Manning Publications at no additional charge*** Microsoft describes Silverlight as a "cross-brow...
  • Silverlight – DatabindingSilverlight – Databinding When I was learning DataBinding in both .NET 1.0 and .NET 2.0, I quickly discovered that most of what I learned about DataBinding for ASP.NET was useless as I moved to Windows Forms and what I lear...
  • More on SilverLight Developer InstallationMore on SilverLight Developer Installation If you followed along with the install instructions last week and then went to do some development, you probably noticed that the Visual Studio environment does not allow for WYSIWYG/Drag and Drop...