1 / 35

Sizing, Positioning, and Transforming Elements

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.

gail
Download Presentation

Sizing, Positioning, and Transforming Elements

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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> </Border> <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> <Border BorderBrush="Black" BorderThickness="1"> <!-- 4 values: Left,Top,Right,Bottom: --> <Label Margin="0,10,20,30" Background="Aqua">0,10,20,30</Label> </Border>

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

  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" HorizontalContentAlignment="Left" VerticalContentAlignment="Top" 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"> <Button.RenderTransform> <ScaleTransform ScaleX="2" ScaleY="2"/> </Button.RenderTransform> X + Y</Button> <Button Background="Lime"> <Button.RenderTransform> <ScaleTransform ScaleY="2"/> </Button.RenderTransform> 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 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

More Related