(XAML Layout in Depth) Layout-properties of Element

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

Alignments, Width Height, Margin

The Visibility

Using the Designer

Alignments

To align your element in its parent container, the FrameworkElement class has two properties.

HorizontalAlignment (Left, Right, Center, Stretch)

VerticalAlignment (Top, Bottom, Center, Stretch)

They only have an effect when the FinalSize is greater than the DesiredSize. (FinalSize > DesiredSize)

Left Right, Center, Top, Bottom, Center 를 하더라도 element는 DesiredSize Width/Height를 가지고, Stretch하면 element가 DesiredSize의 WIdth/Height 보다 커진다.

eg. //DiagonalPanel을 수정해 VerticalStackPanel을 만들었다. Width와 관련된 내용만 수정됨

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

     {

        protected override Size MeasureOverride(Size availableSize)

        {

            var mySize = new Size();

            foreach(UIElement child in this.Children)

            {

                child.Measure(availableSize);

                //가장 큰 너비를 가진 child의 너비를 mySize.Width로 넣어준다.

                mySize.Width = Math.Max(mySize.Width, child.DesiredSize.Width);

                mySize.Height += child.DesiredSize.Height;

            }

            return mySize;

        }

        protected override Size ArrangeOverride(Size finalSize)

        {

            var location = new Point();

            foreach(UIElement child in this.Children)

            {

                //child의 너비에 VerticalStackPanel의 너비를 넘겨준다.

                child.Arrange(new Rect(location, new Size(finalSize.Width, child.DesiredSize.Height)));

                location.Y += child.DesiredSize.Height;

            }

            return finalSize;

        }

    }

//Child element의 DesiredSize.Width보다 fianlSize.Width가 더 크므로, HorizontalAlignment의 효과를 볼 수 있다.

//VerticalAlignment의 경우는 child.DesiredSize.Height가 finalSize가 되었으므로 그 효과를 볼 수 없다.

Width and Height

With the properties Width and Height you give your element an explicit size, and Default-Value is Double.NaN

To access the final size (the size that is calculated during the layout process) use ActualWidth/ActualHeight (readonly)

ActualWidth/ActualHeight는 Arrange()가 호출될때 값이 채워지고, they contain the FinalSize(FinalSize is used in the render step).

ActualWidth/ActualHeight의 값이 변하면 LayoutUpdated-event가 발생한다. This event is fired whenever a layout process has occurred(and that means the ActualWidth/ActualHeight properties of your element have changed). 따라서 LayoutUpdated-event내에서 ActualWidth/ActualHeight에 접근하는 것은 좋은 방법이다.

Explicit하게 Width/Height에 값을 넣으면 element의 final size will be based on those values(DesiredSize에 들어간다).

- Element does not resize anymore (fixed element)

Size-range : Use the properties MinWidth/MaxWidth, MinHeight/MaxHeight

They allow you to specify Arrange and your element will still resize inside of that range.

The Margin

of type Thickness, For XAML a three TypeConverter exist(값 한개, 두개, 네개를 XAML에서 Margin값으로 설정할 수 있게 한다.)

The Visibility

Takes a value of the Visibility-enum : Visible, Hidden(WPF only), Collapsed

Hidden의 경우 시야에서 사라지지만 여전히 공간을 차지한다, 즉 DesiredSize는 그대로이다.

다른 XAML-based framework들에서는 Opacity = 0, IsHitTestVisible = False 로 하는 방법을 사용할 수 있다.

Collapsed의 경우는 DesiredSize의 Width, Height값이 0이 된다.

Using the Designer (생략)

Summary (생략)

출처

이 모든 내용은 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의 강의를 들으실 수도 있습니다.