User Id :    Password :      New Member   Forgot Password  
A look on Layout in XAML
Description In designing UI, layout is very important. In XAML in designing UI we have differenet type of layout such as Grid, StackPannel, Canvas, DockPannel etc.   No. of Views     2109
  Rating     0
Author Rahul Saxena   Posted On     29 Jun 2011
Tags .NET Frameworks,WPF    

Sample Code   Download Code


Layout is the basic in designing UI. XAML is specially designed for making good UI. Here in this article I am going to show some Layout in XAML. How we use these Layouts in designing our UI ? Layout and Pannel classes play an important role here in XAML to design a good UI.

Height and Width are two most important factor of any element. The element which is derived from FrameWorkElement class has two attributes. We can set the size of the elements by using height and width.


<window x:class="WindowsApplication1.Window1" xmlns="" xmlns:x="" title="WindowsApplication1" height="300" width="300">
 <grid name="Grid1">
   <button click="makebutton" name="ButtonShow" height="100" width="100">Click here</button>


The window will look like this:


Figure 1: Here we set the height and width of this button.

Now move to Pannel Classes and other in XAML. By using them we can design our UI more interactive.

    • Grid
    • Canvas
    • StackPannel
    • DockPannel

Grid  Grid is same like as Table in CSS. In a Grid there are Rows and Column. Here in Grid there is Grid.RowDefination and Grid.ColumnDefination. We use these two while working with Grid. In a Grid every child erlement can have their own Grid. We can use RowSpan and ColSpan also in a Grid.



<window x:class="XAMLLayout.Window1" xmlns="" xmlns:x="" title="XAMLLayout" height="300" width="300">

  <grid showgridlines="True">
    <button background="Blue" grid.row="0" grid.column="0" tooltip="" margin="5"></button>

    <button background="Gray" grid.row="0" grid.column="1" tooltip="" margin="5"></button>
    <button background="Aqua" grid.row="1" grid.column="0" tooltip="" margin="5"></button>
    <button background="DarkGoldenrod" grid.row="1" grid.column="1" tooltip="" margin="5"></button>


The window will look like this:



Figure 2: Grid Show.

Canvas Being of Four properties(Canvas.Top, Canvas.Left, Canvas.Right and Canvas.Bottom). Canvas can be used for absolue positioning in XAML. We can set any element in a canvas whereever we want by using these 4 properties. Let see this in a  example:


<window x:class="XAMLLayout.Window1" xmlns="" xmlns:x="" title="XAMLLayout" height="300" width="300">
    <label canvas.left="20""20" background="Gray">Name</label>
    <textbox canvas.left="80""20" background="Beige">Rahul</textbox>
    <label canvas.bottom="35" canvas.right="120" background="AntiqueWhite"></label>
    <label canvas.bottom="80" canvas.left="200" canvas.right="10" background="Brown">.NET</label>

The window will become look like this


Figure 3: Canvas Show.

StackPannel StackPanel is the simplest Panel element in XAML. StackPanel shows the elements respectively according to the order. In StackPannel there is orientation attribute which has two values: horizontal and vertical. By default orientation is vertical. Let see how Stack pannel works with our element:

<window x:class="XAMLLayout.Window1" xmlns="" xmlns:x="" title="XAMLLayout" height="300" width="300">
    <label background="AliceBlue" width="400">Welcome</label>    
    <textbox background="SaddleBrown">How r u </textbox>
    <textbox background="DarkSalmon"> Good </textbox>

The window will look like this:


Figure 4: StackPannel in Vertical.

Suppose if we want to show our element Horizontally aligned then:


Figure 5: StackPannel in Horizontal orientation.

DockPannel Basically both StackPannel and DockPannel are same but in DockPannel we can dock the elements top, left, right and bottom. See DockPannel by a example:

<window x:class="XAMLLayout.Window1" xmlns="" xmlns:x="" title="XAMLLayout" height="300" width="300">  
    <label background="AliceBlue" dockpanel.dock="Top">Welcome</label>
    <textbox background="SaddleBrown" dockpanel.dock="Bottom">How r u </textbox>
    <textbox background="DarkSalmon" dockpanel.dock="Left"> Good </textbox>
    <textbox background="Cyan" dockpanel.dock="Right"> India </textbox>


The window will look lie this:

Figure 6: DockPannel Presentation.


About Author

About Author Rahul shows great interests in working with Microsoft technologies. He specializes in the implementation of DataBase & Graphics. His area of expertise includes: C#, ASP.NET,ADO.NET,Windows Forms & Web Services. He hails from background , Master's in Computer Application. With programming he loves photography, traveling and reading books. Rahul Saxena
No Photo
Country India
Company N/A
Home Page N/A

Rate this article

Rating options from poor, fair, good, very good to excelent.  


Write your comment here.
Verification Code