(XAML)Basic elements

Copyright

이 모든 내용은 Pluralsight에 Kevin Dockx가 올린 'XAML Jumpstart : Getting Started With XAML' 이라는 강의의 2번째 챕터를 듣고 정리한 것입니다(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

Important classes

1. DependencyObject

Object that participate in the dependency property system (link)

2. UIElement

Base class for objects that can have a visual appearance

Supports basic manipulation, basic appearance, basic layout

Can respond to user input, can raise routed events, supports some aspects of animation system.

3. FrameworkElement

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

Adds Height, Width, Alignment and Margin properties

Supports DataContext

Visualize : Shape (<-- FlameworkElement)

대부분의 XAML 컨트롤들은 다른 basic element들로 만들어진다. 

A Shape provides a visual representation and is thus the base of many other XAML elements.

A Shape is a type of UIElement that enables to draw a shape to the screen.

Shape property

Stroke : describes how the shape's outline is painted

StrokeThickness : describes the thickness of the shape's outline

Fill : describes how the interior of the shape is painted

common shapes : Rectangle, Ellipse, Line, Path, Polygon, Polyline

Format -> Combine (more then two objects)

https://msdn.microsoft.com/en-us/library/cc294504.aspx

Using the combine option shapes turned into a path.

A Special Kind of Shape : The Path

...because of Path, a type (superclass) of Shape, enables complex shapes, described using Geometry objects.

To use a Path

Create a Geometry (LineGeometry, RectangleGeometry, EllipseGeometry, PathGeometry etc)

Use it as the Path's Data property

ex    <Path StrokeThickness="5" Stroke="Blue">

            <Path.Data>

                <LineGeometry StartPoint="10, 20" EndPoint="10, 100"/>

            </Path.Data>

        </Path>

  <Path StrokeThickness="5" Stroke="Blue">

            <Path.Data>

                <PathGeometry>                                                    //PathGeometry

                    <PathFigureCollection>

                        <PathFigure StartPoint="10,10">      //PathFigure StartPoint

                            <LineSegment Point="10, 200"/> //Can add Segments(ArcSegment, BezierSegment, PolyBezierSegment etc)

                            <ArcSegment Size="50,50" RotationAngle="90" Point="200, 100"/>

                        </PathFigure>

                    </PathFigureCollection>

                </PathGeometry>

            </Path.Data>

        </Path>

Shape versus Geometry

While both shape and geometry describe two dimensional shapes, geometry does not take part in the layout system(doesn't know where it is in the visual tree, doesn't know what color it should choose etc).

A Geometry object is more versatile & lightweight, but it's less readily usable.

Shape can render itself and a geometry object can't

How to Paint (A Shape) : The Various Brushes (<-- DependencyObject)

Without brushes, we would simply see noting our screen. A brush paints an area with its output.

WHERE it paints : the area of its output

(ex A brush can be assigned as fill color of rectangle or foreground color of some text)

WHAT it paints : the type of output

(ex A brush can paint in a solid color, but it might as well  paint over an area with a gradient or something else)

Brush types : SolidColorBrush, LinearGradientBrush, RadialGradientBrush, ImageBrush, VideoBrush

ex <ImageBrush ImageSource="...." Viewport-"0,0,50,50", ViewportUnits-"Absolute" TileMode="Tile" />

On Images and Media

While XAML is vector-based, sometimes Bitmap is needed - the Image tag takes care of this.

Image (<-- FrameworkElement)

Important Image property : source, Stretch(Fill, Uniform, UniformToFill, None)

Other types of media, like audio and video, are supported as well. Use the MedioElement tag to implement these.

MediaElement (<-- FrameworkElement)

Important MediaElement property : source

One Step Beyond : Masks

Sometimes, we want to make an element (partially) transparent, or clip a part of the element.

UIElement.OpacityMask

Used to make portions of a UIElement (partially) transparent

Maps its content to the UIElement it's related to by looking at the alpha channel

Brush

UIElement.Clip 

Everything outside of the clipping mask is invisible

Geometry

ex  <Image Source="..." Stretch="None">

            <Image.Clip>

                <RectangleGeometry Rect="0,0,25,50"/>

            </Image.Clip>

        </Image>

Summary

DependencyObject, UIElement, and FrameworkElement are often-used base classes.

 - DependencyObject is an object that participates in a dependency property system.

 - UIElement is the base class for objects that can have visual appearance, suppots basic manipulation, basic appearance, basic layout, and can respond to user input, can raise routed events, and support some aspects of the animation system.

 - FrameworkElements, which potentially participates in layout and should have a display area in the UI. It supports properties like height, width, alignment, and margin, and it also supports the DataContext property.

Shapes are UIElements that allow us to draw a shape to the screen. They provide a visual representation and are thus the base of many other XAML elements.

Brushes allow us to paint an area of a UIElement. WHERE (output area), WHAT (output type)

Masks : Opacity, Clip

출처 

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