윈도우 앱개발을 향하여

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

Transformations

Get the position of an element

Projections

Transformations

Defines how to map points from one coordinate space into another one

A transformation can be used on an element to - rotate it, scale it,  skew it, translate it(move it)

Transformation Classes

RotateTransform class

ScaleTransform class

SkewTransform class

TranslateTransform class

MatrixTransform class

All transformations in the two-dimensional space can be described by a 3x3 matrix

While the Rotate/Scale/Skew/TranslateTransform class is high-level classes, the MatrixTransform class is low-level. It allows you to change the 3x3 matrix directly to rotate, scale, skew, translate an element.

TransformGroup class (to combine transformations)

CompositeTransform class (not in WPF)

Single transform class that can rotate, scale, skew, and translate an element

These all Transform classes inherit from the Transform class. The Transform class is the base class for two-dimensional transformations.

Also Transform class inherits from GeneralTransform. The GeneralTransform contains the base logic for transformations between points and rectangles.

All the Transform classes are DependencyObjects and their properties have been implemented as Dependency properties. That means you can use the properties in a style, you can use them as a target for a data binding, or you can event animate them.

LayoutTransform vs RenderTransform

On a FrameworkElement, there are LayoutTransform and RenderTransform properties. Both are of type Transform.

A Transform can be assigned to an element's...

1. LayoutTransform property (WPF only)

The Transform that assigned to the LayoutTransform property is applied before the layout process. 따라서 layout에 영향을 미치므로, 예를들어 StackPanel의 child중 하나를 rotate시켰다면 그 child는 더 많은 Heigth/Width를 차지한 채 layout에 표시된다DesiredSize is bigger). So the layout process runs whenever you change the transform.

2. RenderTransform property (all XAML-based frameworks)

The Transform that assigned to the RenderTransform property is applied after the layout process. 따라서 layout에 영향을 미치지 않으므로, 에를들어 StackPanel의 child중 하나를 rotate시켰다면 그 child만 회전하고 나머지 child의 위치에 영향을 주지 않는다. Whenever you change the transformation that has been assigned to the RenderTransform property, only a new rendering will occur, but no layout process will be executed. So when you plan to change the Transform object at runtime, you should assign it to the RenderTransform property.

The Origin of a RenderTransform

Layout process가 RenderTransform과 무관하기 떄문에 Origin을 필요로 한다.

Origin is defined in the RenderTransformOrigin property(Type Point) that is defined in the UIElement class.

Default value is 0, 0. Specified origin is relative to the size of an element (center of element 0.5, 0.5, bottom right corner 1, 1)

Rotate, Scale and Skew

RotateTransform : Angle property to define clockwise rotation (default 0)

ScaleTransform : Properties ScaleX/ScaleY to define scale (both default value 1 == scale is by default 100%)

SkewTransform : Properties AngleX/AngleY to define skew angle (defualt 0)

All three Transforms have the Properties CenterX and CenterY (default 0) : Use them to define an absolute (pixel-based) origin

Element에 RenderTransformOrigin property를 지정하는 대신에, you could also define the origin by setting the properties CenterX and CenterY on your Transform object. When you group multiple transforms with the TransformGroup, the properties CenterX and CenterY allow you to define a different origin for each transform in that TransformGroup.

Get the Position of an Element

WinRT eg. 

//Call TransformToVisual method on green element and pass orange element as parameter, then returns GeneralTransform object

//GeneralTransform contains base logic for transformations between points and rectangles.

GeneralTransform generalTransform = green.TransformToVisual(orange);

//Call TransformPoint method on the GeneralTransform object with a new Point that contains default 0 for X and Y

//then it returns a point that contains Horizontal/Vertical distance between default value and generalTransform 

Point point = generalTransform.TransformPoint(new Point());

//In WPF Transform method instead of TransformPoint method

WPF (alternative)

Point pint = green.TranslatePoint(new Point(), orange);

Translate an Element

TranslateTransform class has the properties X and Y to define the translation(move)

The TranslateTransform has no effect when it is assigned to the LayoutTransform property of an element, because the transformation occurs before the layout process and the layout process arranges element and gives it a final position. So Assign it to the RenderTransform property

eg.    private void Rectangle_Tapped(object sender, TappedRoutedEventArgs e)

        {

            var element = e.OriginalSource as FrameworkElement;

            if (element != null)

            {

//Get the position of target (where the rectangle will positioned)

                var generalTransform = target.TransformToVisual(element);

                var point = generalTransform.TransformPoint(new Point());

//Set TranslateTransform to element's RenderTransform

                var translateTransform = element.RenderTransform as TranslateTransform;

                if (translateTransform == null)

                {

                    translateTransform = new TranslateTransform();

                    element.RenderTransform = translateTransform;

                }

//Translate(move) the element to the position of the target

//Here can be replaced to an animation

                translateTransform.X = point.X;

                translateTransform.Y = point.Y;

            }

        }

