(XAML Layout in Depth) Panels

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