(XAML Layout in Depth) Advanced Topics

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

The Grid : Overlay and shared size groups

Layout the content of a Control

Change the Panel of an ItemsControl

ScrollViewer and Viewbox

Animated move of elements in a Panel

The Grid as Overlay-container

If you don't specify RowDefinitions and ColumnDefinirions the Grid is one single cell.

Elements in one cell are drawn over each other in the order that defined in XAML(the last element is on top)

So the Grid is the perfect panel to overlay items.

eg. Loading-overlay

<Grid>

<!-- Content -->

<some panel> ...content... </some panel>

<!-- Loading overlay -->

<Gird                                        //custom control로 만들어 따로 빼두는게 이용에 편리하다.

Background="#AAFFFFFF"        //FFFFFF == white, alpha channel of AA == a bit transparent

d:IsHidden="True"                  //Hidden this element to do not overlay elements on the designer

Visibility="{x:Bind ....IsLoading}" //Data binding 로딩이 끝나면 사라질 수 있도록

>

<ProgressRing .../>

</Grid>

</Gird>

The Grid : Shared Size Groups (WPF only)

Share the same size between different ColumnDefinitions or RowDefinitions, Even across multiple Grid-instances

Set the SharedSizeGroup property on RowDefinitions or ColumnDefinitnons, its of type string(without space, not start with number).

Then Set the attached property Grid.IsSharedSizeScope on a parent to true.

eg. <StackPanel Grid.IsSharedSizeScope="True">

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition SharedSizeGroup="myGroup">

<ColumnDefinition/>

</Grid.ColumnDefinitions>

</Grid>

<Grid>

<Grid.ColumnDefinitions>    //Size of this column is sync with the above column with SharedSizeGroup

<ColumnDefinition SharedSizeGroup="myGroup">

<ColumnDefinition/>

</Grid.ColumnDefinitions>

</Grid>

</Grid>

# Star-sized columns or rows with a SharedSizeGroup are treated as Auto at runtime.

Layout the Content of a Control

Let's assume that the content of a Control is a FrameworkElement which contains Horizontal/VerticalAlignment and Margin

The Control class is a subclass of FrameworkElement and it defines Horizontal/VerticalContentAlignment and Padding to layout its content

When you set Horizontal/VerticalContentAlignment property, the Control internally sets the Horizontal/VerticalAlignment on its Content, and there is a Padding property that sets the Margin property on the Content. All those properties are wired together in the Control template of a Control.

eg.  //To Strecth Contents of ListView

<ListView HorizontalAlignment="Stretch"

HorizontalContentAlignment="Stretch"    //Have effect in WPF

Background="YellowGreen" ItemsSource="{x:Bind peaple}">

        <ListView.ItemContainerStyle>

            <Style TargetType="ListViewItem">

                <Setter Property="HorizontalContentAlignment"  Value="Stretch" />   //Have effect in UWP

            </Style>

        </ListView.ItemContainerStyle>

        <ListView.ItemTemplate>

            <DataTemplate x:DataType="model:Person">

                <Border HorizontalAlignment="Stretch" Background="Orange" CornerRadius="5" Margin="1"> //No effect

                    <StackPanel Margin="5">

                        <TextBlock Text="{x:Bind Name}"/>

                        <TextBlock Text="{x:Bind Age}"/>

                    </StackPanel>

                </Border>

            </DataTemplate>

        </ListView.ItemTemplate>

    </ListView>

Change the Panel of an ItemsControl

An ItemsControl can contain many objects. Typical ItemsControls are the ListView and ComboBox

To change the panel there is two options

1. Set the ItemsPanel property of ItemsControl

Assign an ItemsPanelTemplate to this property and specify the panel in the ItemsPanelTemplate

2. Assign a new ControlTemplate to the Template property of ItemsControl

Inside of that Template, create a Panel and Set the IsItemsHost property(defined in the Panel class) to true

(This property is readonly in WinRT)

Normally change the Panel of an ItemsControl, choose option 1.

When you are defining the new ControlTemplate to create a new look for your ItemsControl, choose option 2

When There's Not Enough Space

When there is not enough space for panel, panels are just clipping their elements.

1. Put your panel into a ScrollViewer, it supports Horizontal/Vertical scroll bars

2. Or put your panel into a Viewbox, it will just shrink or scale your panel

The ScrollViewer

To display a vertical and horizontal scrollbar

ScrollViewer class inherits from ContentControl, so it has a Content property of type Object (like button)

Control the scrollbar visibility with the properties VerticalScrollBarVisibiity(default Visible) and HorizontalScrollBarVisibility(default Disabled), both properties take a value of the ScrollBarVisibility enumeration(Disabled, Auto, Hidden, Visible)

# Some ItemControls, like the ListView, have an internal ScrollViewer, it is defined in the ControlTemplate of the ListView

Use attached properties to modify the internal ScrollViewer

eg. <ListView ScrollViewer.VerticalScrollBarVisibility="Auto" />

The Viewbox

To stretch an element to the available space

The Viewbox class inherits via Decorator from FrameworkElement in WPF. In WinRT, Viewbox inherits FrameworkElement directly

The Decorator class defines a child property that takes a single UIElement. In the WinRT, the child property is directly defined on the Viewbox itself. ViewBox has a child property anyway, so in XAML you can just place any UIElement inside of Viewbox. Then the Viewbox will automatically stretch the element based on the available space.

To control the stretching, the Viewbox has a Stretch property that takes a value of the Stretch enumeration

None : no stretching (DesiredSize)

Fill : aspect ratio changes to fill the available space

Uniform(default) : aspect ratio never changed, there is leftover space

UniformToFill : aspect ratio never changed, and fill the leftover space 

and StretchDirection property of type enum StretchDirection

UpOnly : only grow (DesiredSize가 최소크기이고 그 이하로 공간이 부족해지면 clip된다)

DownOnly : only shrink (DesiredSize가 최대크기)

Both(default) : can be shrink and grow

Animated Move of Elements in a Panel

In some scenarios an animated move makes the user experience much better

Instead of using a TranslateTransform, you can also use the FluidMoveBehavior that animates a change in the position of an element (high-level class), it's like an animated TranslateTransform, but it's much simpler to use

To use it open up Blend and attach the FluidMoveBehavior to a Panel (asset -> behavior -> drap&drop -> property setting)

In Blend, There's also a FluidMoveSetTagBehavior that allows you to define a starting point for the move

그러나 FluidMoveBehavior가 UWP project에 기본적으로 들어있지는 않았다, Nuget을 통해 받아 사용하는 듯 하나, 아직 Behavior와 관련한 내용을 모르겠다. Pluralsight에서 관련 강의를 찾았다(link).

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