(XAML)Control Basics and Interaction with them

Copyright

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

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

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