윈도우 앱개발을 향하여

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

 그동안 TimeRecorder라는 이름으로 사용자가 시간을 기록할 수 있는 UWP 프로그램을 만들고 있었는데 어째서 UI를 먼저 제작하라고 했는지 뼈저리게 느꼈습니다. 일단 XAML을 잘 다루지 못한다는 것도 크지만 이미 상당히 만들어둔 내부구조를 어떻게든 재사용하면서 연결하려 하다보니 전체적인 구조도 엉망이 되어가고... 그래서 차라리 처음부터 다시 만드는 편이 낫다는 판단을 내렸습니다. 내부구조의 윤곽을 한번 그려보았으니 UI를 먼저 제작한 뒤에 내부구조를 만들어갈땐 훨씬 빠르고 쉽게 할 수 있겠지요. (그래도 JSON과 MVVM패턴, Git을 다룰 수 있게 되었으니 그나마 발전은 있었네요.)

 LocMetrics라는 코드량을 계산해주는 프로그램 말로는 3만줄이나 되는데... 물론 직접 작성한 코드는 끽해야 몇천줄이겠지만 많이 아쉽습니다. 윈도우 전문가 분들께선 시간을 기록하는 간단한 프로그램쯤이야 UI제작까지 포함해서 일~이주일이면 뚝딱 만드실텐데 저는 엄청난 삽질의 과정을 거치고 있습니다.

 올해내로 어떻게든 성과를 내고싶다는 생각에 다소 부실하게 제작되고 있지 않았나 하는 생각도 듭니다. 심지어 설계나 기획과 같은 과정이 전혀 체계적이지 못하고 주먹구구식으로 기능을 문서로 대강 작성하고 UI도 대강 그려가면서 했던 것이 이런 결과를 가져오지 않았나 반성하게 됩니다. 현재까지 제작된 코드는 GitHub에 올라가 있으나 나중에 삭제하고 일부 코드를 재사용하거나 참조해서 새롭게 GitHub에 올릴 계획입니다. 이것들을 통째로 버리지 말고 천천히 다시 둘러보며 개선해나갈 수도 있겠습니다만, 지금은 의욕이 많이 저하된 상태여서 엄두가 나질 않네요...

 그래서 한동안 주변을 둘러보면서 .NET 공부도 하고, XAML공부도 하고, 설계나 디자인패턴에 대한 공부도 하면서 숨을 고른 뒤 다시 차근차근 제작해볼까 합니다. 최호성이라는 분께서 프로그래머는 자신이 하는 활동을 어딘가에 기록해서 공개하는 것이 중요하다고 인터넷 방송으로 조언을 해주셔서 제가 하는 공부와 프로그램 제작 과정 등을 여기에 정리를 해볼까 합니다. 몇달간 거듭된 실패들로 조금 지쳤습니다만, 포기하지 않고 계속 삽질을 하다보면 물이라도 나오지 않겠습니까... :)

수정 : 2018.2.8

 신나게 작성하던것을 또 실패... 이번엔 XAML에 대해 충분히 알았고 프로그램의 전체적인 큰그림도 그렸으나, 기본단위가 되는 인터페이스와 클래스들의 상호관계를 철저히 설계해놓지 않았던 것이 문제가 되서.. 아직 충분히 수정가능한 상태이지만 전체적으로 로직을 다시 작성해야하는 상황에 빠졌다. 설계공부가 아직도 되어있지않으니 설계의 기본원칙들이 지켜지지 않아 이런 사단이 나는 듯 하다. 다행히 설계와 관련한 강의를 몇개 찾았으니, 강의를 들은뒤 개략설계서와 상세설계서를 모두 꼼꼼히 작성하고 다시 도전해보자. 슬슬드는 생각이지만, 설계만 꼼꼼하게 잘 작성되고나면 코딩은 그렇게 어렵지 않을 것 같다는 생각이 든다. 이 난관을 넘어선다면 그 다음은 고비는 알고리즘이 되지 않을까?

Copyright

