Download - 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
-
8/4/2019 Common Layout Properties
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
-
8/4/2019 Common Layout Properties
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.
-
8/4/2019 Common Layout Properties
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.
-
8/4/2019 Common Layout Properties
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.
-
8/4/2019 Common Layout Properties
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.
-
8/4/2019 Common Layout Properties
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/4/2019 Common Layout Properties
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.
-
8/4/2019 Common Layout Properties
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>
-
8/4/2019 Common Layout Properties
10/17
Result:
Figure: Buttons with a margin and padding
-
8/4/2019 Common Layout Properties
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.
-
8/4/2019 Common Layout Properties
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.
-
8/4/2019 Common Layout Properties
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
-
8/4/2019 Common Layout Properties
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.
-
8/4/2019 Common Layout Properties
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:
-
8/4/2019 Common Layout Properties
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>
-
8/4/2019 Common Layout Properties
17/17
Thank You.