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.
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)
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
27.
28.
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 del 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.