[WPF][6] Layout

[6] Layout

1. [6] Layout
1. Height and Width
2. Margin and Padding
3. Visibility
4. Aligment
5. Transforms

Intro

This sizing and positioning of controls (and other elements) is called layout

All elemets involved in layout derive from System.Windows.UIElement

WPF elements tend to size to their content, meaning that they try to be large enough to fit their content and no larger.

Layout occurs in two phases: measure and arrange:

• first controls are ask for space that they require
• This is calculated base on children space required
• arrange is about how much space we have
• In this phase is decided what to put and where to put

In order to create a custom panel we have to override the MeasureOverride and ArrangeOverride methods

We pass in an infinite size when calling Measure on each child in order to use its preferred size.

child.Measure( new Size( double.PositiveInfinity,

double.PositiveInfinity )

Height and Width

• They are common to all FrameworkElements
• See, also, MinHeight, MaxHeight, MinWidth, and MaxWidth properties
• You should avoid setting explicit sizes unless absolutely necessary: two reasons font settings, language
• FrameworkElement’s Height and Width have a default value of Double.NaN (Not a Number), meaning that the element will only be as large as its content needs it to be
• DesiredSize (inherited from UIElement) - calculated base on Width, Height, MinXXX, and MaxXXX properties
• RenderSize (inherited from UIElement) - final size of an element after layout is complete
• ActualHeight and ActualWidth
• LayoutUpdated event (inherited from UIElement)
• UpdateLayout method to force any pending layout updates to finish synchronously

Margin and Padding

• Margin controls how much extra space gets placed around the outside edges of the element
• Padding controls how much extra space gets placed around the inside edges of the element
• They are of type are of type System.Windows.Thickness
• The unit of measurement is device-independent pixels. It is a "logical pixel"
  
• it represents 1/96th of an inch
• it gets resolution independence

Visibility

• it is a three-state System.Windows.Visibility enumeration
• possible values: Visible, Collapsed, Hidden

Aligment

HorizontalAlignment and VerticalAlignment properties enable an element to control what it does with any extra space given to it by its parent panel.

• HorizontalAlignment: Left, Center, Right, and Stretch
• VerticalAlignment: Top, Center, Bottom, and Stretch
• When an element uses Stretch alignment (horizontally or vertically), an explicit Height or Width setting still takes precedence

HorizontalContentAlignment and VerticalContentAlignment properties determine how a control’s content fills the space within the control.

FlowDirection is a property on FrameworkElement (and several other classes) that can reverse the way an element’s inner content flows. I has two values: LeftToRight and RightToLeft

Transforms

All FrameworkElements have two properties of type Transform that can be used to apply such transforms:

• LayoutTransform, which is applied before the element is laid out
• RenderTransform (inherited from UIElement), which is applied after the layout process has finished (immediately before the element is rendered)

RenderTransformOrigin is a property that represents the starting point of the transform. with the help of System.Windows.PointConverter, the value for RenderTransformOrigin can

be specified in XAML with two comma-delimited numbers

There are five built-in 2D transforms:

• RotateTransform
• It rotates an element according to the values of three double properties:
• Angle—Angle of rotation, specified in degrees (default value = 0)
• CenterX—Horizontal center of rotation (default value = 0)
• CenterY—Vertical center of rotation (default value = 0)
• The default (CenterX,CenterY) point of (0,0) represents the top-left corner
• For the common case of transforming an element around its middle, the relative (0.5,0.5) RenderTransformOrigin is easy to specify in XAML.
  
• ScaleTransform
• it enlarges or shrinks an element horizontally, vertically, or in both directions.
• Properties:
• ScaleX—Multiplier for the element’s width (default value = 1)
• ScaleY—Multiplier for the element’s height (default value = 1)
• CenterX—Origin for horizontal scaling (default value = 0)
• CenterY—Origin for vertical scaling (default value = 0)
• A ScaleX value of 0.5 shrinks an element’s rendered width in half, whereas a ScaleX value of 2 doubles the width
• FrameworkElement’s ActualHeight and ActualWidth properties are not affected by ScaleTransform properties.
• SkewTransform
• SkewTransform slants an element according to the values of four double properties
• AngleX—Amount of horizontal skew (default value = 0)
• AngleY—Amount of vertical skew (default value = 0)
• CenterX—Origin for horizontal skew (default value = 0)
• CenterY—Origin for vertical skew (default value = 0)
• TranslateTransform
• TranslateTransform simply moves an element according to two double properties:
• X—Amount to move horizontally(default value = 0)
• Y—Amount to move vertically (default value = 0)
• MatrixTransform
• It is a low-level mechanism that can be used to create custom 2D transforms.
• MatrixTransform has a single Matrix property (of type System.Windows.Media.Matrix) representing a 3x3 affine transformation matrix

TransformGroup is just another Transform-derived class whose purpose is to combine child Transform objects.

Elements hosting content that isn’t native to WPF do not support transforms