Tuesday, November 4, 2008

Silverlight Flexible Layout

Hi friends,
I have seen in Silverlight forums and other places that there are some confusions about Layouts. Specially how to give your Silverlight application a flexible layout that will be adjusted automatically as browser resize. Hope this post helps.

Basically there are two ways of doing it. One is from code where you will change the height,widths of controls as browser resizes. Another is creating layout as it automatically changes with browser resize. I will explain the later here.

Silverlight has 3 layout controls. Grid, StackPanel and Canvas. Canvas is NOT A FLEXIBLE ONE. Other two are. That does not mean you will not use Canvas but you will use it where you know the canvas does not have to be adjusted with browser resize.

So basically we will try building the following layout.

Now the top part is flexible provided that the text will come in middle. Middle green part is flexible but has a orange box in it that is fixed size. Bottom left red part is fixed but right skyblue part is flexible with text aligned to right.

Now come to the Page.xaml. There will be one LayoutRoot Grid is already defined. Now as you can see we will have 3 rows in the LayoutRoot Grid. Top white one middle one and bottom one.
We will set fixed height for top and bottom rows and let the middle row occupy the remaining height. I have given 100px for Top one and 100px for bottom one.

We will put one Grid for each row namely TopGrid, MiddleGrid and BottomGrid and set their Grid.Row property to 0,1 and 2 respectively.

Now we will define two columns for the BottomGrid. First one with fixed width ( 70 here) and the second one with remaining size. We will also add two Grids inside bottom grid and set Grid.Column to 0 and 1 respectively. We will name them as LeftBottomGrid and RightBottomGrid.

Now if you set the Grid backgrounds as the above image your application will look something like the following in the design view.

My Usercontrol width and height are 40o and 500 respectively.

Now we will add one textblock in the TopGrid and with text "WELCOME TO SILVERLIGHT" and set text align to center. Also set its vertical align ment to center.

We will add one canvas with orange background inside MiddleGrid and set its height and width to 100.

We will finally add another textblock in the RightBottomGrid with text "Code name Mrgni" and have its text alignment right. Also set its vertical alignment to center.

Now remove the height and width from the UserControl tag. It is required as we want our Silverlight application to Streach the entire div it has been assign to. Now run the application and here it goes....

Now here we have not used any relative positioning. But that can be done easily. Suppose you want the TopGrid to always have the height 100 but want the BottomGrid to have 1/5 th of remaining height and rest part to be occupied to MiddleGrid. Just change LayoutGrid's rowdefinitions as 100, 4*, 1* and you are done.

Here is the complete source for it. Please leave a comment if you have any doubt or any correction. I have done this application totally from Visual Studio but you can do it from blend as well.