0
Ricardo Castelhano<br />Dynamic Layout and Transitions for Silverlight 4 with Blend 4<br />WUX214<br />ITech4All<br />rica...
>10 Years Working for a Web with Plugins<br />Adobe Flash Beta-Tester since CS3<br />“Silverlight’ing” since the Beginning...
Dynamic Layout and Transitions for Silverlight 4 with Blend 4<br />“Last Month” (Blend1 c.2007)<br />“Last Week” (Blend2 S...
Dynamic Layout and Transitions for Silverlight 4 with Blend 4<br />“Last Month” (Blend1 c.2007)<br />“Last Week” (Blend2 S...
“Last Month” (Blend1 c.2007)<br />Storyboards<br />
Storyboards<br />
Dynamic Layout and Transitions for Silverlight 4 with Blend 4<br />“Last Month” (Blend1 c.2007)<br />“Last Week” (Blend2 S...
“Last Week” (Blend2 c.2008)<br />States Panel<br />VisualStates<br />VisualStatesGroups<br />
VisualStateManager<br />
Dynamic Layout and Transitions for Silverlight 4 with Blend 4<br />“Last Month” (Blend1 c.2007)<br />“Last Week” (Blend2 S...
“Yesterday” (Blend3 c.2009)<br />Easing Functions<br />Quadratics<br />Cubics<br />Bounce<br />Elastic<br />...<br />
Easing Functions<br />
“Yesterday” (Blend3 c.2009)<br />Behaviors<br />GoToStateAction<br />FluidMoveBehavior<br />
Behaviors - I<br />
“Yesterday” (Blend3 c.2009)<br />FluidLayout<br />
FluidLayout<br />
Dynamic Layout and Transitions for Silverlight 4 with Blend 4<br />“Last Month” (Blend1 c.2007)<br />“Last Week” (Blend2 S...
“Today” (Blend4 “RC” c.2010)<br />LayoutStates<br />AfterLoaded<br />BeforeLoaded<br />BeforeUnloaded<br />
LayoutStates<br />
“Today” (Blend4 “RC” c.2010)<br />TransitionEffect<br />PixelShader HLSL<br />
TransitionEffect<br />
“Today” (Blend4 “RC” c.2010)<br />More Behaviors<br />FluidMoveSetTag<br />
Behaviors - II<br />
Conclusion<br />Storyboard<br />VisualStateManager (VSM)<br />Visual States<br />Layout States<br />Easing Functions<br />...
Other “Blend” Sessions<br />Introdução ao Silverlight 4<br />Dia 20 – Sala3.2 – 12:45<br />Developing Silverlight 4 Soluti...
Ricardo Castelhano<br />Dynamic Layout and Transitions for Silverlight 4 with Blend 4<br />WUX214<br />ITech4All<br />rica...
Upcoming SlideShare
Loading in...5
×

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

2,481

Published on

My presentation slides from the Microsoft TechDays2010 Portugal event.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,481
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
28
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Storyboards are the foundation for all the upcoming Blend versions evolutionTime-Based AnimationsAdvantages:If your PC has a good CPU and GPU, your animation will perform smoothly ...If your PC has a poor CPU or GPU, your animation will perform sloopy ...BUT any of the situations above will perform on the right time, with the right duration...lets say 2seconds for example.Silverlight has more available types of animation, but it as to be “hardcoded” in XAML or CodeBehind (Frame-Based for example)On a “FromTo” animation you dont have to specify a starting point, just the end point is required. Therefore, you may call multiple Storyboards in sequence and your animation will have the starting point in the “actual” object positionAt this time, the only Easing possibility was via KeySplineTo trigger the Storyboards we had to write some CodeBehind
  • Perform a FadeIn – FadeOut transition between two imagesUse the KeySpline to add some EaseIn or EaseOutShow how to trigger a Storyboard with CodeBehind
  • VisualStateManager Engine (VMS) lets you edit “Visual States” of you ControlEasily create new “VisualStateGroups” and new “VisualStates”We may define the transition durationAt this period, CodeBehind was needed to trigger the Transitions
  • Create a new Custom StateGroup with 2 VisualStatesWireUp a MouseEnter and a MouseLeave event with CodeBehindWithout Transition (HoldIn)With TransitionWireUp a MouseClick event for a “discrete” property like “Visibility”Show that we couldn’t perform a transition on those type of properties
  • Up to this time, we could implement some Easing “effects” like EaseIn, EaseOut, EaseInOut, EaseOutInBut Blend3 included some cool “Easing Functions” like Bounces and ElasticsThis are extensible, so you may develop your own “easing functions”Easing Functions are a property of a KeyframeEasing Functions are also applyable to a State in VSM
  • Finally we could trigger Storyboards and VisualStateManager without the need of CodeBehind:GoToStateActionControlStoryboardActionUnder the hood its a WritableBitmap “magic”. The Silverlight player will take a “snapshot” of the 1st position and the 2nd position of a given object, lets say a WrapPanel childrens and when you are increasing your Collection they have to switch rows or columns. With FluidMoveBehavior, they will perform an animation between the “old place” to the “new place”.FluidMoveBehavior
  • Pick the VisualStateManager Demo and WireUp without CodeBehindCreate a WrapPanel with multiple objects and have attention to let your WrapPanel be resizable. Apply the FluidMoveBehavior to the WrapPanel childrens. Build the solution and try to resize the browser.
  • FluidLayoutEven the “discrete” properties like “Visibility” may be animated. Under the hood its a WritableBitmap “magic”. The Silverlight player will take a “snapshot” of the 1st State and the 2nd State and perform a transition between those two.
  • Apply it to the VisualStateManager Demo in the “Visibility” propertyBuild a simulation of a “dynamic” layout
  • Nowadays its possible to change the LayoutStates. These are new States for DataControls like the ListBox. You are able to implement diferent visuall layouts for items that weren’t yet loaded (BeforeLoaded), that were already loaded (AfterLoaded) and that weren’t yet unloaded (BeforeUnloaded)
  • Create a ObservableCollection and wireup two buttons. One to add and one to remove from the ObservableCollection. Implement a DataBinding between this ObservableCollection and a WrapPanel.Create a Template for the “Generated Item Container” and play around with the new States.
  • Transition Effects are PixelShaders “out of the box” therefore you may build new ones with HLSL
  • Apply some Transition effects in an image transition
  • This Behavior works well in a Master-Detail situation but you may find other ways to use it easelly. It lets you “mark” the position were the DataContext were “clicked” and performs an animation to the “Detail Region”. Use it with the FluidMoveBehavior.
  • Please provide feedback !!! That’s the only way to know what you would like to see on a future session about Blend and to improve myself as a speaker.Thank you.
  • Transcript of "Dynamic layout and transitions with expression blend 4 (30 Abr 2010)"

    1. 1. Ricardo Castelhano<br />Dynamic Layout and Transitions for Silverlight 4 with Blend 4<br />WUX214<br />ITech4All<br />ricardo.castelhano@itech4all.com<br />@RicCastelhano<br />http://www.ricardocastelhano.com<br />
    2. 2. >10 Years Working for a Web with Plugins<br />Adobe Flash Beta-Tester since CS3<br />“Silverlight’ing” since the Beginning<br />Blogger & Tweeterian <br />(XAMLPT / RIAPT / AUG / PontoNetPT)<br />Partner & Consultant @ ITech4All<br />Ricardo Castelhano<br />
    3. 3. Dynamic Layout and Transitions for Silverlight 4 with Blend 4<br />“Last Month” (Blend1 c.2007)<br />“Last Week” (Blend2 SP1 c.2008)<br />“Yesterday” (Blend3 c.2009)<br />“Today” (Blend4 “RC” c.2010)<br />
    4. 4. Dynamic Layout and Transitions for Silverlight 4 with Blend 4<br />“Last Month” (Blend1 c.2007)<br />“Last Week” (Blend2 SP1 c.2008)<br />“Yesterday” (Blend3 c.2009)<br />“Today” (Blend4 “RC” c.2010)<br />
    5. 5. “Last Month” (Blend1 c.2007)<br />Storyboards<br />
    6. 6. Storyboards<br />
    7. 7. Dynamic Layout and Transitions for Silverlight 4 with Blend 4<br />“Last Month” (Blend1 c.2007)<br />“Last Week” (Blend2 SP1 c.2008)<br />“Yesterday” (Blend3 c.2009)<br />“Today” (Blend4 “RC” c.2010)<br />
    8. 8. “Last Week” (Blend2 c.2008)<br />States Panel<br />VisualStates<br />VisualStatesGroups<br />
    9. 9. VisualStateManager<br />
    10. 10. Dynamic Layout and Transitions for Silverlight 4 with Blend 4<br />“Last Month” (Blend1 c.2007)<br />“Last Week” (Blend2 SP1 c.2008)<br />“Yesterday” (Blend3 c.2009)<br />“Today” (Blend4 “RC” c.2010)<br />
    11. 11. “Yesterday” (Blend3 c.2009)<br />Easing Functions<br />Quadratics<br />Cubics<br />Bounce<br />Elastic<br />...<br />
    12. 12. Easing Functions<br />
    13. 13. “Yesterday” (Blend3 c.2009)<br />Behaviors<br />GoToStateAction<br />FluidMoveBehavior<br />
    14. 14. Behaviors - I<br />
    15. 15. “Yesterday” (Blend3 c.2009)<br />FluidLayout<br />
    16. 16. FluidLayout<br />
    17. 17. Dynamic Layout and Transitions for Silverlight 4 with Blend 4<br />“Last Month” (Blend1 c.2007)<br />“Last Week” (Blend2 SP1 c.2008)<br />“Yesterday” (Blend3 c.2009)<br />“Today” (Blend4 “RC” c.2010)<br />
    18. 18. “Today” (Blend4 “RC” c.2010)<br />LayoutStates<br />AfterLoaded<br />BeforeLoaded<br />BeforeUnloaded<br />
    19. 19. LayoutStates<br />
    20. 20. “Today” (Blend4 “RC” c.2010)<br />TransitionEffect<br />PixelShader HLSL<br />
    21. 21. TransitionEffect<br />
    22. 22. “Today” (Blend4 “RC” c.2010)<br />More Behaviors<br />FluidMoveSetTag<br />
    23. 23. Behaviors - II<br />
    24. 24. Conclusion<br />Storyboard<br />VisualStateManager (VSM)<br />Visual States<br />Layout States<br />Easing Functions<br />Fluid Layout<br />Transition Effects<br />
    25. 25.
    26. 26. Other “Blend” Sessions<br />Introdução ao Silverlight 4<br />Dia 20 – Sala3.2 – 12:45<br />Developing Silverlight 4 Solutions with Blend 4<br />Dia 20 – Sala2.5 – 12:45<br />SketchFlow: Do protótipo à Produção<br />Dia 20 - Sala2.5 - 14:15<br />SketchFlow no Desenho de Interfaces Web<br />Dia 20 – Sala20/10 - 15:15<br />Utilizando SketchFlow na Construcção de sites em Silverlight<br />Dia 20 – Sala20/10 - 15:15<br />Flash Skills Applied to Silverlight Design and Development<br />Dia 21 - Sala2.4 - 18:15 <br />Silverlight: Extensibility Framework + Behaviors<br />Dia 22 - Sala2.3 - 16:40<br />
    27. 27.
    28. 28.
    29. 29. Ricardo Castelhano<br />Dynamic Layout and Transitions for Silverlight 4 with Blend 4<br />WUX214<br />ITech4All<br />ricardo.castelhano@itech4all.com<br />@RicCastelhano<br />http://www.ricardocastelhano.com<br />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×