MatrixTransform

Low-level class to create custom 2D-transformations

Matrix-Property contains the 3x3 affine transformation matrix

The Matrix can be modifed to rotate scale, skew and translate an element (need linear algebra)

Combine Transformations

Instead of a MatrixTransform, you can also use the TransformGroup to combine transformations(much simpler).

TransformGroup has a Children property of type TransformCollection and inherits from Transform, can be assign it either to the RenderTransform or to the LayoutTransform property of an element.

eg. <Rectangle.RenderTransform>

           <TransformGroup>

               <RotateTransform Angle="45" />

               <ScaleTransform ScaleX="2" ScaleY="2"/>

           </TransformGroup>

     </Rectangle.RenderTransform>

There is another class to combine multiple transformations (not available in WPF) : CompositeTransform

CompositeTransform contains Rotation, ScaleX/ScaleY, SkewX/SkewY, TranslateX/TranslateY properties

Projections (Not available in WPF)

A projection is a perspective transformation of an element

The perspective transformation is a 3D-like effect that you can apply to your element.

In Silverlight, this Projection class is abstract.

In the WinRT, the constructor is protected.

you can assign PlanProjection or Matrix3DProjection to the Projection property of any UIElement.

PlaneProjection

To rotate an element around the axis X, Y and Z

It contains the properties RotationX, RotationY, and RotationZ (angle in degrees, default 0) and CenterOfRotationX, CenterOfRotationY, CenterOfRoationZ properties define the center of rotation.

CenterOfRotationX/Y contain a relative value (default 0.5)

CenterOfRoataionZ contain a absolute value in pixels (default 0, <0 means center of rotation is behind the element, >0 front of it)

Translate your element with offsets

LocalOffsetX/Y/Z : Translation before rotation

GrobalOffsetX/Y/Z : Translation after rotation (just move the center of rotation)

Matrix3DProjection

Low-level class to create custom 3D-transformations

ProjectionMatrix property contains the 4x4 transform matrix (Matrix3D) used for the projection

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의 강의를 들으실 수도 있습니다.

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

Elements with children

Panel classes (Grid, StackPanel, Canvas, WrapPanel, DockPanel, VariableSizeWrapGrid)

Build application layouts

Elements with children

In XAML-based applications, there are four main categories of elements that can have children.

1. Single UIElement

Child Property of type UIElement.

(In the WPF, Decorator class is a base class for those elements. Decorator class가 child 속성을 정의한다. Well known subclasses of Decorator are Border and Viewbox. WinRT에는 Decorator class는 없지만 Border, Viewbox class는 여전히 존재하며 UIElement타입의 child property를 가지고 있다.)

2. Many UIElements (of type Panel, 이 글의 주된 타겟)

Children property of type UIElementCollection

3. Single object

Content property of type Object

Those elements inherit from the ContentControl class, which defines that Content property. ContentControl은 예를 들어 Button class, ScrollViewer class, Window class(WPF) 등이다.

4. Many Objects

Items property of type ItemsCollection and in addition, an ItemsSource property of type IEnumerable.

Those two properties are implemented in the ItemsControl class이며 ComboBox, ListView가 유명한 subclass이다.

ContentControl이나 ItemsControl에는 한가지 규칙이 있다. 만약 object가 UIElement라면, it is rendered in its normal way. object가 UIElement가 아니라면, the result of the ToString method is displayed in a text block. 이것을 피하기 위해 you can create a user interface for your object. You do this by specifying a data template. ContentControl class는 Content property와 함께 ContentTemplate property를 가지며, ContentTemplate property는 user interface(for the object that is stored in the Content property)를 지정할 data template를 받는다. 마찬가지로 ItemsControl class도 ItemTemplate property를 가진다. ItemsTemplate property is also of type DataTemplate unless you specify the user interface for a single object in that ItemsControl(For more about data template, see link). Internally an ItemsControl is using a panel to layout its children.

The Base Class : Panel

The Base class for all the Panels in the XAML-based frameworks is the class Panel. It directly inherits from FrameworkElement.

- Children property (of type UIElementCollection)

- Background property

Default is null, 만약 panel에 input event handler를 만들었을 때 Background가 null이면 event가 실행되지 못한다. 색상을 원하지 않는 경우라면 Transparent를 두면 된다.

