common layout properties

8/4/2019 Common Layout Properties

1/17

Common Layout Properties

Submitted to:

Mr. Jitendra Nasriwala

Prepared By:Rachana R. Thakkar

11MSCCA24


2/17

Introduction

All user interface elements have a standard set of layout properties,mostly inherited from the Framework Element base class. These propertiesare shown in Table.

Property Usage

Width Specifies a fixed width

Height Specifies a fixed height

MinWidth The minimum permissible width

MaxWidth The maximum permissible width

MinHeight The minimum permissible height

MaxHeight The maximum permissible height

HorizontalAlignment Horizontal position if element is smaller than available spaceVerticalAlignment Vertical position if element is smaller than available space

Margin Space around outside of element

Padding Space between element border and content

Visibility Allows the element to be made invisible to the layout system where necessary

FlowDirection Text direction

Panel.ZIndex Controls which elements are on top or underneath


3/17

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.


4/17

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.


5/17

Horizontal Alignment and Vertical Alignment

These properties control how an element is placed inside a parent whenmore 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.


6/17

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


7/17

Example :- Controlling an element s position with Margin< Border BorderBrush="Black BorderThickness="1">

< Rectangle M argin="20, 10, 0, 0" Fill="Green"Width="80" Height="30"HorizontalAlignment="Left" VerticalAlignment="Top" />

< / G rid>

< /Border>

Result:

Fig. Margin


8/17

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.


9/17

Example :- Margin versus Padding

< ColumnDefinition Width="Auto" />< ColumnDefinition Width="Auto" />< ColumnDefinition Width="Auto" />

< / G rid.ColumnDefinitions>

< RowDefinition Height="Auto" />

< / G rid.RowDefinitions>

< Button G rid.Column="0" M argin="20" Padding="0">Click me!< Button G rid.Column="1" M argin="10" Padding="10">Click me!< Button G rid.Column="2" M argin="0" Padding="20">Click me!

< / G rid>


10/17

Result:

Figure: Buttons with a margin and padding


11/17

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.


12/17

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.


13/17

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


14/17

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.


15/17

Example 1. Without Panel.ZIndex

< 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>< / G rid>

Example 1 is shown on the left of Figure 1.The version on the right comes from Example 2.

Fig.1 P anel.ZIndex

Result:


16/17

Example2:- With Panel.ZIndex

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>

< / G rid>


17/17

Thank You.

common layout properties

Documents