Bookmark and Share Share...    Subscribe to this feed Feed   About Christian Moser  


Introduction to WPF Layout

Why layout is so important

Best Practices

Vertical and Horizontal Alignment

Margin and Padding

Width and Height

Content Overflow Handling


Why layout is so important

Layout of controls is critical to an applications usability. Arranging controls based on fixed pixel coordinates may work for an limited enviroment, but as soon as you want to use it on different screen resolutions or with different font sizes it will fail. WPF provides a rich set built-in layout panels that help you to avoid the common pitfalls.

These are the five most popular layout panels of WPF:

Best Practices

  • Avoid fixed positions - use the Alignment properties in combination with Margin to position elements in a panel
  • Avoid fixed sizes - set the Width and Height of elements to Auto whenever possible.
  • Don't abuse the canvas panel to layout elements. Use it only for vector graphics.
  • Use a StackPanel to layout buttons of a dialog
  • Use a GridPanel to layout a static data entry form. Create a Auto sized column for the labels and a Star sized column for the TextBoxes.
  • Use an ItemControl with a grid panel in a DataTemplate to layout dynamic key value lists. Use the SharedSize feature to synchronize the label widths.

Vertical and Horizontal Alignment

Use the VerticalAlignment and HorizontalAlignmant properties to dock the controls to one or multiple sides of the panel. The following illustrations show how the sizing behaves with the different combinations.

Margin and Padding

The Margin and Padding properties can be used to reserve some space around of within the control.

  • The Margin is the extra space around the control.
  • The Padding is extra space inside the control.
  • The Padding of an outer control is the Margin of an inner control.

Height and Width

Alltough its not a recommended way, all controls provide a Height and Width property to give an element a fixed size. A better way is to use the MinHeight, MaxHeight, MinWidth and MaxWidth properties to define a acceptable range.
If you set the width or height to Auto the control sizes itself to the size of the content.

Overflow Handling

Clipping

Layout panels typically clip those parts of child elements that overlap the border of the panel. This behavior can be controlled by setting the ClipToBounds property to true or false.

Scrolling

When the content is too big to fit the available size, you can wrap it into a ScrollViewer. The ScrollViewer uses two scroll bars to choose the visible area.

The visibility of the scrollbars can be controlled by the vertical and horizontal ScrollbarVisibility properties.

<ScrollViewer>
    <StackPanel>
        <Button Content="First Item" />
        <Button Content="Second Item" />
        <Button Content="Third Item" />
    </StackPanel>
</ScrollViewer>
 

Related Articles

MSDN - The Layout System



Last modified: 2009-05-27 08:38:49
Copyright (c) by Christian Moser, 2011.

 Comments on this article

Show all comments
Prerak Shah
Commented on 5.May 2009
Good Fundamental :)
Syed Ibrahim
Commented on 12.May 2009
Superb
shrek88
Commented on 17.May 2009
short and very useful
Enoya
Commented on 19.May 2009
very clear to understand
Charmis
Commented on 26.May 2009
Hi Christian,
Thanks for the article.
The "Stack Panel" link is broken. It points to StackLayout.html(which gives Article not found! ) instead of StackPanel.html
Christian Moser
Commented on 27.May 2009
Hi Charmis,
...thank you! I fixed the link.
Anil
Commented on 1.June 2009
Thanks for the nice and informative article Christian!

