Dynamic layout and transitions with expression blend 4 (30 Abr 2010)
•Transferir como PPTX, PDF•
1 gostou•1,083 visualizações
Ricardo Castelhano will present on dynamic layout and transitions in Silverlight 4 using Blend 4. The presentation will cover features introduced in previous versions of Blend over the past 3 years, including storyboards, visual states, behaviors, and fluid layout. It will focus on new capabilities in Blend 4, such as layout states, transition effects, and additional behaviors. The goal is to demonstrate how to create animated, dynamic UIs using the tools in Blend 4.
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Destaque
Semelhante a Dynamic layout and transitions with expression blend 4 (30 Abr 2010)
Semelhante a Dynamic layout and transitions with expression blend 4 (30 Abr 2010) (20)
Mais de Ricardo Castelhano
Mais de Ricardo Castelhano (10)
Último
Último (20)
Dynamic layout and transitions with expression blend 4 (30 Abr 2010)
- 1. Ricardo Castelhano Dynamic Layout and Transitions for Silverlight 4 with Blend 4 WUX214 ITech4All ricardo.castelhano@itech4all.com @RicCastelhano http://www.ricardocastelhano.com
- 2. >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
- 3. 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)
- 4. 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)
- 5. “Last Month” (Blend1 c.2007) Storyboards
- 6. Storyboards
- 7. 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)
- 8. “Last Week” (Blend2 c.2008) States Panel VisualStates VisualStatesGroups
- 10. 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)
- 11. “Yesterday” (Blend3 c.2009) Easing Functions Quadratics Cubics Bounce Elastic ...
- 12. Easing Functions
- 13. “Yesterday” (Blend3 c.2009) Behaviors GoToStateAction FluidMoveBehavior
- 14. Behaviors - I
- 15. “Yesterday” (Blend3 c.2009) FluidLayout
- 16. FluidLayout
- 17. 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)
- 18. “Today” (Blend4 “RC” c.2010) LayoutStates AfterLoaded BeforeLoaded BeforeUnloaded
- 19. LayoutStates
- 20. “Today” (Blend4 “RC” c.2010) TransitionEffect PixelShader HLSL
- 21. TransitionEffect
- 22. “Today” (Blend4 “RC” c.2010) More Behaviors FluidMoveSetTag
- 23. Behaviors - II
- 24. Conclusion Storyboard VisualStateManager (VSM) Visual States Layout States Easing Functions Fluid Layout Transition Effects
- 26. 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
- 29. Ricardo Castelhano Dynamic Layout and Transitions for Silverlight 4 with Blend 4 WUX214 ITech4All ricardo.castelhano@itech4all.com @RicCastelhano http://www.ricardocastelhano.com
Notas do Editor
- 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.