YoungWook Kim Enterprise Developer EvangelistDPE/Microsoft KOREA yowkim@microsoft.com

기업환경을 위한 새로운차별화 전략

Enterprise RIASilverlight 2 Development

기획자, 디자이너, 개발자가함께 하는 오케스트라

Silverlight 2

오케스트라

PMDeveloper

Designer

UX PROJECT TEAM

역할 인원수

Team Manager 팀장

Design Manager 디자인 메너저

Planner 기획자

Software Developer 개발자

Interactive Designer 인터랙티브 디자이너

Illustrator 일러스터 디자이너

Microsoft UX Tools

Expression Design Expression Blend

Expression Encoder

Expression Web

Microsoft Expression Studio

Microsoft UX Workflow

Expression Blend

Office

Visual Studio 2008

Expression Design

Expression Encoder

Expression Web

가벼운 강력함

Silverlight 2Applicatioin Model

Install

한번만 설치

자동 업그레이드

설치 후 바로 사용가능

Instantiation

<OBJECT TAG>

Easier to customize

Silverlight.js

Scriptable control

Silverlight 2 Runtime

Button b1 = new Button();b1.Content = "OK";b1.Background = new SolidColorBrush(Colors.LightBlue);b1.Width = 100;

Compile and Run

<Button Width="100"> OK<Button.Background>LightBlue

</Button.Background></Button>

Load, Parse, Display

01010100101010

BAMLParse Load, Display

Button b1 = new Button();b1.Content = "OK";b1.Background = new SolidColorBrush(Colors.LightBlue);b1.Width = 100;

<Button Width="100"> OK<Button.Background>LightBlue

</Button.Background></Button>

„Code Behind‟

Class

Partial ClassPublic Button b1;Public Button b2;

Load (“My.Baml”)

01010100101010

My.BamlParse & Generate

Compile and Run

5. Expression Studio& Visual Studio 2008

MyApp.xap

Application Package

. <media> as

content

XAML

<media> as resou

rces

XAML

code file(.cs ,.vb)code file(.cs ,.vb)code file(.cs ,.vb)

MyApp.dll

Business.dll

Business.dll

Cs.exe

Manifest.xml

Secure/Extended sandbox

Cross-domain

Isolated Storage

Sockets

OpenFileDialog

Silverlight 2 Security

Application_UnhandledException

Exception is thrown

Plug-in’s OnError

e.Handled = true; e.Handled = false;

e.Handled = true;

e.Handled = false;

ImageFailed is fired

ImageFailed Handler

Error Handling

Silverlight DEMO

Infragistics CRM http://labs.infragistics.com/silverlight/faceout/

Componetone Stock Portfoliohttp://labs.componentone.com/Sapphire/?demo=stock

Microsoft Health CUIhttp://www.mscui.com/Showcase/Demonstrators.aspx

Woodgrovo Financialhttp://www.cookingwithxaml.com/meals/financials/default.html

기본 컴퍼넌트와 상용 컴퍼넌트

Silverlight 2 Components

• Microsoft ships the usual suspects

With source

Modeled after WPF

Extensible

Rich partner ecosystem for domain specific controls

Controls

Controls

demo

Control Tree

Styling •Set existing properties•Centralizes change•Maximizes reuse

Skinning• Define parts

• Creative freedom

• Visual customization without code

Control Customization

Control ecosystem

Window Gauges RichText Box Column ComboBox

Grid Cube NumericBox Upload Line chart

ProgressBar Expander Column Chart Datagrid Menu

Bar Graph Treeview MessageBox Bar Pie Chart

…

Animation 집중 탐구

Technical Update

DispatcherTimer

Interval 속성에 지정된 시간마다 Tick Event를발생시켜 준다.Start(), Stop()을 통해서 타이머를 시작, 종료할 수 있다. IsEnabled 속성을 통해서 사용여부를 지정할수 있다.

DoubleAnimation

DispatcherTimer tmr = new DispatcherTimer();tmr.Interval = TimeSpan.FromSeconds(0.1);tmr.Tick += TimerOnTick;tmr.Start();

void TimeOnTick(object sender, EventArgs e){

btn.FontSize += 2;}

DispatcherTimer

DEMO

Demo 1

XAML의 Animation

항상 Trigger를 사용한다.

거의 EventTrigger를 사용한다.

XAML은 항상 StoryBoard를 사용한다.

XAML의 Animation

Trigger는 3개의 속성을 지정해야 한다.

SourceName: Event가 발생하는 객체RoutedEvent: 처리해야 할 이벤트Action: Event시 할 행동

Trigger 블록은 여러 개의 Event를 하위에 둘 수 있다.

XAML의 Animation

<Button FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center">

Expanding Button<Button.Triggers>

<EventTrigger RoutedEvent="Button.Click"><BeginStoryboard>

<Storyboard TargetProperty="FontSize"><DoubleAnimation From="12" To="48"

Duration="0:0:2" FillBehavior="Stop" /></Storyboard>

</BeginStoryboard></EventTrigger>

</Button.Triggers></Button>

SourceName

TriggerRoutedEvent

Action

Dependency Property & Event Routing

DendencyProperty

의존 속성이라고 번역한다.

속성들이 서로 의존되고 상속되는 형태를 의미한다.

DenpencyProperty

DEMO

DependencyProprty

WPF Animation I

XAML의 Animation

StoryBoard는 하위에 여러 개의 Timeline을가질 수 있다.