How can I make any of these panels dockstyle->fill to the entite window? I was trying to fill the entire window with a canvas panel, but could not see any Docking property for it. - The window size changes, the canvas size remains the same :(
anonimo
Commented on 22.June 2009
supremo (y)
Prabhakar
Commented on 30.September 2009
Thanks
Now i am confident on layouts usage and control orientation.
Learned from this tutorial about padding and margin.
ironstone13
Commented on 23.October 2009
Thanks
To the point and very concrete.
Though some more depth would be good
Chaitanya
Commented on 2.November 2009
Good to understand
Doudy
Commented on 2.November 2009
Hi Christian,
Thanks for this article, really I learned from you the basic steps in WPF.
Thanks, I hope you complete it.
Raja
Commented on 4.November 2009
Thanks a lot , it is very nice artical
Malu
Commented on 6.November 2009
kinda Okay but can add more points
Monica
Commented on 9.December 2009
Very informative, I hope you can make an article about stretching the whole application in a window. :)
pooja
Commented on 4.January 2010
hey..its really gud...
sathya
Commented on 11.February 2010
Its really very helpfull, thank u
Ravi
Commented on 8.March 2010
hey.... u did a great job :) :)
Ela
Commented on 11.March 2010
For Beginners, very gud article!!! Thanks a lot.
Ramesh
Commented on 15.March 2010
Nice Informative article!
Thanks a lot Christian!!!
Issahar
Commented on 23.March 2010
Thanks for this tutorial, It helps me very much
NullCoder
Commented on 23.April 2010
This tutorial is a very good starting point :D Thanks!
Dave
Commented on 26.April 2010
Too many technologies and not enough time! After writing code for 8+ years using Win32, MFC, Qt, VCL, etc., I'll probably end up in a padded cell if I have to learn another framework! :(
Ravi Vaish
Commented on 27.April 2010
Great Stuff.... easy to understand
description is short but almost cover all which required.
Ravi Vaish
Commented on 27.April 2010
Great Stuff.... easy to understand.
Description is short but almost cover all which required.
Ravi Vaish
Commented on 27.April 2010
Great Stuff....Christian!!!
you cover all stuff in easy way....
thanks!!!!
johnny
Commented on 29.April 2010
Very nice tutorial. but i have one doubt....
U created this tutorial UI using html. why so.....
kk.tvm
Commented on 3.May 2010
Good and simple with illustration

thanks Christian
Bhavesh Kaila
Commented on 6.May 2010
Great article.......
kullayappa
Commented on 11.May 2010
Really good for begginers...... thanks alot
将军
Commented on 26.May 2010
谢谢ï¼ææºç ç¤ºä¾åï¼
general
Commented on 26.May 2010
中å½
Arvinth
Commented on 27.May 2010
Cilptobound is not working

<Canvas Margin="50">
<Ellipse Canvas.Bottom =" 320" Canvas.Left="20" Height="170" Width="70" Fill="Plum" Canvas.ZIndex="10" ClipToBounds="True"/>
<Ellipse Canvas.Top="30" Canvas.Left="50" Height="70" Width="70" Fill="SkyBlue" Canvas.ZIndex="2"/>
<Ellipse Canvas.Top="50" Canvas.Left="30" Height="70" Width="70" Fill="Pink" Canvas.ZIndex="10"/>
</Canvas>
Tejas Patel
Commented on 7.June 2010
Good Article. To The Point and very Concise. Thanks.
Rahul...
Commented on 8.June 2010
hey christian d article is quite impresssive man..handsoff 2 ur work..beginer must read ths article
.net_KING
Commented on 14.June 2010
Concept of layouts are taken from Jawa Swing. Although programming UI in JAVA is more complicated.
Raghav
Commented on 16.June 2010
U'r Awesome boss...nice article....
Gaandu Prasad
Commented on 18.June 2010
Faad diya boss!!!
Pali
Commented on 23.June 2010
Very useful.
Suresh
Commented on 3.July 2010
I Feel that It Will Be A Good Article For Beginners.It's Very Useful TO Me
Vidya Sagar...
Commented on 22.July 2010
Very good article on layouts, thanks
Vidya Sagar...
Commented on 22.July 2010
Very good article on layouts, thanks
Vidya Sagar...
Commented on 22.July 2010
Very good article on layouts, thanks
Vidya Sagar...
Commented on 22.July 2010
Very good article on layouts, thanks
Vidya Sagar...
Commented on 22.July 2010
Very good article on layouts, thanks
Vidya Sagar...
Commented on 22.July 2010
Very good article on layouts, thanks
Vidya Sagar...
Commented on 22.July 2010
Very good article on layouts, thanks
Vidya Sagar...
Commented on 22.July 2010
Very good article on layouts, thanks
Jagan
Commented on 24.July 2010
Good Stuff!!!

www.Jobzlive.com
suresh
Commented on 9.August 2010
Good article. Thanks
Sugumar
Commented on 15.August 2010
Fantastic!! Itâs really useful for beginners, you can think to publish a book
Spoelle
Commented on 17.August 2010
Thanks ! Very useful for a WPF beginner like me !
harsha
Commented on 23.August 2010
good stuff. but not enough for a beginer, plz send some advanced concepts like reports and all to my e-mail id
Ramesh
Commented on 3.September 2010
It's really pentatastic for beginners, I know its for us only
Ajith Puthur
Commented on 26.November 2010
Good... Nice Site...Thanks..
Ayappa
Commented on 26.November 2010
its really pentyastis amma.
Britto
Commented on 9.December 2010
its excellent
igor
Commented on 17.December 2010
Hey Christian, this site is amazingly helpful! I appreciate your work very much!

PS: The SharedSize-Link leads to a 404.
feixiang
Commented on 28.December 2010
ä¸éï¼è®¤ççç~
Rajesh
Commented on 7.January 2011
Its Good Yaar..
lakshman...
Commented on 31.January 2011
its simply superb for learners r professionlas
Mustansar
Commented on 2.February 2011
Assalam-o-alaikum
A lot help for beginners, I am gona present it to my fellows tomorrow :)
Vandip
Commented on 3.March 2011
Awesome buddy ! Thankz a ton ! :)
Vandip
Commented on 3.March 2011
Awesome buddy ! Thankz a ton ! :)
gdemmi
Commented on 5.March 2011
Awewsome article!
Johnson
Commented on 10.March 2011
Very good article on layouts, thanks
lalita patil
Commented on 25.March 2011
We learnt lot of things from this article,its so nice
Sanjay Patolia
Commented on 26.March 2011
Nice one it really gives good idea about using layout panels and use best practise out of it. :)
raja
Commented on 27.March 2011
hai its very good article
rashmi
Commented on 17.April 2011
Small, crisp. Nice one. Thanks
Om Prakash
Commented on 21.April 2011
Good, nice,helpful article......
Thanks Sir G

Regard :
Om Prakash Bishnoi
Muhammad Hanif
Commented on 20.May 2011
Great effort. Easy to understand.....Learning with out boring.....Really interesting.
manmohan
Commented on 6.June 2011
Great stuff to make us understand the usefullness of layout panel in a simpler way.
rahul
Commented on 8.June 2011
nice
Raj
Commented on 14.June 2011
nice article
zeceTeddy
Commented on 15.June 2011
Very informative post. Thanks for taking the time to share your view with us.
Anubhav Ranjan
Commented on 29.July 2011
Good article. Must read before starting development in WPF.
AS
Commented on 2.August 2011
Nice and clear for beginners
expert
Commented on 16.August 2011
good job...this helped me a lot
Jo
Commented on 17.August 2011
Could you please explain me how to add a toolbar into a grid by writing code in .xaml.cs file?
Jo
Commented on 17.August 2011
Could you please explain me how to add a toolbar into a grid by writing code in .xaml.cs file?
Jo
Commented on 17.August 2011
Could you please explain me how to add a toolbar into a grid by writing code in .xaml.cs file?
Jo
Commented on 17.August 2011
Could you please explain me how to add a toolbar into a grid by writing code in .xaml.cs file?
Jo
Commented on 17.August 2011
Could you please explain me how to add a toolbar into a grid by writing code in .xaml.cs file?
Saj
Commented on 1.September 2011
Hi Mate,
Is there a way to add WPF Window at a desired position, like if you have a panel when user clicks on buttons the new window opens in the middle panel or desired panel rather than coming up as New Window (more like MDI window approach)

Thanks
MEE
Commented on 23.September 2011
Excellent

Name
E-Mail (optional)
Comment