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
Goo
Commented on 27.February 2009
Now I understood what is Stack Panel. Nice article
Tormentor
Commented on 9.May 2009
Can I stretch the last element in the empty space of the stack panel without giving it any width or height? any help if possible!
Christian Moser
Commented on 10.May 2009
Hi Tormentor,
It's not possible to strech the last element of a stack panel because the stack panel has "infinite" size for its elements. You can solve your problem by using a DockPanel and dock all contained elements to top and set LastChildFill to true.

Greetings
Christian
Maurizio Longo
Commented on 9.July 2009
Thanks a lot for doing this job: it's really helpful!
My contribution could be telling you how that it is Cappuccino and Latte Macchiato the correct spelling :-)
Huy Nguyen
Commented on 24.August 2009
Thanks for useful tutorial.
I can find how to use thing in WPF quickly.
kamran
Commented on 10.September 2009
Nice stack panel overview
saru
Commented on 12.September 2009
Only this much.Can u plz provide some more information for a new user this is enough but need some more clarification
Swaroop
Commented on 13.December 2009
Simple and quick explaination helped a lot
pooja
Commented on 4.January 2010
can u telme hw to use datagridview in wpf.
asdddddddddd...
Commented on 29.January 2010
saddddddddddddd
sathya
Commented on 11.February 2010
nice one
A
Commented on 24.February 2010
Very nice articles.. Thanks!!
moti
Commented on 6.March 2010
thanks for everything, really useful articles! it seems more clear to me than before!
sam
Commented on 8.April 2010
really nice.. thanks
WomenLover43
Commented on 24.April 2010
All I know is I like's my women thick!
WomenLover43
Commented on 26.April 2010
All I know is I like's my women thick!
Joe Rossi of...
Commented on 7.June 2010
I am not sure this really helps me
Bansi
Commented on 19.June 2010
Baans maar riya hai ye example! Need more details yaar.
Hichem
Commented on 6.July 2010
we need dynamik coding for this utilities
humanblade
Commented on 11.July 2010
oh just so you know. in english 'Chappuchino' is a gay sex act in which a man wearing assless chaps shits upon the chin of his lover (chaps+poo+chin+OMG!) you had probably mean cappuccino, but just wanted to make you aware in case site started drawing the attention of chappuchino lovers.
humanblade
Commented on 11.July 2010
oh yeah, and your Akismet thing doesn't seem to be working for spam avoidance. i was wondering what was going on with all the apparently east asian named commentators.
Eric Layne
Commented on 19.July 2010
I'm guessing this article has been left unfinished? It barely begins to describe many of the properties of a stackpanel.
u─čur
Commented on 14.August 2010
mal bu ne la salak bu Åčey yapmayı bilmiyonuz zuhahaha :D
MOSER
Commented on 23.August 2010
I apprieciate your feedback but I cant explain it anymore in depth because I just copy and pasted this from another website
sm
Commented on 31.August 2010
Thanks, like to learn WPF here :)
priya
Commented on 15.October 2010
Good ,very good
Peter
Commented on 23.October 2010
Is it not possible to stack a canvas into a StackPanel?
PeterKaBaap
Commented on 26.November 2010
@Peter, why do not you try yourself and check. you bloody bastard
anu
Commented on 16.December 2010
helped me
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