(XAML)Panels and the Layout System

Copyright

이 모든 내용은 Pluralsight에 Kevin Dockx가 올린 'XAML Jumpstart : Getting Started With XAML' 이라는 강의의 4번째 챕터를 듣고 정리한 것입니다(https://app.pluralsight.com/library/courses/xaml-jumpstart/table-of-contents). 강의 원작자분께 게시허가도 받았습니다.

Content

1. Basic Elements, Shapes, Brushes, and Masks

2. Control Basics and Interacting with them

3. Panels and the Layout System

4. Data Binding Essentials

5. Working with ItemsControls

6. Using Resources and Styling Controls

7. Debugging and Analyzing XAML

8. Choosing the Right Tool for the Job

Panels (<-- FrameworkElement)

Panels allow us to arrange a group of child elements in simple to very complex layouts.

Responsible for laying out its children

The type of Panel defines how they are arranged

Has a Children property of type UIElementCollection which contains a collection of UIElements

Commonly used Panels : Canvas, StackPanel, Grid, RelativePanel

Canvas  

Used to explicitly position children elements by coordinates relative to the Canvas area.

But the absolute positioning means it's not so good for scaling.

Canvas doesn't have concept of docking controls next to each other => 겹쳐진다.

Therefore the ZIndex exist.

StackPanel

Used to arrange children into a single line, horizontally or vertically

Grid

Defines a flexible grid area consisting of rows and columns

RowDefinition, ColumnDefinition can has absolute size, star size, and Auto

ColumnSpan, RowSpan makes a control span across row and column boundaries 

RelativePanel (생략)

A Step Back to the FrameworkElement (<-- UIElement <-- DependencyObject)

FrameworkElement...

potentially participates in layout and should have a display area in the app UI

Adds Height, Width, Alignment and Margin properties

Supports DataContext

(http://empisterian.tistory.com/9)

Width and Height

HorizontalAlignment / VerticalAlignment

Defines how the element is horizontally / vertically aligned within a parent element's allocated layout space

Valid values are Left, Right, Center, Stretch

Margin

Describes the distance between an element and its child or peers

OUTSIDE of the element, and Margin is of type Thickness (left, top, bottom, right)

Padding

Padding is a bit of a special case. This property is not defined on FrameworkElement, it's only exposed on a few classes, primarily as a convenience where it makes sense. Block, Border, Control, and TextBlock etc

Unlike Margin, this actually enlarges the size of an element by the provided Thickness

INSIDE of the element, and Padding is of type Thickness (left, top, bottom, right)

(setting padding makes the element larger this time the arrows show the applied padding values)

An Important Concept : The Visual Tree

The visual tree는 object tree의 특수한 형태다(An object tree is a conceptualization of how objects that are created and exist at runtime are related to each other). The visual tree is a filter on the object tree, rendering implication을 포함한 object만이 visual tree에 포함된다. Every element type that has a rendering implication is part of the visual tree, and an element does not show up on screen until it's in a rendered visual tree. 

The visual tree can be seen as a scene  graph, containing all the rendering information needed to compose the output to the display device. 

Visual tree determines the rendering order. The order of traversal starts with the root visual, which is the top-most node in the visual tree.

ex <StackPanel>

 <Button>

<TextBlock Text="Hi there!"/>    ==visual tree==>   StackPanel => Button => ContentPresenter => TextBlock

 </Button>

</StackPanel>

ContentPresenter is a parent of TextBlock (not a Button), ContenPresenter takes part in the visual layout cycle, so part of the visual tree.

(ControlTemplate (inside of Button.Template) for a Button containing the ContentPresenter)

The Layout System 

Ensures elements are sized, positioned and drawn, recursively.

The visual tree determines the rendering order, and layout system is the process of measuring and arranging the members of a layout panel's children collection(Panel에 children이 많을수록 많은 계산이 필요하다. 게다가 Panel has a specific behavior. Canvas는 상대적으로 쉽지만(but), take for example a grid, which sets into place in the grid according to Grid.Row Grid.RowSpan, Grid.Column, and Grid.ColumnSpan attached properties. The size of one of the children is one of the things that can determine the size of the parent and the position of the next child.)

1. Each child UIElement is measured using core properties(like clip, visibility). (First part of Measure Pass a constraint size)

2. Sizing properties are defined on FrameworkElement like Width, Height, and Margin are evaluated. (Second part of Measure Pass)

Typically this property is described as sizing characteristics of the underlying UIElement and they can thus change the space necessary to display the element. The ultimate goal of this pass is for the child to determine its desired size.)

3. Panel-specific logic is applied (such as stacking orientation for StackPanel)

4. Content arranged after all children are measured. (Arrange Pass)

This can be different from desired size as additional margins may affect the finally-rendered size of the element. The arrange size is passed back to the parent panel, which them generates the final size of the child.

5. Children drawn to screen

6. Process possibly invoked again (go to 1)

More detail in XAML Layout in Depth

Summary (생략)

출처

이 모든 내용은 Pluralsight에 Kevin Dockx가 올린 'XAML Jumpstart : Getting Started With XAML' 이라는 강의의 4번째 챕터를 듣고 정리한 것입니다(https://app.pluralsight.com/library/courses/xaml-jumpstart/table-of-contents). 제가 정리한 것보다 더 많은 내용과 Demo를 포함하고 있으며 최종 Summary는 생략하겠습니다. Microsoft 지원을 통해 한달간 무료로 Pluralsight의 강의를 들으실 수도 있습니다.