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 position model where controls are positioned using explicit coordinates, as well as a more dynamic position model where layout and controls can be automatically sized and flowed as the browser resizes.
Developers using Silverlight and WPF use layout panels to coordinate the position and resizing of controls contained within them. The built-in layout panels in Silverlight 2 include three of the most commonly used ones in WPF:
- Canvas
- Stack Panel
- Grid
Canvas Panel
The Canvas panel is a pretty basic layout panel that supports positioning controls contained within it using explicit coordinates.
You position elements in a Canvas using a XAML feature called “Attached Properties” – which allow you to specify a control’s position relative to its immediate parent Canvas control’s Left, Top, Right or Bottom coordinates. Attached properties are useful as they allow a parent panel to extend the property set of a control contained within it. Canvas, by defining an attached property for “Top” and ”Left” basically adds the ability to define left and top attachment on Button (or any other UI element that is added to the Canvas), without any need to actually add a property to the Button class, or modify the Button class in any way.
We could add two buttons to a Canvas container, and position them both 50 pixels from the left of the Canvas, and 50 and 150 pixels from the top using XAML like below (the Canvas.Left and Canvas.Top attributes are examples of the attached property syntax):
The code
<UserControl x:Class="SilverlightSample.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="300" Height="300">
<Canvas Background="#FF5C7590">
<Button Content="Button1" Width="100" Height="50" Canvas.Left="50" Canvas.Top="50"></Button>
<Button Content="Button2" Width="100" Height="50" Canvas.Left="50" Canvas.Top="150"></Button>
</Canvas>
</UserControl>
This would then render our buttons like below:
Download source code for Canvas Panel
While the Canvas is useful for scenarios where the UI elements contained within it never move, it tends not to be very flexible as you add more controls into it or handle scenarios where the UI needs to resize or move. In cases like these you end up having to manually write code yourself to move things around inside the Canvas (which is a pain). A better solution for these dynamic scenarios is typically to use an alternative layout panel that has built-in semantics to-do this for you – like the StackPanel and Grid.
StackPanel
The StackPanel control is a simple layout panel that supports positioning its contained controls in either a row or column layout. StackPanels are typically used in scenarios where you want to arrange a small subsection of the UI on your page.
For example, we could use the StackPanel to vertically arrange three buttons on our page using XAML markup like below:
The code
<UserControl x:Class="SilverlightSample.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<StackPanel Background="#FF5C7590">
<Button Content="Button1" Width="100" Height="50" Margin="10"></Button>
<Button Content="Button2" Width="100" Height="50" Margin="10"></Button>
<Button Content="Button3" Width="100" Height="50" Margin="10"></Button>
</StackPanel>
</UserControl>
At runtime the StackPanel would then automatically arrange the Button controls in a vertical stack for us like below:
Download source code for Stack Panel
We could alternatively set the “Orientation” property of the StackPanel to be “Horizontal” instead of Vertical (which is the default):
<UserControl x:Class="SilverlightSample.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<StackPanel Orientation="Horizontal" Background="#FF5C7590">
<Button Content="Button1" Width="100" Height="50" Margin="10"></Button>
<Button Content="Button2" Width="100" Height="50" Margin="10"></Button>
<Button Content="Button3" Width="100" Height="50" Margin="10"></Button>
</StackPanel>
</UserControl>
This will then cause the StackPanel to automatically arrange the Button controls in a horizontal row like below:
Download source code for Stack Panel (Orientation)
Grid Panel
The Grid control is the most flexible layout panel, and supports arranging controls in multi-row and multi-column layouts. It is conceptually similar to an HTML Table element.
Unlike an HTML Table, you don’t embed controls within column and row elements. Instead you specify a Grid’s Row and Column definitions using <Grid.RowDefinitions> and <Grid.ColumnDefinitions> properties that are declared immediately under the <Grid> control. You can then use the XAML “Attached Property” syntax on controls contained within the grid to indicate which Grid row and column they should be populated within.
For example, we could declare a Grid layout has three rows and three columns, and then position 4 buttons within it using XAML like below:
The code
<UserControl x:Class="SilverlightSample.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid Background="#FF5C7590">
<Grid.RowDefinitions>
<RowDefinition Height="60" />
<RowDefinition Height="60" />
<RowDefinition Height="60" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="110"/>
<ColumnDefinition Width="110"/>
<ColumnDefinition Width="110"/>
</Grid.ColumnDefinitions>
<Button Content="Button1" Width="100" Height="50" Grid.Column="1" Grid.Row="0"></Button>
<Button Content="Button1" Width="100" Height="50" Grid.Column="2" Grid.Row="1"></Button>
<Button Content="Button1" Width="100" Height="50" Grid.Column="0" Grid.Row="1"></Button>
<Button Content="Button1" Width="100" Height="50" Grid.Column="1" Grid.Row="2"></Button>
</Grid>
</UserControl>
The Grid layout panel would then position the Button elements for us like so:
Download source code for Grid Panel
n addition to supporting absolute sizing (for example: Height=”60″) the Grid’s RowDefinition and ColumnDefinition controls also support an AutoSizing mode (Height=”Auto”), which automatically sizes the Grid or Row based on the size of the content contained within it (you can also optionally specify maximum and minimum size constraints – which can be very useful).
The Grid’s Row and ColumnDefinitions also support a feature called “Proportional Sizing” – which enables the size of a Grid’s Rows and Columns to be spaced proportionally relative to each other (for example: you could have the second row grow at 2x the rate of the first one).
You’ll find that the Grid provides a ton of power and flexibility – and it will probably be the most common layout panel control you’ll end up using.
Incoming search terms for the article:
silverlight layout management, #FF5C7590, silverlight dynamic layout arrange browser, silverlight move canvas based on content, Silverlight UI Layout, silverlight flexible layout, layout management silverlight, grid background, silverlight layout panels, silverlight layout manager, width * auto silverlight, silverlight auto resize controls, GridPanel Delphi, silverlight grid with dynamic height size, silverlight grid layout position elements, silverlight grid with horizontal rows, silverlight insert element in stackpanel at runtime, silverlight layout, silverlight moving stackpanel, silverlight layout bottom, Silverlight layout cause, silverlight grid get top left position, silverlight grid elements, set ListBoxDragDropTarget Grid Column from codeBehind#, Silverlight ArrangeElement canvas, silverlight button fixed position, silverlight canvas move margin, silverlight canvas top attribute, silverlight change location of control in code, silverlight control move/resize attach property#, silverlight control three panel, silverlight coordinates canvas, silverlight dynamic panel, silverlight fixed control position, silverlight flexible resizable grid, Silverlight Get Position of dyamic button, silverlight get top left of ui element without margin, silverlight layout control, silverlight layout example, silverlight: resize panel based on browser size, silverlight stackpanel bottom attached to grid, silverlight stackpanel proportional, silverlight stunning UI#, silverlight usercontrol in stakpanel, silverlight usercontrol move grid, silverlight usercontrol position bottom, stunning silverlight layout, usercontrol cause arrange silverlight, what is move silverlight control relative to other control, WPF alternative layout, wpf flexible layout with grid, silverlight stackpanel, silverlight set height auto, silverlight layout panel from code, silverlight layout with user control, silverlight layoutcontrol with autosized content, silverlight listboxdragdroptarget grid, silverlight move control, silverlight move resize ui elements, silverlight panel control, silverlight panel layout left, silverlight panel move, silverlight pixels coordinates, silverlight position on the bottom of canvas, silverlight postion relative to other control, xaml 3 columns layout examples, 3 column layout in siverlight, elements inside a coordinate in silverlight, explicit coordinates, find bottom coordinate silverlight, fix element position silverlight, fix position control on right bottom of browser silverlight, fixed position elements silverlight, fixed position layout in silverlight, flexible grid layout in silverlight, flexible width layout in silverlight, get control row and column coordinates in canvas silverlight, get left top parent canvas xaml, get width control silverlight auto, google silverlight layout, dynamic grid layout in silverlight, delphi dbgrid three rows, ColumnDefinition Proportional Sizing, 3 main built in layout panels in silverlight, adding a canvas control insside a grid silverlight, alternate layouts at runtime silverlight, arrange control at runtime in stackpanel, arranging buttons in a stackpanel, attach ui element to canvas, attached properties silverlight, auto adjust the relative position of component in layout silverlight, auto arrange panel in silverlight, automatic resizing stackpanel at runtime in silverlight, better silverlight wpf layout paanel, canvas background samples using xaml, canvas ou grid resize silverlight, communication between different dynamically loaded xaps#sclient=psy-ab, grid panel silvelight, moving controls silverlight canvas, page layout management in silverlight
