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 <!-- PADDING: -->
<!-- 1 value: The same padding on all four sides: -->
<Label Padding="0" Background="Orange">0</Label>
<Label Padding="10" Background="Orange">10</Label>
<!-- 2 values: Left & Right get the 1st value, Top & Bottom get the 2nd value: -->
<Label Padding="20,5" Background="Orange">20,5</Label>
<!-- 4 values: Left,Top,Right,Bottom: -->
<Label Padding="0,10,20,30“ Background="Orange"> 0,10,20,30</Label>
<!-- MARGIN: -->
<Border BorderBrush="Black" BorderThickness="1">

9. Margin and Padding <!-- No margin: -->
<Label Background="Aqua">0</Label>
</Border>
<Border BorderBrush="Black" BorderThickness="1">
<!-- 1 value: The same margin on all four sides: -->
<Label Margin="10" Background="Aqua">10</Label>
<!-- 2 values: Left & Right get the 1st value,
Top & Bottom get the 2nd value: -->
<Label Margin="20,5" Background="Aqua">20,5</Label>
<!-- 4 values: Left,Top,Right,Bottom: -->
<Label Margin="0,10,20,30" Background="Aqua">0,10,20,30</Label>

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
<StackPanel Height="100" Background="Aqua">
<Button Visibility="Collapsed">Collapsed Button</Button>
<Button>Below a Collapsed Button</Button>
</StackPanel>
<Button Visibility="Hidden">Hidden Button</Button>
<Button>Below a Hidden Button</Button>

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
<StackPanel>
<Button HorizontalAlignment="Left" Background="Red">Left</Button>
<Button HorizontalAlignment="Center" Background="Orange">Center</Button>
<Button HorizontalAlignment="Right" Background="Yellow">Right</Button>
<Button HorizontalAlignment="Stretch" Background="Lime">Stretch</Button>
</StackPanel>

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

17. Content Alignment <StackPanel>
<Button HorizontalContentAlignment="Left" Background="Red">Left</Button>
<Button HorizontalContentAlignment="Center" Background="Orange">Center</Button>
<Button HorizontalContentAlignment="Right" Background="Yellow">Right</Button>
<Button HorizontalContentAlignment="Stretch" Background="Lime">Stretch</Button>
</StackPanel>

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.FlowDirection, 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 <StackPanel>
<Button FlowDirection="LeftToRight"
HorizontalContentAlignment="Left" VerticalContentAlignment="Top"
Height="40" Background="Red">LeftToRight</Button>
<Button FlowDirection="RightToLeft"
Height="40" Background="Orange">RightToLeft</Button>
</StackPanel>

20. Applying Transforms
WPF contains a handful of built-in 2D transform classes (deriving from System.Windows.Media.Transform) 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
<Button RenderTransformOrigin="0.5,0.5" Background="Orange">
<Button.RenderTransform>
<RotateTransform Angle="45"/>
</Button.RenderTransform>
Rotated 45°
</Button>

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 <Button Background="Orange">
<TextBlock RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<RotateTransform Angle="45"/>
</TextBlock.RenderTransform>
45°
</TextBlock>
</Button>

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 <StackPanel Width="100">
<Button Background="Red">No Scaling</Button>
<Button Background="Orange">
<Button.RenderTransform>
<ScaleTransform ScaleX="2"/>
</Button.RenderTransform>
X</Button>
<Button Background="Yellow">
<ScaleTransform ScaleX="2" ScaleY="2"/>
X + Y</Button>
<Button Background="Lime">
<ScaleTransform ScaleY="2"/>
Y</Button>
</StackPanel>

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 <Button> <Button.RenderTransform>
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.
<Button>
<Button.RenderTransform>
<TransformGroup>
<RotateTransform Angle="45"/>
<ScaleTransform ScaleX="5" ScaleY="1"/>
<SkewTransform AngleX="30"/>
</TransformGroup>
</Button.RenderTransform> OK
</Button>

35. References Windows Presentation Foundation Unleashed
Author – Adam Nathan
Publication - SAMS