윈도우 앱개발을 향하여

Copyright

이 모든 내용은 Pluralsight에 Kevin Dockx가 올린 'XAML Jumpstart : Getting Started With XAML' 이라는 강의의 5번째 챕터를 듣고 정리한 것입니다(https://app.pluralsight.com/library/courses/xaml-jumpstart/table-of-contents). 강의 원작자분께 게시허가도 받았습니다.

#주의 이 강의가 나온 시점에는 x:Bind가 없던 시점이어서 Runtime Binding에 대한 내용만을 다루고 있습니다.

Content

1. Basic Elements, Shapes, Brushes, and Masks

2. Control Basics and Interacting with them

3. Panels and the Layout System

4. Data Binding Essentials

5. Working with ItemsControls

6. Using Resources and Styling Controls

7. Debugging and Analyzing XAML

8. Choosing the Right Tool for the Job

Source : Data Model (like Person)

Source property (ex Name property inside Person class)

Target : UI (like TextBlock)

Target property (ex Text property inside TextBlock) : Target property must be a dependency property

Dependency property is a property that provides a way to compute a value of a property based on the value of other inputs.

On DataContext and Scope

The DataContext property is defined on FrameworkElement. It's the data source used for data binding.

DataContext가 지정되어 있지 않으면 자신의 parent를 따라 DataContext를 찾아 검색하며 올라간다(root element까지, 보통 Page).

Binding Modes

The binding mode allows us to specify how we want to sync between source and target.

OneWay, TwoWay, OneWayToSource, OneTime

Notifying the UI

The UI isn't auto-notified of a change on a backing class.

To allow reporting change

Implement INotifyPropertyChanged on the Model

Raise the PropertyChanged event to notify the UI

Controlling Sync Timing : UpdateSourceTrigger

For binding modes that update the source, we can specify the timing of these updates with the UpdateSourceTrigger property in the binding markup.

ex TexBox-based controls

타자를 칠때마다 Updating하는건 성능을 크게 저하시킨다, 게다가 Update되기 전에 사용자가 오타를 수정할 기회마저 박탈한다. 따라서, the default UpdateSource behavior for text boxes, or text box-based controls, is LostFocus and not PropertyChanged. 이 방법이 대체로 적합하지만 상황에 다라 UpdateSourceTrigger을 통해 이 default behavior를 다른 방식으로 변경할 수 있다.

public enum UpdateSourceTrigger

{

Defualt = 0, PropertyChanged = 1, Explicit = 2, LostFocus = 3

}

(Explicit : when UpdateSource method is called from code)

+ To get binding expression for a certain FrameworkElement => GetBindingExpression method in which we can pass in the dependency property we want to get the binding expression from.

ex private void Button_Click(object sender, RoutedEventArgs e)

{

BindingExpression be = nameOfTextBox.GetGindingExpression(TextBox.TextProperty);

be.UpdateSource();

      }

Converters

A value converter allows us to provide custom logic to a binding to convert from source to target type (and back), so we can bind between properties that have incompatible types.

1. Create a class implementing IValueConverter

2. Implement Convert, and optionally ConvertBack

Convert is used to convert a passed in value to a value of the type of the target property we're binding to.

3. Assign an instance of the class to the Converter property of the Binding markup extension

ex   public class AgeToVisibilityConverter : IValueConverter

{

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

//value = age of Person class, parameter is comes from ConverterParameter in Binding markup extension

{

int.TryParse(value.ToString(), out int age);

int.TryParse(parameter.ToString(), out int maxAge);

return age < maxAge ? Visibility.Visible : Visibility.Collapsed;

}

}

Add an instance of this AgeTovisibilityConverter through Page.Resource dictionary

<Page.Resources>

<local:AgetToVisibilityConverter x:Key="AgeToVisConv" />

<Page.Resources>

Summary (생략)

출처

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

Copyright

이 모든 내용은 Pluralsight에 Kevin Dockx가 올린 'XAML Jumpstart : Getting Started With XAML' 이라는 강의의 4번째 챕터를 듣고 정리한 것입니다(https://app.pluralsight.com/library/courses/xaml-jumpstart/table-of-contents). 강의 원작자분께 게시허가도 받았습니다.

Panels (<-- FrameworkElement)

Panels allow us to arrange a group of child elements in simple to very complex layouts.

Responsible for laying out its children

The type of Panel defines how they are arranged

Has a Children property of type UIElementCollection which contains a collection of UIElements

Commonly used Panels : Canvas, StackPanel, Grid, RelativePanel

Canvas  

Used to explicitly position children elements by coordinates relative to the Canvas area.

But the absolute positioning means it's not so good for scaling.

Canvas doesn't have concept of docking controls next to each other => 겹쳐진다.

Therefore the ZIndex exist.

StackPanel

Used to arrange children into a single line, horizontally or vertically

Grid

Defines a flexible grid area consisting of rows and columns

RowDefinition, ColumnDefinition can has absolute size, star size, and Auto

ColumnSpan, RowSpan makes a control span across row and column boundaries 

RelativePanel (생략)

A Step Back to the FrameworkElement (<-- UIElement <-- DependencyObject)

FrameworkElement...

potentially participates in layout and should have a display area in the app UI

Adds Height, Width, Alignment and Margin properties

Supports DataContext

(http://empisterian.tistory.com/9)

Width and Height

HorizontalAlignment / VerticalAlignment

Defines how the element is horizontally / vertically aligned within a parent element's allocated layout space

Valid values are Left, Right, Center, Stretch

Margin

Describes the distance between an element and its child or peers

OUTSIDE of the element, and Margin is of type Thickness (left, top, bottom, right)

Padding

Padding is a bit of a special case. This property is not defined on FrameworkElement, it's only exposed on a few classes, primarily as a convenience where it makes sense. Block, Border, Control, and TextBlock etc

Unlike Margin, this actually enlarges the size of an element by the provided Thickness

INSIDE of the element, and Padding is of type Thickness (left, top, bottom, right)

(setting padding makes the element larger this time the arrows show the applied padding values)

An Important Concept : The Visual Tree

The visual tree는 object tree의 특수한 형태다(An object tree is a conceptualization of how objects that are created and exist at runtime are related to each other). The visual tree is a filter on the object tree, rendering implication을 포함한 object만이 visual tree에 포함된다. Every element type that has a rendering implication is part of the visual tree, and an element does not show up on screen until it's in a rendered visual tree. 

The visual tree can be seen as a scene  graph, containing all the rendering information needed to compose the output to the display device. 

Visual tree determines the rendering order. The order of traversal starts with the root visual, which is the top-most node in the visual tree.

ex <StackPanel>

 <Button>

<TextBlock Text="Hi there!"/>    ==visual tree==>   StackPanel => Button => ContentPresenter => TextBlock

 </Button>

</StackPanel>

ContentPresenter is a parent of TextBlock (not a Button), ContenPresenter takes part in the visual layout cycle, so part of the visual tree.

(ControlTemplate (inside of Button.Template) for a Button containing the ContentPresenter)

The Layout System 

Ensures elements are sized, positioned and drawn, recursively.

The visual tree determines the rendering order, and layout system is the process of measuring and arranging the members of a layout panel's children collection(Panel에 children이 많을수록 많은 계산이 필요하다. 게다가 Panel has a specific behavior. Canvas는 상대적으로 쉽지만(but), take for example a grid, which sets into place in the grid according to Grid.Row Grid.RowSpan, Grid.Column, and Grid.ColumnSpan attached properties. The size of one of the children is one of the things that can determine the size of the parent and the position of the next child.)

1. Each child UIElement is measured using core properties(like clip, visibility). (First part of Measure Pass a constraint size)

2. Sizing properties are defined on FrameworkElement like Width, Height, and Margin are evaluated. (Second part of Measure Pass)

Typically this property is described as sizing characteristics of the underlying UIElement and they can thus change the space necessary to display the element. The ultimate goal of this pass is for the child to determine its desired size.)

3. Panel-specific logic is applied (such as stacking orientation for StackPanel)

4. Content arranged after all children are measured. (Arrange Pass)

This can be different from desired size as additional margins may affect the finally-rendered size of the element. The arrange size is passed back to the parent panel, which them generates the final size of the child.

5. Children drawn to screen

6. Process possibly invoked again (go to 1)

More detail in XAML Layout in Depth

Summary (생략)

출처

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

Copyright

이 모든 내용은 Pluralsight에 Kevin Dockx가 올린 'XAML Jumpstart : Getting Started With XAML' 이라는 강의의 세번째 챕터를 듣고 정리한 것입니다(https://app.pluralsight.com/library/courses/xaml-jumpstart/table-of-contents). 강의 원작자분께 게시허가도 받았습니다.

Control

Behavior : what it does

ControlTemplate : how it looks

ControlTemplate = template property of Control

ControlTemplate consists of basic element like Shapes, or consists of other controls who have templates of their own, etc

Some Classes and Controls are in the primitive namespace. These primitives often don't make sense on their own. Primitive can be both controls that are uses as part of a control, for example a thumb for a slider, but primitive namespace also contains base classes that provide common behavior for a set of controls(ex ButtonBase primitive, this provides the basic behavior for button controls, but it doesn't make sense on its own). 

중요한점은 template과 behavior가 분리되어있어서 behavior를 건드리지 않고 template(외견)만 바꿀 수 있다는 점이다.

 On ContentControl and Relations

Content

ContentControl : single item (like button)

Any type of object that can be placed in a ContentControl or a class that derives from ContentControl can be placed in a control that has any of the other three content models

HeaderedContentControl : header + single item (like group box)

ItemsControl : collection of items

HeaderedItemsControl : header + collection of items (like menu item)

위 네개의 클래스들은 대부분의 control들의 base class처럼 행동하고, classes that use these content models can contain the same types of content and treat content in the same way. ContentControl에 들어갈 수 있는 모든 타입의 object들과 ContentControl을 상속한 클래스는 can be placed in a control that has any of the other three content models. 또한 각 content model class들은 content property of type object를 정의하거나 경우에 따라 header property를 정의함으로써 content또는 header에 object type 어떤것이든 지정할 수 있게 한다.

ContentControl은 control을 상속하고, control represents the base class for user interface elements that use ControlTemplate to define their appearance.

On the control class control(에서) 우리는 시각적인 외양을 template로 지정할 수 있고,

On ContentControl or any of the other three content model-enabling classes(에서) 우리는 content를 content property에 지정할 수 있다.

예를 들어 Button(Final Class)은 ButtonBase를 상속하며, ButtonBase는 모든 button type들의 behavior를 제공한다. 그리고 ButtonBase는 ContentControl을 상속한다.

그리고 to ensure content is shown in the template we need to add a ContentPresenter to the ControlTemplate.

Demo : 버튼 Template 수정하기.

Object and Timeline에서 Button 우클릭 -> Edit Template -> Edit a copy (in this document)

Style contains Property Setter for a property with name Template of type ControlTemplate.

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type Button}">

<Grid>

<Ellipse Fill="{TemplateBinding Background}" />    //버튼을 타원으로, 색을 Button에 지정된 Background로 바인딩

      <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />   //버튼의 content를 보이게한다.

</Grid>

</ControlTemplate>...

Interacting With Controls : Routed Events

XAML works with routed events. <See Programming Windows 6th 85~94 page>

A routed event is...

A type of event that can invoke handlers on multiple listeners in an element tree, rather than just on the object that raised the event.

A CLR event that is backed by an instance of the RoutedEvent class and is processed by the event system.

Routed event가 필요한 까닭은 Button을 예로 들면, Button의 content에 많은 elements를 배치할 수 있고, button template에도 많은 elements를 포함시킬 수 있기 때문에 사용자가 button을 클릭했을때 정확히 무엇이 클릭되었는지 장담할 수 없다. 만약 버튼 내에 Image가 배치되어있고 사용자가 그 이미지를 클릭했다면 그 event를 버튼에서 처리해야 한다. As a routed event can invoke handlers on multiple listeners in the element tree, it allows that. In reality a routed event route can travel in different directions. When a UIElement is constructed, they choose the routing strategy for each of their routed events and this is never changed.

A routed event follows a....

- Direct routing strategy (only the source element itself is given the opportunity to invoke handlers in a response)

- Bubbling routing strategy (event handlers on the events are invoked to routed events, then routes to successive parent elements until reaching the element tree root. Most routed events use the bubbling routing strategy)

- tunneling routing strategy (initially event handlers at the element tree root are invoked to a routed event, then travels a route true successive child elements along the route towards the node elements, that is the routed event source, i.e., the element that raised the routed event)

 - Simplified example of tunneling and bubling

1. Click an image in a button (== MouseDown event on the image)

2. But what happens first is that the PreviewMouseDown event is fired, starting at the root, the page typically.

3. Tunnels from Page root to image

4. MouseDown event is raised on that image, then starts bubbling up

5. Button handles that event and throws its own event(Button.Click)

If there's no handler attached to the button that acts on the event, the event will bubble up even further.

RoutedEventArgs exposes a few interesting properties.

OriginalSource : can always see where the event originated

Source : can get the current source object

Handled : By setting it to true, mark the event as handled to ensure that other event handlers that listen for it are no longer executed.

(ex MouseDown event handler was executed before Button_Click, if MouseDown RoutedEventArgs Handled property set to true Button_Click event do not fired)

Summary (생략)

출처

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