Sizing, Positioning, and Transforming Elements

1
Sizing, Positioning, and Transforming Elements

• - Santosh Singh

2
Highlights

• Controlling Size
• Controlling Position
• Applying Transforms
• This sizing and positioning of controls (and
  other elements) is called layout.
• Layout in WPF boils down to interactions between
  parent elements and their child elements.

3
Highlights

• These parent elements that support the
  arrangement of multiple children are known as
  panels, and derive from the abstract
  System.Windows.Controls.Panel class

4
Positioning and Sizing
Size-related properties are shown in blue,
and position-related properties are shown in red.
In addition, elements can have transforms applied
to them (shown in green) that can affect both
size and position.
5
Controlling Size

• Every time layout occurs (such as when a window
  is resized), child elements tell their parent
  panel their desired size.
• All FrameworkElements have simple Height and
  Width properties (of type double), but they also
  have MinHeight, MaxHeight, MinWidth, and MaxWidth
  properties that can be used to specify a range of
  acceptable values.
• The default value of MinHeight and MinWidth is 0,
  and the default value of MaxHeight and MaxWidth
  is Double.PositiveInfinity

6
Controlling Size

• FrameworkElement's Height and Width have a
  default value of Double.NaN (Not a Number)
• FrameworkElement also contains a few more
  size-related properties
• DesiredSize (inherited from UIElement)
• RenderSize (inherited from UIElement)
• ActualHeight and ActualWidth

7
Margin and Padding

• Margin and Padding are two very similar
  properties that also are related to an element's
  size
• Their only difference is that Margin controls how
  much extra space gets placed around the outside
  edges of the element, whereas Padding controls
  how much extra space gets placed around the
  inside edges of the element.

8
Margin and Padding

• lt!-- PADDING --gt
• lt!-- 1 value The same padding on all four sides
  --gt
• ltLabel Padding"0" Background"Orange"gt0lt/Labelgt
• ltLabel Padding"10" Background"Orange"gt10lt/Label
  gt
• lt!-- 2 values Left Right get the 1st value,
  Top Bottom get the 2nd value --gt
• ltLabel Padding"20,5" Background"Orange"gt20,5lt/L
  abelgt
• lt!-- 4 values Left,Top,Right,Bottom --gt
• ltLabel Padding"0,10,20,30 Background"Orange"gt
  0,10,20,30lt/Labelgt
• lt!-- MARGIN --gt
• ltBorder BorderBrush"Black" BorderThickness"1"gt

9
Margin and Padding

• lt!-- No margin --gt
• ltLabel Background"Aqua"gt0lt/Labelgt
• lt/Bordergt
• ltBorder BorderBrush"Black" BorderThickness"1"gt
• lt!-- 1 value The same margin on all four sides
  --gt
• ltLabel Margin"10" Background"Aqua"gt10lt/Labelgt
• lt/Bordergt
• ltBorder BorderBrush"Black" BorderThickness"1"gt
• lt!-- 2 values Left Right get the 1st value,
• Top Bottom get the 2nd value --gt
• ltLabel Margin"20,5" Background"Aqua"gt20,5lt/Label
  gt
• lt/Bordergt
• ltBorder BorderBrush"Black" BorderThickness"1"gt
• lt!-- 4 values Left,Top,Right,Bottom --gt
• ltLabel Margin"0,10,20,30" Background"Aqua"gt0,10,
  20,30lt/Labelgt
• lt/Bordergt

10
Margin and Padding
11
Visibility

• An element's Visibility property actually isn't
  Boolean, but rather a three-state
  System.Windows.Visibility enumeration.
• Visible The element gets rendered and
  participates in layout.
• Collapsed The element is invisible and does
  not participate in layout.
• Hidden The element is invisible yet still
  participates in layout.
• A Collapsed element effectively has a size of
  zero, whereas a Hidden element retains its
  original size.

12
Visibility

• ltStackPanel Height"100" Background"Aqua"gt
• ltButton Visibility"Collapsed"gtCollapsed
  Buttonlt/Buttongt
• ltButtongtBelow a Collapsed Buttonlt/Buttongt
• lt/StackPanelgt
• ltStackPanel Height"100" Background"Aqua"gt
• ltButton Visibility"Hidden"gtHidden
  Buttonlt/Buttongt
• ltButtongtBelow a Hidden Buttonlt/Buttongt
• lt/StackPanelgt

13
Visibility
14
Controlling Position

• This section doesn't discuss positioning elements
  with (X,Y) coordinates.
• Parent panels define their own unique mechanisms
  for enabling children to position themselves (via
  attached
• properties or simply the order in which children
  are added to the parent)
• These mechanisms are related to alignment and a
  concept called flow direction.

15
Alignment

• The 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
• ltStackPanelgt
• ltButton HorizontalAlignment"Left"
  Background"Red"gtLeftlt/Buttongt
• ltButton HorizontalAlignment"Center"
  Background"Orange"gtCenterlt/Buttongt
• ltButton HorizontalAlignment"Right"
  Background"Yellow"gtRightlt/Buttongt
• ltButton HorizontalAlignment"Stretch"
  Background"Lime"gtStretchlt/Buttongt
• lt/StackPanelgt

