Presentation on theme: "Christian Moser User Experience Architect Zühlke Engineering AG www.wpftutorial.net Expression Blend 4 – deep dive."— Presentation transcript:
Christian Moser User Experience Architect Zühlke Engineering AG Expression Blend 4 – deep dive
Microsoft’s vision for XAML (2006) “…using Blend, a designer can access the full expressivity of XAML – layout, graphics, controls, templating and styling, animations, data binding, and basic 3D.” “…A byproduct of XAML's expressivity and comprehensiveness is true separation of user interface and business logic. “ “…XAML rocks because designers can work in tandem with developers…”
A new way of collaboration
Interactive Designer (2006)
Expression Blend (2008)
The ideal collaboration Connector to backend & business logic Provides data and commands to UI Creates a basic user interface Improves the interaction by arranging and replacing controls Creates (or imports) the visual style DeveloperDesigner
Real world collaboration problems The features of Blend (XAML) are too limited. Code is required to build the desired interaction. The classical way of UI programming (using code behind) is not flexible enough. The designer knows too less about Silverlight or WPF or software architecture. What is a control template, dependency property or trigger? Where to place resources?
The developer’s part for a working collaboration: Separation of Logic and Presentation
How to separate logic and view The model must not know about the view Using DataBinding is the best way to synchronize data between the view and the model Binding to the DataContext is very convenient, since it’s the default source. The DataContext is inherited from parent to child There is only one DataContext To access multiple objects you need to aggregate them to one «facade».
Advantages of the MVVM pattern The ViewModel defines a clear data contract for the view Through Properties, Lists and Commands Designers can use the contract to create sample data or binding hints Controls can easily be replaced without touching code Developers can test against the ViewModel without creating the view (using UnitTests).
Designtime vs. Runtime Experience
Typical design time issues At runtime At designtime Wrong size No data
UserControls are not embedded in a parent view Width and Height are not set The root-element constructor is not called Root Element is replaced by the designer ViewModel is not created Controls behave different No mouse and keyboard events Design time extensions loaded At design time
Design time attributes xmlns:d ="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup- compatibility/2006" mc:Ignorable="d" AttributeFunction d:DesignHeight Overrides the height at design time d:DesignWidth Overrides the width at design time d:DataContext Overrides the data context at design time d:DesignData Creates sample data from a XAML file d:DesignInstance Creates an instance of a type
Design width and height Tipp: Blend and Visual Studio provide special handles to set design time size
Generic Sample Data
Sample Data from Type d:DesignData creates a proxy of the specified type and sets the values This brings the following advantages Types without public or default constructor can be created from XAML Readonly properties can be set The designer knows about the interface to support data binding.
Sample Data from Type ProductSampleData.xaml:
More Interactivity with less code
XAML limitations Today designers would need to write code to do basic scenarios like: validation drag&drop starting a storyboard Expression Blend features are limited by the expressiveness of XAML A developer needs to support the designer to build these interactions
Selfmade: Attached Helpers
Disatvantages of this solution No designer support in Expression Blend You need to start from scratch Register a DependencyProperty to hook up the helper Wiring up to events Handle conditions Detaching and disposing
Actions and Behaviors System.Windows.Interactivity.dll
Hunderts of Behaviors out there InvokeCommandAction CallMethodAction GoToStateAction PlaySoundAction PlayMediaAction RevindMediaAction TogglePlayPauseMediaAction HyperlinkAction SetDataStoreValueAction ChangePropertyAction RemoveElementAction CallDataMethod InvokeDataCommand FluidBindPropertyBehavior DataStateBehavior ClippingBehavior GoToNextStateBehavior ShowMessageBoxBehavior MouseDragElementBehavior FluidMoveBehavior FluidMoveSetTagBehavior TextBoxEditMaskBehavior ListBoxAddOne ListBoxRemoveOne
Actions in Action Actions can be attached to any element
How to use Behaviors Behaviors can be attached to any element
Easing Functions Make animations feel more natural
Reasons for Visual State Manager VSM can be attached to any control without code All Silverlight and WPF 4.0 controls support VSM. State transitions are created automatically Supports TransitionEffects and Easing Good support in Expression Blend Additional States can be added States can be switched from externally
Summary The way of programming WPF and Silverlight has become more declarative This makes design tools more powerful Designers can do more without the need of writing code Complexity is hidden within smart reusable extensions like VSM or Behaviors The collaboration between designers and developers can be improved.
Want more information? Meet me at the «Ask the Expert» lounge Contact Information: Christian Moser Zühlke Engineering AG Wiesenstrasse 10a 8952 Schlieren Mail: Blog: Twitter:
The new Iteration Design-Time Attributes: PathListBoxUtils Resources