Common Layout Properties

Submitted to: Mr. Jitendra Nasriwala

Prepared By: Rachana R. Thakkar 11MSCCA24

Introduction
All user interface elements have a standard set of layout properties, mostly inherited from the Framework Element base class. These properties are shown in Table.
Property
Width Height MinWidth MaxWidth MinHeight MaxHeight HorizontalAlignment VerticalAlignment Margin Padding Visibility FlowDirection Panel.ZIndex

Usage
Specifies a fixed width Specifies a fixed height The minimum permissible width The maximum permissible width The minimum permissible height The maximum permissible height Horizontal position if element is smaller than available space Vertical position if element is smaller than available space Space around outside of element Space between element border and content Allows the element to be made invisible to the layout system where necessary Text direction Controls which elements are on top or underneath

Width and Height

 You can set these properties to specify an exact width and height for your

element.
 You should try to avoid using these in general it is preferable to let

elements determine their own size where possible.

 If you specify a Width or Height, the layout system will always attempt to

honor your choices.

 Of course, if you make an element wider than the screen, WPF can t make

the screen any wider, but as long as what you request is possible, it will be done.

MinWidth, MaxWidth, MinHeight, and MaxHeight

 These properties allow you to specify upper and lower limits on the size of

an element.
 If you need to constrain your user interface s layout, it is usually better to

use these than Width and Height where possible.

 It is possible to mandate limits that simply cannot be fulfilled.  For example, if you request a MinWidth of "10000", WPF won t be able to

honor that request unless you have some very exoticdisplay hardware.
 In these cases, your element will be truncated to fit the space available.

Horizontal Alignment and Vertical Alignment

 These properties control how an element is placed inside a parent when

more room is available than is necessary.

 For example, a vertical Stack Panel will normally be as wide as the widest

element, meaning that any narrower elements are given excess space.
 The default setting for both of these properties is Stretch when excess

space is available, the element will be enlarged to fill that space.

 The alternatives are Left, Center, and Right for HorizontalAlignment, and

Top, Center, and Bottom for Vertical Alignment.

 If you choose any of these, the element will not be stretched it will use

its natural height or width, and will then be positioned to one side or in the center.

Margin
 This property determines the amount of space that should be left around

the element during layout. You can specify Margin as a single number, a pair of numbers, or a list of four numbers.
 When one number is used, this indicates that the same amount of space

should be left on all sides.

 With two numbers, the first indicates the space to the left and right and

the second indicates the space above and below. When four numbers are specified, they indicate the amount of space on the left, top, right, and bottom sides, respectively.
 You can use the Margin property to control an element s position.

 Example :- Controlling an element s position with Margin <Border BorderBrush="Black BorderThickness="1"> <Grid> <Rectangle Margin="20, 10, 0, 0" Fill="Green" Width="80" Height="30" HorizontalAlignment="Left" VerticalAlignment="Top" /> </Grid> </Border>

Result:

Fig. Margin

Padding
 Whereas Margin indicates how much space should be left around the

outside of an element, Padding specifies how much should be left between a control s outside and its internal content.
 Example shows three buttons, one with just a margin, one with both a

margin and padding, and one with just padding. It also fills the area behind the buttons with color so that the effects of the margin can be seen.

Example :- Margin versus Padding <Grid ShowGridLines="True" Background="Cyan"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Button Grid.Column="0" Margin="20" Padding="0">Click me!</Button> <Button Grid.Column="1" Margin="10" Padding="10">Click me!</Button> <Button Grid.Column="2" Margin="0" Padding="20">Click me!</Button> </Grid>

Result:

Figure: Buttons with a margin and padding

Visibility
 The Visibility property determines whether an element is visible. It has an

impact on layout, because if you set it to Collapsed, the preferred size of the element will become zero.
 This is different from Hidden this indicates that although the element is

not visible, the layout system should treat it in the same way as it would if it were Visible.

FlowDirection
 The FlowDirection property controls how text flows; the default is based

on the system locale.

 For example, in English-speaking locales, it will be left to right, but many

cultures use the alternative right-to-left style. Setting the FlowDirection property to RightToLeft affects the flow direction of all text, and of any WrapPanel elements contained within that element.

Example :- FlowDirection <StackPanel> <WrapPanel Orientation="Horizontal"> <Button>One</Button> <Button>Two</Button> <Button>Three</Button> </WrapPanel> <WrapPanel Orientation="Horizontal" FlowDirection="RightToLeft"> <Button>One</Button> <Button>Two</Button> <Button>Three</Button> </WrapPanel> </StackPanel> Result:

Fig. Flow Direction

Panel.ZIndex
Panel defines an attached property, ZIndex, that determines which element

appears on top when two of them overlap.

By default, the Z order of elements is determined by the order in which

they are defined.

Elements with a higher Panel.ZIndex appear on top of those with a lower

Panel.ZIndex. The default value is 0, so elements with a positive Panel.ZIndex will appear on top of those that do not specify one.
Example does not use Panel.ZIndex, so the element overlapping order is

determined by the order in which the elements appear.

Example 1. Without Panel.ZIndex

<Grid> <Button Width="75" Height="23" Margin="0,0" HorizontalAlignment="Left" VerticalAlignment="Top"> One </Button> <Button Width="75" Height="23" Margin="15,15" HorizontalAlignment="Left" VerticalAlignment="Top"> Two </Button> <Button Width="75" Height="23" Margin="30,30" HorizontalAlignment="Left" VerticalAlignment="Top"> Three </Button> </Grid> Result: Example 1 is shown on the left of Figure 1. The version on the right comes from Example 2.
Fig.1 Panel.ZIndex

Example2:- With Panel.ZIndex <Grid> <Button Width="75" Height="23" Margin="0,0" Panel.ZIndex="3" HorizontalAlignment="Left" VerticalAlignment="Top"> One </Button> <Button Width="75" Height="23" Margin="15,15" Panel.ZIndex="2" HorizontalAlignment="Left" VerticalAlignment="Top"> Two </Button> <Button Width="75" Height="23" Margin="30,30" Panel.ZIndex="1" HorizontalAlignment="Left" VerticalAlignment="Top"> Three </Button> </Grid>

Thank You.