16
Alignment
Content Alignment
The Control class also has HorizontalContentAlignm
ent and VerticalContentAlignment properties.
The default value for HorizontalContentAlignment
is Left and the default value for
VerticalContentAlignment is Top.
17
Content Alignment

• ltStackPanelgt
• ltButton HorizontalContentAlignment"Left"
  Background"Red"gtLeftlt/Buttongt
• ltButton HorizontalContentAlignment"Center"
  Background"Orange"gtCenterlt/Buttongt
• ltButton HorizontalContentAlignment"Right"
  Background"Yellow"gtRightlt/Buttongt
• ltButton HorizontalContentAlignment"Stretch"
  Background"Lime"gtStretchlt/Buttongt
• lt/StackPanelgt

18
Flow Direction

• FlowDirection is a property on FrameworkElement
  (and several other classes) that can reverse the
  way an element's inner content flows
• The property is of type System.Windows.FlowDirect
  ion, with two values LeftToRight
  (FrameworkElement's default) and RightToLeft.
• The idea of FlowDirection is that it should be
  set to RightToLeft when the current culture
  corresponds to a language that is read from
  right-to-left. This reverses the meaning of left
  and right for settings such as content alignment

19
Flow Direction

• ltStackPanelgt
• ltButton FlowDirection"LeftToRight"
• HorizontalContentAlignment"Left"
  VerticalContentAlignment"Top"
• Height"40" Background"Red"gtLeftToRightlt/Buttongt
• ltButton FlowDirection"RightToLeft"
• HorizontalContentAlignment"Left"
  VerticalContentAlignment"Top"
• Height"40" Background"Orange"gtRightToLeftlt/Butto
  ngt
• lt/StackPanelgt

20
Applying Transforms

• WPF contains a handful of built-in 2D transform
  classes (deriving from System.Windows.Media.Transf
  orm) that enable you to change the size and
  position of elements
• independently from the previously discussed
  properties.
• Some Allow rotating and Skewing
• All FrameworkElements have two properties of
  type Transform
• LayoutTransform, which is applied before the
  element is laid out
• RenderTransform (inherited from UIElement),
  which is applied after the layout process has
  finished

21
Transforms

• the difference between applying a transform
  called Rotate-Transform as a LayoutTransform
  versus a RenderTransform

22
Transforms

• RenderTransformOrigin can be set to a
  System.Windows.Point, with (0,0) being the
  default value

ltButton RenderTransformOrigin"0.5,0.5"
Background"Orange"gt ltButton.RenderTransformgt ltRot
ateTransform Angle"45"/gt lt/Button.RenderTransform
gt Rotated 45 lt/Buttongt
23
Transforms

• The five built-in 2D transforms, all in the
  System.Windows.Media namespace
• RotateTransform
• ScaleTransform
• SkewTransform
• TranslateTransform
• MatrixTransform

24
Rotate Transform

• RotateTransform, demonstrated in the preceding
  section, 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)

25
Rotate Transform

• ltButton Background"Orange"gt
• ltTextBlock RenderTransformOrigin"0.5,0.5"gt
• ltTextBlock.RenderTransformgt
• ltRotateTransform Angle"45"/gt
• lt/TextBlock.RenderTransformgt
• 45
• lt/TextBlockgt
• lt/Buttongt

26
Scale Transform

• ScaleTransform enlarges or shrinks an element
  horizontally, vertically, or in both directions.
• This transform has four straightforward double
  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)

27
Scale Transform

• ltStackPanel Width"100"gt
• ltButton Background"Red"gtNo Scalinglt/Buttongt
• ltButton Background"Orange"gt
• ltButton.RenderTransformgt
• ltScaleTransform ScaleX"2"/gt
• lt/Button.RenderTransformgt
• Xlt/Buttongt
• ltButton Background"Yellow"gt
• ltButton.RenderTransformgt
• ltScaleTransform ScaleX"2" ScaleY"2"/gt
• lt/Button.RenderTransformgt
• X Ylt/Buttongt
• ltButton Background"Lime"gt
• ltButton.RenderTransformgt
• ltScaleTransform ScaleY"2"/gt
• lt/Button.RenderTransformgt
• Ylt/Buttongt
• lt/StackPanelgt

28
Scale Transform
29
Skew Transform

• 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)

30
Skew Transform
31
Translate Transform

• 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)
• This section is explained in brief in the next
  chapter.

32
Matrix Transform

• MatrixTransform 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.
• This basically means that all of the previous
  transforms (or any combination of them) can also
  be expressed using MatrixTransform

33
Matrix Transform

• The 3x3 matrix has the following values

The final column's values are fixed, but the
other six values can be set as properties of the
Matrix type (with the same names as shown) or via
a constructor that accepts the six values in
row-major order.
34
Combining Transforms

• TransformGroup is just another Transform-derived
  class (so it can be used wherever the previous
  classes are used) whose purpose is to combine
  child Transform objects.
• ltButtongt
• ltButton.RenderTransformgt
• ltTransformGroupgt
• ltRotateTransform Angle"45"/gt
• ltScaleTransform ScaleX"5" ScaleY"1"/gt
• ltSkewTransform AngleX"30"/gt
• lt/TransformGroupgt
• lt/Button.RenderTransformgt
• OK
• lt/Buttongt

35
References

• Windows Presentation Foundation Unleashed
• Author Adam Nathan
• Publication - SAMS