Home  separator  Layout  separator  StackPanel
Bookmark and Share Share...    Subscribe to this feed Feed   About Christian Moser  


WPF StackPanel

Introduction

The StackPanel in WPF is a simple and useful layout panel. It stacks its child elements below or beside each other, dependening on its orientation. This is very useful to create any kinds of lists. All WPF ItemsControls like ComboBox, ListBox or Menu use a StackPanel as their internal layout panel.

 
<StackPanel>
  <TextBlock Margin="10" FontSize="20">How do you like your coffee?</TextBlock>
  <Button Margin="10">Black</Button>
  <Button Margin="10">With milk</Button>
  <Button Margin="10">Latte machiato</Button>
  <Button Margin="10">Chappuchino</Button>
</StackPanel>
 
 

Stack Items horizontally

A good example for a horizontal stack panel are the "OK" and "Cancel" buttons of a dialog window. Because the size of the text can change if the user changes the font-size or switches the language we should avoid fixed sized buttons. The stack panel aligns the two buttons depending on their desired size. If they need more space they will get it automatically. Never mess again with too small or too large buttons.

 
<StackPanel Margin="8" Orientation="Horizontal">            
   <Button MinWidth="93">OK</Button>
   <Button MinWidth="93" Margin="10,0,0,0">Cancel</Button>
</StackPanel>
 
 




Last modified: 2009-12-15 23:55:07
Copyright (c) by Christian Moser, 2011.

 Comments on this article

Show all comments
upa
Commented on 23.December 2010
Nice one..
After studying this tutorial, i think WPF is intresting topic..
Everyone...
Commented on 12.January 2011
hi evryone!!!
Albert
Commented on 26.January 2011
Thanks, nice articles and helping me a lot.
Daniel
Commented on 28.February 2011
Quick and right to the bone, thanks!
Prabodha Eranga
Commented on 2.March 2011
Nice
Mukesh
Commented on 3.March 2011
Can you tell me how to align control in centre in stackpanel
Sreenivas
Commented on 4.March 2011
Niceone
in4man
Commented on 5.March 2011
2 Mukesh horizontalalligment=center
Sandeep...
Commented on 10.March 2011
nice article...Thanks!!
me
Commented on 12.March 2011
cappuccino
Kev
Commented on 15.March 2011
Hi Mukesh,
The default is that the control will be centered. Use the HorizontalAlignment on the Control to set it specifically
e.g
<StackPanel Height="100" HorizontalAlignment="Left" Margin="502,98,0,0" Name="stackPanel1" VerticalAlignment="Top" Width="200">
<Button Content="Button" HorizontalAlignment="Center" Height="23" Name="button3" Width="75" />
</StackPanel>
Sanjay Patolia
Commented on 26.March 2011
Superb for dynamic size changing functionality of a User Interface Controls
mohammad...
Commented on 16.April 2011
this is the good article but is very very simple.
mohammad...
Commented on 17.April 2011
this is the good article
sbuxboy
Commented on 5.May 2011
venti soy iced white mocha, no whip
nice article :)
Swat
Commented on 19.May 2011
Can we take stackpanel inside a grid panel???? i tried but its nt wrking.. im new to WPF .. please help
ray akkanson
Commented on 28.May 2011
thanx this
article helped me a lot.
Al
Commented on 29.May 2011
Please put some forward and back buttons on these pages. It would make the UX of the tutorial so much better.
Christian
Commented on 22.June 2011
Nice Page! Helps a lot!
Is there a way to extend the last Element to the End of the Stackpanel?

Saravanan
Commented on 7.July 2011
Nice Article
VeeraPratap...
Commented on 7.July 2011
Nice turorial.
Hims
Commented on 15.July 2011
Fadu Articles hen bhai
peter ka bap
Commented on 23.July 2011
hi guys
ping
Commented on 20.August 2011
you know I can still smell wee and a little poo too
ki
Commented on 19.September 2011
Hi i have tried any exampled regarding the animation in wpf. But here two check box are taken one check box for continue rotate of an object in clock wise and another checkbox when i click the object should rotate in anticlock wise direction . Can i know the what is the condition i should use inorder to reverse the object in anticlock when i check the autoreverse checkbox.

Name
E-Mail (optional)
Comment