이 모든 내용은 pluralsight에 있는 Barry Luijbregts가 올린 The .NET Ecosystem: The Big Picture이라는 강의를 듣고 정리한 것입니다(https://app.pluralsight.com/library/courses/dotnet-ecosystem-big-picture/table-of-contents). Barry Luijbregts 원작자께 블로그 게시 허가도 받았습니다.

.Net development platform

includes Runtimes, .Net APIs, Compilers, languages and runtime component

1. Runtimes

런타임들(.NET Framework, .NET Core, Mono)은 모두 application과 library를 만들기위한 frameworks를 포함한다.

1-1 .NET Framework (프레임워크라고 되어있으나 실상은 런타임이고 플랫폼이다.)

Workloads (application type)

 - Console application

 - Windows communication Foundation (old web service communication)

 - Windows Workflow Foundation (Automate business processes)

 - Windows Presentation Foundation (Windows desktop application with potentially complex UIs)

 - Windows Forms ((Windows desktop application with simple UIs)

 - ASP.NET (Web applications)

     - (ASP.NET) Forms, MVC, Web API applications

 - Azure (WebJobs, Cloud Services)

some of them uses specific Windows APIs

.NET Framework provides a lot of functionality through its Class Library

(Classes, interfaces and value types... like string and collections)

.NET Framework Class Library is sometimes called as the Base Class Library. It contains specific functionality for windows platform, like classes to interact with the file system.

CLR = a thing that is part of the common infrastructure of the languages and build tools that all runtimes have.

 - Run code(Compilation mechanism like JIT compilation)

 - Garbage Collection(runtime helper mechanism)

 - C#, VB.NET, F# codes are run and managed by CLR

(CLR also manages communication between managed code and unmanaged code, like when calls API in the windows platform)

특징 : Windows centric (윈도우 전용 API들을 사용하기 때문)

.NET Framework only runs on the Windows platform(Windows Client version like Windows10, Windows Server versions like Windows server 2016)

.NET Framework의 1,2,4 버전을 컴퓨터에 각자 설치가능하고 1버전을 사용하는 application이나 4버전을 사용하는 application이 있을 수 있다. 그러나 4.7 버전을 설치하면 기존의 4.5버전은 사라진다. (즉 메이저 버전을 단위로 끊어진다. == not true side by side) 

- Major version = new CLR (ex) 3.5 -> 4

- Minor version = new library   (ex) 4.5.2 -> 4.6

- Revision = bug fixes (ex) 4.6 -> 4.6.2

.NET Framework는 C:\Windows\Microsoft.NET\Framework에 설치되어있다.

1-2 .NET Core (runtime)

open source(https://github.com/dotnet/core)

Workloads (application type)

 - Console application

 - ASP.NETCore

     - MVC, API

 - UWP (Universal Windows Platform)

.Net Core Class Library contains Classes like collections, file I/O, XML, and async. It's a subset of .NET Framework library to be more streamlined and lightweight. Basis of application to be small as it can be and additional component can be pulled in through Nuget

CoreCLR = part of the common infrastructure, It is different with .NET Framework CLR, CoreCLR is more lightweight and geared towards running code cross-platform and cross-architecture(it runs on x84, x64 and ARM CPU).

 - Assembly loading, Garbage Collection, C#, F#, VB.NET

App Host = usually .NET.exe (allow .NET Core to run on multiple platforms)

This launches .NET Core apps by hosting the CLR and libraries.

Windows Client, Windows Server, Windows IOT (like Raspberry Pi)

Linux (all sort of Linux distributions like Red Hat, Ubuntu, Tizen)

FreeBSD (UNIX like OS)

Mac OS X

.NET Core를 설치하면 선택한 버전의 application host(dotnet.exe)와 CoreCLR, library를 사용할 수 있게 된다. Application들은 원하는 버전의 .NET Core를 사용가능하며 심지어 .NET Core를 기기에 설치하지 않고 application이 자체적으로 필요한 .NET Core를 가지고 있을 수도 있다(self contained application). 보통 컴퓨터에는 C:\Program Files\dotnet에 설치되어있고, shared폴더에 버전들이 있다(각 버전들은 App Host인 dotnet.exe와 class library를 구성하는 많은 API들을 포함하고있다).

.NET Core 프로젝트를 생성해 프로그램을 만든뒤 솔루션을 우클릭하여 publish할 수 있다. dotnet.exe로 실행가능한 프로그램이 된다. self-contained application을 만들기 위해서는 csproj파일에 RuntimeIdentifier를 지정해주어야한다(ex win10-x64;osx.10.12-x64   윈도우10과 맥에서 실행가능하다. 세팅을 통해 윈10과 맥 버전을 따로 다른 폴더에 지정해 publish한다). 그리고 publish하면 library와 dll 그리고 실행가능한 exe까지 함께 만들어진다.

1-3 Mono (runtime) for Xamrin

Mono runtime은 .NET Framework CLR의 cross-platform을 지원한다. open source (http://github.com/mono/mono)

이 글에서는 Mono for Xamrin만 소개한다.

Workloads (type of application)

 - Apple IOS application

 - Apple Mac OS X application

 - Android applications

 - etc

All application workloads packages their application as self-contained application.

Xamarin Class Library is a subset of .NET Framework Class Library

Mono Runtime은 .NET Framework와 거의 동일한 common infrastructure를 가진다(Garbage Collector, JIT). 그러나 Mono Runtime은 C#만 작동하며 AOT(ahead of time compiler)을 추가로 지원한다.    

특징 : Cross platform (This is used to build and run native mobile application across mobile platforms.)

Specific API for IOS, Android, Xamarin.Mac

- 3개의 Runtime 비교

2. .Net Standard Library (purpose == share code between runtimes)

Set of .NET APIs formal specifications that describes APIs and what they do, Not a physical thing to download or install.

Evolution of Portable Class Library(PCL), .NET Standard replace PCL

(ps. PCL은 프로젝트간에 코드를 공유할 수 있는 다른 방법을 제공한다.)

All three runtimes implements .Net Standard Library

.Net Standard Library is a specification of .Net APIs that have implementations for each runtime.

때문에 다른 runtime에서 만들어진 코드가 다른 runtime에서도 실행가능하다.

(실전 : .NET Standard Library project를 생성해서 다른 runtime project에서 사용가능하다.)

Specific Runtime versions implements specific versions of .NET Standard, thereby implementing a specific set of APIs. 

(ex. .NET Framework 4.5 implements .NET Standard <= 1.1)

.NET Standard versioning

.NET Standard의 각 버전은 이전 버전의 API들을 포함한다.

( => higher version contains more API, lower version are supported by more platforms, so target the lowest version as possible)

(버전별 API검색 : http://docs.microsoft.com/en-us/dotnet/api)

(VS marketplace에 있는 .NET Portability Analyzer로 현재 프로젝트가 어떤 .NET Standard version과 매칭하는지 확인할 수 있다.)

There is no breaking changes between versions.

Once shipped, versions are frozen

+ Shared project template in VS == just links between files and projects, act as file-sharing mechanism between project 

do not result in assemblies when it built, do not provide APIs

(in compiler's view there is no shared project, shared project is contained inside of other project which referencing it. VS specific functionality)

3. Common Infrastructure

Build Tools (compiler like Roslyn, CLR, CoreCLR...)

Languages (C#, F#, VB.NET...)

Runtime Components (Garbage Collection, JIT...)

 - The .Net Framework Toolchain

(The purpose of the toolchain is to turn code into a running application)

MSBuild(build engine provided by MS. sln, .csproj, vbproj...) is a linking pin. MSBuild는 C#, VB.NET code는 Roslyn(.NET Compiler Platform)을, F# code에게는 F# Compiler를 호출한다. 결과는 exe, dll같은 IL이다. Intermediate Language(IL)은 CLR과 같은 runtime에 의해 해석된다.

Common Language Runtime(CLR)은 JIT(just-in-time) compiler를 가지고 있으며, 이 컴파일러로 IL을 해당 OS가 이해할 수 있는 native code로 컴파일한다.

CLR also acts as a host for running the application. Native code lives in memory and is managed by the CLR. It has tools for that like the garbage collector.

이 모든 과정을 개발자가 직접 할 수도 있으나 대부분의 경우 이런 일들은 VS와 같은 도구(MSBuild를 실행하는)가 해결한다.

- The .NET Core Toolchain

MSBuild는 .NET Core에서도 사용되며 IL이 나오기까지의 과정은 .NET Framework와 동일하다.

Core Common Language Runtime(CoreCLR)이 IL을 사용한다. CoreCLR은 .NET Framework CLR과 다르다. 가장 큰 차이점은 CoreCLR은 multiple platform(Mac OS나 Linux 등)에서 실행가능하다는 점이다. CoreCLR도 JIT compiler를 포함하고 있으며 IL을 Window, Mac OS, Linux등의 OS가 사용가능한 Native code로 컴파일한다. 이것은 ASP.NET Core나 콘솔 application의 경우이고 UWP는 조금 다른 경로로 Native code를 생성한다.

UWP app is compiled ahead of time with an ahead-of-time compiler(AOT compiler). 이런 방식을 .NET Native라 부른다.

AOT compiler compiles IL code into native code, but it produce this code as a deployable package instead of compiling the code on demand at runtime. This provide performance benefit.

Just like in the .NET Framework native code is run by the CoreCLR which provide capability like garbage collection.

그러나 .NET Framework CLR과 달리 CoreCLR과 Native Code는 application host process에 의해 load되고 kicked off된다. This process(dotnet.exe) hosts the CoreCLR and makes it run native code. 

- The Mono for Xamrin Toolchain

MSBuild가 조정자로써 동일하게 사용되나 앞전 2개와 달리 C#으로 작성된 프로젝트와 코드만 지원한다. (.sln, csproj)

C# code for Android compiled to IL by Xamarin Compiler. Then Mono Runtime's JIT compiler compiles it to Native code(specific for that android device on demand at runtime). 또한 Mono Runtime은 garbage collection과 같은 runtime service를 제공한다.

C# code for iOS의 경우 Xamarin Compiler가 모든 코드를 C# compiler나 AOT compiler를 이용해 native code로 precompile한다. This is special process that produces a package specifically for iOS containing its native code, which is ARM assembly language. iOS understand this and can run it.

- Summary of Toolchain

4. What to use When? (생략)

Copyright

이 모든 내용은 pluralsight에 있는 Barry Luijbregts라는 분이 올린 The .NET Ecosystem: The Big Picture이라는 강의를 듣고 정리한 것입니다. (https://app.pluralsight.com/library/courses/dotnet-ecosystem-big-picture/table-of-contents)(https://www.azurebarry.com/dot-net-ecosystem-explained) 강의에선 더 자세한 설명과 Demo를 포함하고 있으며, 마지막 What to use When?에 대한 내용 정리는 생략하겠습니다. Pluralsight에서 확인하세요. Microsoft 계정으로 한달간 무료로 Pluralsight의 수많은 강의를 시청하실 수도 있습니다.