(XAML Layout in Depth) Layout Basics 1

Copyright

이 모든 내용은 Pluralsight에 Thomas Claudius Huber가 올린 'XAML Layout in Depth'라는 강의의 첫번째 챕터를 듣고 정리한 것입니다(https://app.pluralsight.com/library/courses/xaml-layout-in-depth/table-of-contents).

Content

1. Layout Basics 1

2. Layout Basics 2

3. Layout properties of Element

4. Panels

5. Transformations and Projections

6. Advanced Topics

Outline

Layout Base Classes

Layout Process

Dependency and Attached Propertiees

Layout Base Classes

Class hierarchy in XAML

See Basic Element article

http://empisterian.tistory.com/9?category=980707

and Panels and Layout System article

http://empisterian.tistory.com/11?category=980707

UIElement has Measure and Arrage method which are used in the layout process. In addition, the UIElement class has the render transform property that is used to do transformations.

FrameworkElement과 Panel의 내용은 위 두 article에 수록됨

The Layout Process

The Layout Process is executed when an element is rendered its very first time and can be executed again during runtime

The Layout Process is a two step process

1. Measure - Elements calculate their desired size (each element calculates how big it wants to be)

- Calling Measure method on each direct child (after this Measure call, the DesiredSize property of the child is set)

- Access each child's DesiredSize (The parent element can access this DesiredSize and calculate its own desired size)

이 모든 과정은 element tree를 따라 내려간다, 즉 parent element가 자신의 각 direct child들에게 Measure method를 호출하고, 각각의 child들도 자신의 direct child들에게 Measure method를 호출한다. 이 과정이 모두 끝나면 각자 원하는 크기가 DesiredSize property에 저장된 상태가 된다.

2. Arrange - Elements arrange their children

- Calling Arrange on each direct child

(The Arrange method takes a position and a final size, that means the child knows the position where it has to render itself and it also knows the size in which it has to render. So all the information is now clear for the rendering)

3. Rendering - element are rendered on the screen.

Layout Process Participation

Override two methods in a FrameworkElement-subclass

1. MeasureOverride method : Participate in the first step of the layout process, the Measure step.

- Inside of the MeasureOverride method, Call Measure method on each direct child

The MeasureOverride method taskes an availableSize as a parameter which is passed in from the parent in the layout process

- Access each child's DesiredSize

- Return your own desired size

2. ArrangeOverride method : Participate in the second step of the layout process, the Arrange step.

- Inside of the ArrangeOverride method, Call Arrange method on each direct child (pass a location and a final size)

- Return your final size for your element

eg  //Create new Class to make custom Panel

public class DiagonalPanel : Windows.UI.Xaml.Controls.Panel

      {

   //Layout Process의 첫 단계인 Measure단계에 관여하기 위해 MeasureOverride를 정의한다.

   //availableSize is passed in from the parent in the layout process. 이경우엔 DiagonalPanel의 부모로부터 받는다.

        protected override Size MeasureOverride(Size availableSize)

        {

            var mySize = new Size();

//DiagonalPanel의 DesiredSize를 반환하기 위해 element들을 돌면서 계산.

//InternalChildren property in WPF, Children property in UWP from Panel, It contains UIElementCollection

            foreach(UIElement child in this.Children)    

            {

//Call Measure method on each child

                 //여기선 child가 DiagonalPanel보다 작을것이라 기대하며 availableSize를 그대로 넘겼다.

child.Measure(availableSize);

//Measure를 호출하면 child의 DesiredSize property가 채워지고 이걸로 DiagonalPanel의 크기를 계산한다.

                mySize.Width += child.DesiredSize.Width;

                mySize.Height += child.DesiredSize.Height;

            }

            return mySize;

        }

   

  //Layout Process의 두번째 단계인 Arrange단계에 관여하기 위해 ArrangeOverride를 정의한다.

  //부모로부터 finalSize를 통보받고 그 안에서 arrange itself 해야한다. 그리고 layout에 arrange하고 난 실제 크기를 반환.

        protected override Size ArrangeOverride(Size finalSize)

        {

            var location = new Point();

//Children들을 Arrange시킨다.

            foreach(UIElement child in this.Children)

            {

//각 child에게 Arrange method를 호출시켜 Arrange될 장소와 크기를 지정해준다.

//이 경우 대각선으로 child들이 연결되게 장소를 지정하고, 크기는 child의 DesiredSize를 그대로 받아주었다.

                child.Arrange(new Rect(location, child.DesiredSize));

//여기선 다음 child가 지정될 위치를 현재 child의 오른쪽 하단 포인트로 잡아주었다.

                location.X += child.DesiredSize.Width;

                location.Y += child.DesiredSize.Height;

            }

            return finalSize;

        }

//이것으로 child들을 대각선으로 배치하는 새로운 custom panel이 만들어졌고, .xaml에서 컨트롤들을 배치하며 사용가능하다.

Layout Process Internal

WPF                                                                                         WinRT

위에서 우리가 사용한 Measure/Arrange method와 MeasureOverride/ArrangeOverride method 사이에는 Internal logic이 있으며 그것이 몇가지 property들을 관리한다. UIElement의 경우에는 Clip과 Visibility property가 그렇고, FrameworkElement의 경우에는 Width, Height, Margin property가 그러하다. 

eg. Visibility property를 Collapsed 로 설정하면, 해당 UIElement에서 Measure를 호출한 뒤의 시점에서 DesiredSize property의 Width, Height가 0으로 설정된다. 이렇게 Framework가 몇가지 속성을 관리하므로 개발자가 직접 Layout Process에 관여할 때에도 Child element의 Visibility property를 신경쓸 필요가 없다. Width, Height, Margin의 경우도 그렇다. Width를 설정한 경우, that element will have that DesiredSize Width after a Measure call. So in your layout process participation, you never have to care about if the Width or Height on an element is set. 마찬가지로 Margin의 경우도, Measure method가 호출된 뒤 얻어지는 DesiredSize property는 이미 그 Margin을 포함하고 있는 상태이다. 또한 Panel에 Margin을 설정하는 경우에도, MeasureOverride method의 반환값인 Size(Panel의 DesiredSize)에도 Framework가 개입해 Margin을 자동으로 포함시켜준다.

출처

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