View
0
Download
0
Category
Preview:
Citation preview
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
Recommended