Thursday, September 8, 2011

Silverlight and the layout management. (Grid, Canvas, StackPanel and dock panel)






If you have done any Silverlight development, then you are familiar with the Canvas, the Grid and the StackPanel.
All 3 containers are unique in their own way. But they all have some limitations/drawbacks. Let's see:
1: The Canvas:
<Canvas Background="Blue">
   <TextBlock Height="50" Width="50" Canvas.Left="15" Canvas.Top="15" />
</Canvas>
I don't want to pixelate my items.
2: The StackPanel: 
<StackPanel>
   <TextBlock Height="50" Width="50" />
   <TextBlock Height="50" Width="50" />  
</StackPanel>
Just not rich enough to do any complex layouts.
3: The Grid:
<Grid Background="Silver">
   <Grid.ColumnDefinitions>
       <ColumnDefinition Width="*2" />
       <ColumnDefinition Width="*1" />
   </Grid.ColumnDefinitions>
   <Grid.RowDefinitions>
       <RowDefinition Height="50" />
       <RowDefinition Height="100" />
   </Grid.RowDefinitions>
   <TextBlock Height="50" Width="50" Grid.Row="1" Grid.Column="1"/>
</Grid>
Yes, I can define a very complex layout using the Grid. But I am still required to place my items inside "a" cell by specifying
the Grid.Row and Grid.Column attributes on each individual item. I also need to decide, how may rows and columns my page has.
This just does not feel natural.
To address this, Developer Express is working on a special LayoutControl container that will eliminate these hassles. All you have to do is specify where you want
your items placed. Left, Right, Top or Bottom.
<DockedLayoutControl x:Name="layoutItems" DockedLayoutControl.Dock="Client">
            <TextBlock Text="My Top Text" DockedLayoutControl.Dock="Left"/>
            <TextBlock Text="My Bottom Text" DockedLayoutControl.Dock="Bottom"/>
</DockedLayoutControl>
Here is a screen shot of a layout done using a DockedLayoutContro

No comments:

Post a Comment