Layout in XAML
page 3 of 8
by Keyvan Nayyeri
Feedback
Average Rating: 
Views (Total / Last 10 Days): 62591/ 145

StackPanel

StackPanel is the simplest Panel element in XAML.  It lays out your elements in a manner similar to a stack.

StackPanel has an Orientation attribute that represents the orientation of it.  This attribute can get two values: Horizontal and Vertical.  Default is Vertical.

StackPanel shows your elements respectively according to the order you declared them in XAML file.

Listing 2 and 3 represent a Vertical and Horizontal StackPanel, respectively, that contain three TextBoxes (I used background colors to help you find the position of TextBoxes easier) and Figure 2 and 3 are their output.

Listing 2

<Window x:Class="LayoutinXAML.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Layout in XAML" Height="150" Width="300"
    >
  <StackPanel>
    <TextBox Background="Coral">
      ASP Alliance 1
    </TextBox>
    <TextBox Background="Plum">
      ASP Alliance 2
    </TextBox>
    <TextBox Background="Aquamarine">
      ASP Alliance 3
    </TextBox>
  </StackPanel>
</Window>

Figure 2

Listing 3

<Window x:Class="LayoutinXAML.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Layout in XAML" Height="150" Width="300"
    >
  <StackPanel Orientation="Horizontal">
    <TextBox Background="Coral">
      ASP Alliance 1
    </TextBox>
    <TextBox Background="Plum">
      ASP Alliance 2
    </TextBox>
    <TextBox Background="Aquamarine">
      ASP Alliance 3
    </TextBox>
  </StackPanel>
</Window>

Figure 3

Note that the width and height of a StackPanel governs the width and height of its children.  This means if you set a large width or height for your elements that exceeds the width and height of a StackPanel, they will be cut.  Listing 4 and Figure 4 show this in action.

Listing 4

<Window x:Class="LayoutinXAML.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Layout in XAML" Height="150" Width="300"
    >
  <StackPanel Width="200">
    <TextBox Background="Coral" Width="300">
      ASP Alliance 1
    </TextBox>
    <TextBox Background="Plum">
      ASP Alliance 2
    </TextBox>
    <TextBox Background="Aquamarine">
      ASP Alliance 3
    </TextBox>
  </StackPanel>
</Window>

Figure 4


View Entire Article

User Comments

Title: Good One....   
Name: Satish
Date: 2011-01-31 5:57:16 AM
Comment:
Thanks for the article
Title: Margins and Canvas.Top/Left   
Name: Amir
Date: 2010-04-17 8:50:03 PM
Comment:
Hi,

What is the difference between margins and Canvas.Left/Top/Right/Bottom? They both seem to define left, top, right and bottom distances. If that's the case then I don't understand what they mean when they say Canvas uses absolute positioning and grid uses relative positioning.

Thanks
Title: Complement   
Name: Mehta Chandni K.
Date: 2009-02-09 4:08:59 AM
Comment:
A very good article. I got to learn many basic and important things on XAML. Thank you very much. Keep uploading such articles for students like us..
Title: XAML Layout   
Name: Anjan
Date: 2007-05-15 6:53:25 AM
Comment:
It is fine with windows.I want to Layout the Page with WINDOWS VISTA based.
Title: Correction   
Name: Keyvan Nayyeri
Date: 2006-10-27 8:36:05 AM
Comment:
Actually nothing :-D

I just forgot to remove them from previous code but they won't affect the result anyways.

Thanks for pointing.
Title: grid...   
Name: Amirhossein Babaeian
Date: 2006-10-27 6:46:47 AM
Comment:
what's the roll of grid.row and grid.column in controls that contains in cansvas tags?
Title: Resources in XAML   
Name: Keyvan Nayyeri
Date: 2006-10-12 12:58:22 AM
Comment:
Third part of these tutorials about Resources in XAML:
http://aspalliance.com/1032_Resources_in_XAML
Title: Nice article   
Name: Harry
Date: 2006-10-10 12:27:22 AM
Comment:
Hi Keyvan,
This is very nice article about XAML. I read your previous article also, even that was alos good for begginers.

Keep it up....

Harry
Title: Introduction to XAML   
Name: Keyvan Nayyeri
Date: 2006-10-09 2:08:59 PM
Comment:
First part of these tutorials, Introduction to XAML:
http://aspalliance.com/1019_Introduction_to_XAML

Product Spotlight
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2018 ASPAlliance.com  |  Page Processed at 2018-12-11 8:44:34 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search