- Attached property ZIndex(WPF의 Panel class만 contains the Zindex property, 다른 경우 ZIndex는 Canvas class에 정의되어 있다)

Panel-subclasses in WPF and WinRT

WPF & WinRT

Grid, Canvas, StackPanel

VirtualizingStackPanel : used inside of an ItemsControl. It does a UI virtualization for the items in that ItemsControl.

That means that the UI for items that are by far out of the view is not created by default.

The UI for those items is only created when you scroll to them. So such a VirtualizingStackPanel will gain performance when you have a lot of items in your ItemsControl. 

WPF specific panel 

DockPanel : allows to dock elements at the Left, Top, Right, Bottom

WrapPanel : stacks elements per default in a horizontal way, and it automatically inserts a line break if there is not enough space.

UniformGrid : simple Grid where all cells have the same size

etc....

WinRT specific panel

VariableSizedWrapGrid : create a kind of Grid layout and each cell can have a variable size

SwapChain : it is used as a hosting suffice to render direct X content in your XAML application

Many of the other panels available in the WinRT can only be used as a panel in an ItemsControl(따라서 WinRT로 layout을 만들때는 Grid, StackPanel, VariableSizedWrapGrid 등 뿐이다.)

The Grid

Arranges children in rows and columns

To define rows and columns, use the properties RowDefinitions and ColumnDefinitions.

To arrange your children, use the attached properties Grid.Row, Grid.Column, Grid.RowSpan, Grid.ColumnSpan.

(Grid.Row과 Grid.Column의 디폴트 값은 0이고, Grid.RowSpan과 Grid.ColumnSpan의 디폴트 값은 1이다.)

RowDefinition class와 ColumnDefinition class는 세개의 중요한 속성을 가진다.

- Height(of type GridLength), MinHeight(of type double), MaxHeight(of type double)

- Width(of type GridLength), 위와 동일

The GridLenght struct supports 3 different units (GridUnitType) that you can use to set the Height or Width.

Those three units are defined in the GridUnitType enumeration : Auto, Pixel, Star(default)

For XAML, a TypeConverter exists that allows you a very simple usage of those three different units.

The GridSplitter (WPF, Silverlight only, for UWP see this link)

The GridSplitter is a control that allows the user to resize the rows and columns in a Grid.

By default, the GridSplitter resizes rows or columns based on its alignment.

The Canvas

Position children explicitly with coordinates

use the attached properties (Canvas.Left, Canvas.Top, Canvas.Right, Canvas.Bottom)

For overlapping elements, either use Canvas.ZIndex (in WPF Panel.ZIndex) or change the order of the children

Canvas is not for layout, use the Canvas for graphical stuff.

The StackPanel

Stacks elements in one line

The Orientation property can be set to Vertical(default) or Horizontal

The WrapPanel (WPF only)

Stacks elements in one line and adds a linebreak when there's not enough space left

The Orientation property can be set to Vertical or Horizontal(default)

WrapPanel은 DesiredSize Width로 element를 dispaly하고, 모든 elements in a row는 가장 큰 element Height에 맞춰 stretch된다.

모두 동일한 크기를 가지게 하려면 WrapPanel의 ItemWidth, ItemHeight를 설정해주면 된다.

(WrapPanel in UWP, see link)

The DockPanel (WPF only)

Docks elements at the left, top, right, and bottom

Set the attached property DockPanel.Dock on the children (Dock-enum Left(default), Top, Rigth, Bottom)

By default the LastChildFill property is true, so the last child fills the leftover space.

DockPanel can be used as a RootPanel for the layout of application, but there is no Splitter control

다른 XAML-base application과의 연동을 고려한다면 Grid를 사용하는 편이 낫다.

The VariableSizedWrapGrid (WinRT only)

Arranges children in rows and columns

Orientation property, Vertical(default, stacks children in columns) and Horizontal(stacks children in rows)

Define equal size for all children with ItemWidth and ItemHeight

MaximumRowsOrColumns property to define when break occurs(default -1)

창의 크기가 줄어들면 그에 맞추어 element가 재배열되지만 공간이 남더라도 아래의 사진처럼 아래로 2칸까지만 내려가고 오른쪽으로 배열되도록 설정할 수 있다(MaximumRowOrColumns = 2, Orientation = Vertical)

Attached Properties for children

VariableSizedWrapGrid.RowSpan

VariableSizedWrapGrid.ColumnSpan

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의 강의를 들으실 수도 있습니다.

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의 강의를 들으실 수도 있습니다.