; Sizing_ Positioning_ and Transforming Elements
Learning Center
Plans & pricing Sign in
Sign Out
Your Federal Quarterly Tax Payments are due April 15th Get Help Now >>

Sizing_ Positioning_ and Transforming Elements


  • pg 1
									Sizing, Positioning, and
Transforming Elements

   - Santosh Singh
o   Controlling Size
o   Controlling Position
o   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.
o   These parent elements that support
    the arrangement of multiple
    children are known as panels, and
    derive from the abstract
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.
Controlling Size
o   Every time layout occurs (such as when a window is
    resized), child elements tell their parent panel their desired
o   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.
o   The default value of MinHeight and MinWidth is 0, and the
    default value of MaxHeight and MaxWidth is
Controlling Size
o   FrameworkElement's Height and Width have a default
    value of Double.NaN (Not a Number)

o   FrameworkElement also contains a few more size-
    related properties:
o   · DesiredSize (inherited from UIElement)
o   · RenderSize (inherited from UIElement)
o   · ActualHeight and ActualWidth
Margin and Padding
o   Margin and Padding are two very similar
    properties that also are related to an
    element's size
o   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
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"
<!-- 4 values: Left,Top,Right,Bottom: -->
    <Label Padding="0,10,20,30“ Background="Orange">
<!-- MARGIN: -->

<Border BorderBrush="Black" BorderThickness="1">
Margin and Padding
<!-- No margin: -->
<Label Background="Aqua">0</Label>
<Border BorderBrush="Black" BorderThickness="1">
<!-- 1 value: The same margin on all four sides: -->
<Label Margin="10" Background="Aqua">10</Label>
<Border BorderBrush="Black" BorderThickness="1">
<!-- 2 values: Left & Right get the 1st value,
Top & Bottom get the 2nd value: -->
<Label Margin="20,5" Background="Aqua">20,5</Label>
<Border BorderBrush="Black" BorderThickness="1">
<!-- 4 values: Left,Top,Right,Bottom: -->
<Label Margin="0,10,20,30" Background="Aqua">0,10,20,30</Label>
Margin and Padding
o   An element's Visibility property actually isn't Boolean,
    but rather a three-state System.Windows.Visibility
· Visible— The element gets rendered and participates in
· Collapsed— The element is invisible and does not
    participate in layout.
· Hidden— The element is invisible yet still participates in
A Collapsed element effectively has a size of zero, whereas
    a Hidden element retains its original size.
<StackPanel Height="100" Background="Aqua">
<Button Visibility="Collapsed">Collapsed Button</Button>
<Button>Below a Collapsed Button</Button>

<StackPanel Height="100" Background="Aqua">
<Button Visibility="Hidden">Hidden Button</Button>
<Button>Below a Hidden Button</Button>
Controlling Position
o   This section doesn't discuss positioning elements with
    (X,Y) coordinates.

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

o   These mechanisms are related to alignment and a
    concept called flow direction.
o   The HorizontalAlignment and VerticalAlignment properties enable
    an element to control what it does with any extra space given to
    it by its parent panel.

o   HorizontalAlignment: Left, Center, Right, and Stretch
o   VerticalAlignment: Top, Center, Bottom, and Stretch

<Button HorizontalAlignment="Left"
<Button HorizontalAlignment="Center"
<Button HorizontalAlignment="Right"
<Button HorizontalAlignment="Stretch"

 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.
Content Alignment
<Button HorizontalContentAlignment="Left"
<Button HorizontalContentAlignment="Center"
<Button HorizontalContentAlignment="Right"
<Button HorizontalContentAlignment="Stretch"
Flow Direction
o   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.

o   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
Flow Direction
<Button FlowDirection="LeftToRight"
Height="40" Background="Red">LeftToRight</Button>
<Button FlowDirection="RightToLeft"
Height="40" Background="Orange">RightToLeft</Button>
Applying Transforms
o   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

    LayoutTransform, which is applied before the element is
    laid out

    RenderTransform (inherited from UIElement), which is
    applied after the layout process has finished
o   the difference between applying a transform called
    Rotate-Transform as a LayoutTransform versus a
RenderTransformOrigin can be set to a System.Windows.Point,
   with (0,0) being the default value

    <Button RenderTransformOrigin="0.5,0.5" Background="Orange">
    <RotateTransform Angle="45"/>
    Rotated 45°
o    The five built-in 2D transforms, all in the
     System.Windows.Media namespace:

·   RotateTransform
·   ScaleTransform
·   SkewTransform
·   TranslateTransform
·   MatrixTransform
Rotate Transform
o   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 =
· CenterY— Vertical center of rotation (default value = 0)
Rotate Transform
<Button Background="Orange">
<TextBlock RenderTransformOrigin="0.5,0.5">
<RotateTransform Angle="45"/>
Scale Transform
o   ScaleTransform enlarges or shrinks an element
    horizontally, vertically, or in both directions.

o   This transform has four straightforward double

· 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 =
· CenterY— Origin for vertical scaling (default value = 0)
Scale Transform
<StackPanel Width="100">
<Button Background="Red">No Scaling</Button>
<Button Background="Orange">
<ScaleTransform ScaleX="2"/>
<Button Background="Yellow">
<ScaleTransform ScaleX="2" ScaleY="2"/>
X + Y</Button>
<Button Background="Lime">
<ScaleTransform ScaleY="2"/>
Scale Transform
Skew Transform
o   SkewTransform slants an element according to the
    values of four double properties:

· AngleX— Amount of horizontal skew (default value =
· AngleY— Amount of vertical skew (default value = 0)
· CenterX— Origin for horizontal skew (default value =
· CenterY— Origin for vertical skew (default value = 0)
Skew Transform
Translate Transform
o    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)

o    This section is explained in brief in the next chapter.
Matrix Transform
o   MatrixTransform is a low-level mechanism that can be
    used to create custom 2D transforms.

o   MatrixTransform has a single Matrix property (of type
    System.Windows.Media.Matrix) representing a 3x3
    affine transformation matrix.

o   This basically means that all of the previous
    transforms (or any combination of them) can also be
    expressed using MatrixTransform
Matrix Transform
o   The 3x3 matrix has the following

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.
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.
<RotateTransform Angle="45"/>
<ScaleTransform ScaleX="5" ScaleY="1"/>
<SkewTransform AngleX="30"/>
 Windows Presentation Foundation

 Author – Adam Nathan
 Publication - SAMS

To top