Trigger가 객체의 일부분일 경우 암묵적으로 소스는자기 자신을 의미한다.

StoryBoard는 여러가의 하위 Timeline을지원하기 위해서 Children 속성을 가지고 있다.

Trigger

DEMO

Demo 2Demo 3

DoubleAnimation

Duration을 이용하면 총 애니메이션 시간을 정할수 있다.

From과 To를 이용해서 애니메이션의 시작과마침 값을 지정할 수 있다.

FillBehavior 속성을 이용하면 애니메이션이 끝난후의 동작을 지정할 수 있다.HoldEnd : 마지막 상태 유지Stop: 초기 상태로 돌아감.

DoubleAnimation

StoryBoard.TargetName을 사용해서 대상객체를 지정한다.

DoubleAnimation

DoubleAnimation anima = new DoubleAnimation();anima.Duration = new Duration(TimeSpan.FromSeconds(2));anima.From = initFontSize;anima.To = maxFontSize;anima.FillBehavior = FillBehavior.Stop;

btn.BeginAnimation(Button.FontSizeProperty, anima);

DoubleAnimation

<Storyboard><DoubleAnimation Storyboard.TargetName="btn2"

Storyboard.TargetProperty="FontSize“From="12" To="48"

Duration="0:0:2"FillBehavior="Stop" />

</Storyboard>

DoubleAnimation

DEMO

Demo 2

DoubleAnimation

StoryBoard는 하위에 여러 개의 Timeline을가질 수 있다.

Trigger가 객체의 일부분일 경우 암묵적으로 소스는자기 자신을 의미한다.

StoryBoard는 여러가의 하위 Timeline을지원하기 위해서 Children 속성을 가지고 있다.

StoryBoard

DEMO

Demo 4

Duration의 지정법

Duration = 0:0:2.5

Duration = 0:3

Duration = 7

Duration = 4.12:7

Animation 값 설정

Animation의 값은 From과 To에 의해 결정된다.From=“48” To=“12”

By를 이용할 수 있다.By=“100”

From만 설정할 수도 있다.

IsAdditive

IsAdditive 속성을 사용하면 To, By에서 지정한값들이 누적된다.

From=“50”By=“100” IsAdditive=“True”위와 같은 경우 초기값이 12라면

62 11262 16262 212

.

.

.

AutoReverse

애니메이션의 역방향 실행 여부를 결정한다.

AutoReverse = “true”.

RepeatBehavior

RepeatBehavior는 지정된 애니메이션의 반복을지정할 때 사용한다.

RepeatBehavior = “3x”RepeatBehavior = “1.5x”RepeatBehavior = “0:0:10”

RepeatBehavior = “Forever

RepeatBehavior

RepeatBehavior가 forever인 경우에는FillBehavior는 의미가 없다.

IsCumulative속성을 True로 설정하면 애니메이션반복시 마다 값이 누적되게 할 수 있다.

BeginTime

애니메이션의 시작 시간을 설정하려고 할 경우BeginTime을 사용할 수 있다.

BeginTime=“0:0:2”

StoryBoard DEMO

Demo 5Demo 6Demo 7

SpeedRate

애니메이션의 속도를 조절하려고 할 경우SpeedRate 속성을 사용할 수 있다.

<Storyboard SpeedRate=“1.5”>

StoryBoard DEMO

Demo 7Demo 8

SpeedRate

애니메이션의 속도를 조절하려고 할 경우SpeedRate 속성을 사용할 수 있다.

<Storyboard SpeedRate=“1.5”>

HandoffBehavior

애니메이션의 관성을 지정한다.

<BeginStoryboardHandoffBehavior=“Compose”>

StoryBoard DEMO

Demo 9Demo 11

WPF Animation II

ContorllableStoryboardAction

애니메이션을 제어할 수 있게 해 준다.

PauseStorBoardRemoveStoryboardResumeStorybaoardSeekStoryboardSetStoryBoardSpeedRateSkipStoryboardToFillStopStoryboard

Animation Control

DEMO

Demo 7Demo 8

RenderTransformLayoutTransform

RenderTramsform은 UI컨트롤 단위의애니메이션을 지정할 수 있다.

LayoutTransform은 Layout 컨트롤 단위의애니메이션을 지정할 수 있다.

Render vs Layout Tramsform

DEMO

Demo 7Demo 8

3D같은 2D 문자 효과

적절한 효과를 사용하면 3D와 비슷한 효과를볼 수 있다.

Scale을 Tramsform 마이너스 값으로Transform하게 되면 객체가 뒤집히는 것 처럼보인다.

문자 애니메이션

DEMO

Demo 15

Gradient Animation

특정 포인트를 변화시킬 때는 PointAnimation을사용한다.

ColorAminiation은 이름 그대로 Color값을변화시킬 때 사용할 수 있다.

Gradient Animation

DEMO

Demo 16

여러 개의 객체를 이어서 애니메이션 하기

시작 객체와 마지막 객체의 효과만 맞추면 된다.

시작 객체

마지막 객체

최면술 예제

DEMO

Demo 17

시계 예제

적절한 애니메이션을 주면 쉽게 시계를 만들 수 있다.

초 : 60초에 360도 회전

시: 24시간에 360도 회전

분 :1시간에 360도 회전

시계 예제

storyboard.BeginTime = -DateTime.Now.TimeOfDay;

초 : 60초에 360도 회전

시: 24시간에 360도 회전

분 :1시간에 360도 회전

시계

DEMO

Demo 18

Thanks you