Sizing, Positioning, and Transforming Elements - Santosh Singh

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.

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

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

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

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.

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">

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>

Margin and Padding

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.

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>

Visibility

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.

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>

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.

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>

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

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>

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

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

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>

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

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)

Rotate Transform <Button Background="Orange"> <TextBlock RenderTransformOrigin="0.5,0.5"> <TextBlock.RenderTransform> <RotateTransform Angle="45"/> </TextBlock.RenderTransform> 45° </TextBlock> </Button>

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)

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>

Scale Transform

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)

Skew Transform

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.

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

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.

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>

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