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

Editor's Notes

• #6: 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
• #7: Perform a FadeIn – FadeOut transition between two imagesUse the KeySpline to add some EaseIn or EaseOutShow how to trigger a Storyboard with CodeBehind
• #9: 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
• #10: 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
• #12: 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
• #14: 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
• #15: 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.
• #16: 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.
• #17: Apply it to the VisualStateManager Demo in the “Visibility” propertyBuild a simulation of a “dynamic” layout
• #19: 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)
• #20: 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.
• #21: Transition Effects are PixelShaders “out of the box” therefore you may build new ones with HLSL
• #22: Apply some Transition effects in an image transition
• #23: 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.
• #30: 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.