.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> Silverlight >> Post New Resource Bookmark and Share   

 Subscribe to Articles

3 ways of applying layouts using SilverLight

Posted By:Shivprasad koirala       Posted Date: June 10, 2009    Points: 25    Category: Silverlight    URL: http://www.questpond.com  
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3 ways of applying layouts using SilverLight
 

Introduction

Other silverlight FAQ

Canvas, Grid and StackPanel

Canvas - Absolute positioning

Grid - Table layout

Stack - One above other

Source code

 

 

Introduction
 

Must be this article is very basic. But I have seen many silver light developers struggling to layout controls and objects in silver light. In section we will quickly walk through 3 different methods of layout for silverlight. In this article we will go through each of these layout implementation and do a simple sample for the same.

I have collected around 400 FAQ questions and answers in WCF, WPF, WWF, SharePoint, design patterns, UML etc. Feel free to download these FAQ PDF's from my site http://www.questpond.com
 

Other silverlight FAQ
 

Silverlight FAQ Part 1:- http://www.dotnetspark.com/kb/536-21-important-faq-questions-for-wpf-and-silverlight.aspx    This tutorial has 21 basic FAQ's which will help you understand WPF , XAML , help your build your first silverlight application and also explains the overall silverlight architecture.

SilverLight FAQ Part 2 (Animations and Transformations):- http://www.dotnetspark.com/kb/615-silverlight-faq-part-2-animations-and-transformations.aspx    This tutorial has 10 FAQ questions which starts with silverlight animation fundamentals and then shows a simple animated rectangle. The article then moves ahead and talks about 4 different ways of transforming the objects.
 

Canvas, Grid and StackPanel
 

There are three ways provided by Silverlight for layout management Canvas, Grid and Stack panel. Each of these methodologies fit in to different situations as per layout needs. All these layout controls inherit from Panel class. In the further sections we will go through each of them to understand how they work.
 

Canvas - Absolute positioning
 

Canvas is the simplest methodology for layout management. It supports absolute positioning using 'X' and 'Y' coordinates. 'Canvas.Left' helps to specify the X co-ordinate while 'Canvas.Top' helps to provide the 'Y' coordinates.
Below is a simple code snippet which shows how a rectangle object is positioned using 'Canvas' on co-ordinates (50,150).




 

Below is how the display looks like. When you the run the code the XAML viewer will position the rectangle object on absolute 'X" and 'Y' coordinates.
 

Grid - Table layout
 

Grid layout helps you position your controls using rows and columns. It's very similar to table defined in HTML.
 

 

Below is a simple table with two columns and two rows defined using 'Grid'. We have shown how the table display looks like. Using the 'Grid.ColumnDefinition' we have defined two columns and using 'Grid.RowDefinition' we have defined two rows. We have then created 4 text blocks which are then specified in each section using 'Grid.Column' and 'Grid.Row'. For instance to place in the first column we need specify the 'Grid.Column' as '0' and 'Grid.Row' as '0'. We have followed the same pattern for everyone and you can see all the textblocks are placed in the appropriate sections.
 

Stack - One above other
 

As the name so the behavior. Stack allows you to arrange your UI elements vertically or horizontally.
 

For instance below are 4 elements which are arranged in a stack panel element. You can see how the stack aligns / stacks the elements one above other. You can also stack the UI elements horizontally or vertically depending on your layout nature.
 

Source code
 

You can download the source code from the bottom of this article
 


 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend