Introduction to WPF Layout

Why layout is so important

Best Practices

Vertical and Horizontal Alignment

Margin and Padding

Width and Height

Content Overflow Handling

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:

• Grid Panel
• Stack Panel
• Dock Panel
• Wrap Panel
• Canvas Panel

• 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.

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.

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.

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.

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

 Comments on this article

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