29
Ricardo Castelhano Dynamic Layout and Transitions for Silverlight 4 with Blend 4 WUX214 ITech4All [email protected] @RicCastelhano http://www.ricardocastelhano.com

Dynamic layout and transitions with expression blend 4 (30 Abr 2010)

Embed Size (px)

DESCRIPTION

My presentation slides from the Microsoft TechDays2010 Portugal event.

Citation preview

Page 1: Dynamic layout and transitions with expression blend 4 (30 Abr 2010)

Ricardo Castelhano

Dynamic Layout and Transitions for Silverlight 4 with Blend 4

WUX214

[email protected]

@RicCastelhano

http://www.ricardocastelhano.com

Page 2: Dynamic layout and transitions with expression blend 4 (30 Abr 2010)

• >10 Years Working for a Web with Plugins

• Adobe Flash Beta-Tester since CS3

• “Silverlight’ing” since the Beginning

• Blogger & Tweeterian • (XAMLPT / RIAPT / AUG / PontoNetPT)

• Partner & Consultant @ ITech4All

Ricardo Castelhano

Page 3: Dynamic layout and transitions with expression blend 4 (30 Abr 2010)

Dynamic Layout and Transitions for Silverlight 4 with Blend 4

• “Last Month” (Blend1 c.2007)

• “Last Week” (Blend2 SP1 c.2008)

• “Yesterday” (Blend3 c.2009)

• “Today” (Blend4 “RC” c.2010)

Page 4: Dynamic layout and transitions with expression blend 4 (30 Abr 2010)

Dynamic Layout and Transitions for Silverlight 4 with Blend 4

• “Last Month” (Blend1 c.2007)

• “Last Week” (Blend2 SP1 c.2008)

• “Yesterday” (Blend3 c.2009)

• “Today” (Blend4 “RC” c.2010)

Page 5: Dynamic layout and transitions with expression blend 4 (30 Abr 2010)

“Last Month” (Blend1 c.2007)

• Storyboards

Page 6: Dynamic layout and transitions with expression blend 4 (30 Abr 2010)

DemoStoryboards

Page 7: Dynamic layout and transitions with expression blend 4 (30 Abr 2010)

Dynamic Layout and Transitions for Silverlight 4 with Blend 4

• “Last Month” (Blend1 c.2007)

• “Last Week” (Blend2 SP1 c.2008)

• “Yesterday” (Blend3 c.2009)

• “Today” (Blend4 “RC” c.2010)

Page 8: Dynamic layout and transitions with expression blend 4 (30 Abr 2010)

“Last Week” (Blend2 c.2008)

• States Panel• VisualStates• VisualStatesGroups

Page 9: Dynamic layout and transitions with expression blend 4 (30 Abr 2010)

DemoVisualStateManager

Page 10: Dynamic layout and transitions with expression blend 4 (30 Abr 2010)

Dynamic Layout and Transitions for Silverlight 4 with Blend 4

• “Last Month” (Blend1 c.2007)

• “Last Week” (Blend2 SP1 c.2008)

• “Yesterday” (Blend3 c.2009)

• “Today” (Blend4 “RC” c.2010)

Page 11: Dynamic layout and transitions with expression blend 4 (30 Abr 2010)

“Yesterday” (Blend3 c.2009)

• Easing Functions• Quadratics• Cubics• Bounce• Elastic• ...

Page 12: Dynamic layout and transitions with expression blend 4 (30 Abr 2010)

DemoEasing Functions

Page 13: Dynamic layout and transitions with expression blend 4 (30 Abr 2010)

“Yesterday” (Blend3 c.2009)

• Behaviors• GoToStateAction• FluidMoveBehavior

Page 14: Dynamic layout and transitions with expression blend 4 (30 Abr 2010)

DemoBehaviors - I

Page 15: Dynamic layout and transitions with expression blend 4 (30 Abr 2010)

“Yesterday” (Blend3 c.2009)

• FluidLayout

Page 16: Dynamic layout and transitions with expression blend 4 (30 Abr 2010)

DemoFluidLayout

Page 17: Dynamic layout and transitions with expression blend 4 (30 Abr 2010)

Dynamic Layout and Transitions for Silverlight 4 with Blend 4

• “Last Month” (Blend1 c.2007)

• “Last Week” (Blend2 SP1 c.2008)

• “Yesterday” (Blend3 c.2009)

• “Today” (Blend4 “RC” c.2010)

Page 18: Dynamic layout and transitions with expression blend 4 (30 Abr 2010)

“Today” (Blend4 “RC” c.2010)

• LayoutStates• AfterLoaded• BeforeLoaded• BeforeUnloaded

Page 19: Dynamic layout and transitions with expression blend 4 (30 Abr 2010)

DemoLayoutStates

Page 20: Dynamic layout and transitions with expression blend 4 (30 Abr 2010)

“Today” (Blend4 “RC” c.2010)

• TransitionEffect• PixelShader HLSL

Page 21: Dynamic layout and transitions with expression blend 4 (30 Abr 2010)

DemoTransitionEffect

Page 22: Dynamic layout and transitions with expression blend 4 (30 Abr 2010)

“Today” (Blend4 “RC” c.2010)

• More Behaviors• FluidMoveSetTag

Page 23: Dynamic layout and transitions with expression blend 4 (30 Abr 2010)

DemoBehaviors - II

Page 24: Dynamic layout and transitions with expression blend 4 (30 Abr 2010)

Conclusion

• Storyboard• VisualStateManager (VSM)• Visual States• Layout States

• Easing Functions• Fluid Layout• Transition Effects

Page 25: Dynamic layout and transitions with expression blend 4 (30 Abr 2010)

Q & A

Page 26: Dynamic layout and transitions with expression blend 4 (30 Abr 2010)

Other “Blend” Sessions• Introdução ao Silverlight 4

• Dia 20 – Sala3.2 – 12:45

• Developing Silverlight 4 Solutions with Blend 4• Dia 20 – Sala2.5 – 12:45

• SketchFlow: Do protótipo à Produção• Dia 20 - Sala2.5 - 14:15

• SketchFlow no Desenho de Interfaces Web• Dia 20 – Sala20/10 - 15:15

• Utilizando SketchFlow na Construcção de sites em Silverlight• Dia 20 – Sala20/10 - 15:15

• Flash Skills Applied to Silverlight Design and Development• Dia 21 - Sala2.4 - 18:15

• Silverlight: Extensibility Framework + Behaviors• Dia 22 - Sala2.3 - 16:40

Page 28: Dynamic layout and transitions with expression blend 4 (30 Abr 2010)
Page 29: Dynamic layout and transitions with expression blend 4 (30 Abr 2010)

Ricardo Castelhano

Dynamic Layout and Transitions for Silverlight 4 with Blend 4

WUX214

[email protected]

@RicCastelhano

http://www.ricardocastelhano.com