17/12/2014

WPFTutorial|IntroductiontoWPFLayout

Home

Home

Layout

Introduction to WPF Layout

WPF Inspector

DataGridcontrolforWPF

Getting

Fastest,mostmatureWPFdatagridcontrol.Trythenoinstall
demo!

started

Share...

Feed About Christian Moser

Introduction
to WPF
Development
Tools
Books
Create a
simple WPF

IntroductiontoWPFLayout
Why layout is so important

application

Best Practices

Instruction

Vertical and Horizontal Alignment

Videos
Learn WPF

Margin and Padding

in two

Width and Height

Weeks

Content Overflow Handling

Fundamentals
What's new
in XAML in
.NET 4.0
XAML
Dependency
Properties
Routed
Events

Whylayoutissoimportant
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 builtin layout panels that help you to avoid the common pitfalls.
These are the five most popular layout panels of WPF:

Logical

Grid Panel

and Visual

Stack Panel

Tree

Dock Panel

Hard and

Wrap Panel

Softwarerequirements

Canvas Panel

WPF
Troubleshooting
User
Experience
UX Design
Process
Patterns
Dependency
Injection
Undo/Redo

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

Model
View
ViewModel

VerticalandHorizontalAlignment

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

Controls
List of 3rd
Party
Controls
ItemsControl
LivePreview
ComboBox
Calendar
ToolTips
TextBox
DataGrid
ContextMenu
Expander
Menus
PasswordBox
Dialogs

MarginandPadding

http://www.wpftutorial.net/LayoutProperties.html

1/4

17/12/2014

WPFTutorial|IntroductiontoWPFLayout
RadioButton

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

Slider

The Margin is the extra space around the control.

Popup

The Padding is extra space inside the control.

The Padding of an outer control is the Margin of an inner control.

ListBox
Layout
of
Items
Apply
a
DataTemplate
Strech
an
Item
Selected

HeightandWidth

Alltough its not a recommended way, all controls provide a Height and Width property to give an element a fixed size. A
Backgroundbetter 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.
ListView
Item

TextBlock
Window
Remove
the
Icon

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

Custom
Controls
UserControls
vs.
CustomControls
How to
Create a
Custom
Control
Layout

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.

Input
Keyboard

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

Mouse
Mutli Touch
RoutedCommands
in a
ContextMenu
Data Binding
Data
Binding
Overview

<ScrollViewer>
<StackPanel>
<ButtonContent="FirstItem"/>
<ButtonContent="SecondItem"/>
<ButtonContent="ThirdItem"/>
</StackPanel>
</ScrollViewer>

RelatedArticles
MSDN The Layout System

Data

WPFTutorial

Validation

WPFApplication

WPFBinding

Set a
ValidationError
Copyright (c) by Christian Moser, 2011.
by

DatagridWPF
Last modified: 20090527 08:38:49

Code
Elegant way

Comments on this article

for

INotifyPropertyChanged
Show all comments
Value
Commented on 2.February 2011

Converters
Debug
DataBinding

Mustansar

Assalamoalaikum
A lot help for beginners, I am gona present it to my fellows tomorrow :

Issues
How to

Commented on 3.March 2011

Bind
EnumValues

Vandip

Data

Commented on 3.March 2011

Viewing,
Sorting and
Filtering

Awesome buddy ! Thankz a ton ! :

Vandip

Popular

Commented on 5.March 2011

Data
Binding
Expressions

Awesome buddy ! Thankz a ton ! :

gdemmi

Awewsome article!
Commented on 10.March 2011

Styling
Designtime

Johnson

http://www.wpftutorial.net/LayoutProperties.html

Very good article on layouts, thanks

2/4

17/12/2014

WPFTutorial|IntroductiontoWPFLayout
vs. Runtime

Commented on 25.March 2011

Themes
lalita patil

Styles
Triggers

We learnt lot of things from this article,its so nice

Commented on 26.March 2011

Style
inheritance Sanjay Patolia

Nice one it really gives good idea about using layout panels and use best practise out of it. :

Override
Commented on 27.March 2011

the
default
Style

raja

Control

Commented on 17.April 2011

Templates
Data
Templates

hai its very good article

rashmi

Small, crisp. Nice one. Thanks

Commented on 21.April 2011

Localization
Evaluate a

Om Prakash

Good, nice,helpful article......

Thanks Sir G

localization
Regard :
Om Prakash Bishnoi

mechanism
Localization
using a
MarkupExtension
Interaction
Behaviors

Commented on 20.May 2011

Muhammad
Hanif

Drag &

Commented on 6.June 2011

Drop
Resources

Great effort. Easy to understand.....Learning with out boring.....Really interesting.

manmohan

Great stuff to make us understand the usefullness of layout panel in a simpler way.
Commented on 8.June 2011

2D Graphics
rahul

3D Graphics

Commented on 14.June 2011

Introduction
to WPF 3D

Raj

Animation

Very informative post. Thanks for taking the time to share your view with us.

Frame Rate
Animations

zeceTeddy

Multimedia
Speech
Synthesizer

Commented on 29.July 2011

Anubhav
Ranjan

Documents

Good article. Must read before starting development in WPF.

Commented on 2.August 2011

FlowDocuments
Inline

nice article
Commented on 15.June 2011

Adjust the
Debugging

nice

AS

Nice and clear for beginners

Images in a
Commented on 16.August 2011

FlowDocument
Windows 7

expert

Task Dialog

Commented on 17.August 2011

Jumplists
Glass
Windows

good job...this helped me a lot

Jo

Could you please explain me how to add a toolbar into a grid by writing code in .xaml.cs file?
Commented on 17.August 2011

Interoperability
Query

Jo

Screen

Commented on 17.August 2011

Resolutions
App
resources &

Could you please explain me how to add a toolbar into a grid by writing code in .xaml.cs file?

Jo

WinForms

Could you please explain me how to add a toolbar into a grid by writing code in .xaml.cs file?
Commented on 17.August 2011

Integration
Jo

Could you please explain me how to add a toolbar into a grid by writing code in .xaml.cs file?

Performance
Commented on 17.August 2011

Top 11 WPF
Performance
Tips

Jo

Commented on 1.September 2011

Expression
Blend
Prototyping

Could you please explain me how to add a toolbar into a grid by writing code in .xaml.cs file?

Saj

with
SketchFlow

http://www.wpftutorial.net/LayoutProperties.html

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

3/4

17/12/2014

WPFTutorial|IntroductiontoWPFLayout
Thanks

Addins
How to
Import

Commented on 23.September 2011

Photoshop
Files
Tools
XAML
Converters
Graphical

MEE

Excellent

Name
EMail optional
Comment

Designers
Utilities
XAML
Editors

PostComment

UI Automation

http://www.wpftutorial.net/LayoutProperties.html

4/4