christian moser user experience architect zühlke engineering ag expression blend 4 – deep dive

Christian MoserUser Experience ArchitectZühlke Engineering AGwww.wpftutorial.net

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…”

http://windowsclient.net/wpf/white-papers/thenewiteration.aspx

A new way of collaboration

Interactive Designer (2006)

Expression Blend (2008)

Expression Studio

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

Developer Designer

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?

SampleProject

digitalworld.

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».

Model-View-ViewModel II

DataContext

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 hintsControls can easily be replaced without touching codeDevelopers can test against the ViewModel without creating the view (using UnitTests).

Demo

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 designerViewModel is not created

Controls behave differentNo mouse and keyboard eventsDesign time extensions loaded

At design time

Design time attributesxmlns:d ="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup- compatibility/2006"

mc:Ignorable="d"

Attribute Function

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<UserControl xmlns="http://schemas.microsoft.com/..." xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml" d:DesignWidth="640" d:DesignHeight="480" ><UserControl />

Tipp: Blend and Visual Studio provide special handles to set design time size

Generic Sample Data<Application.Resources> <SampleData:ProductSampleData x:Key="data" d:IsDataSource="True"/></Application.Resources>

<Border d:DataContext="{Binding Source={StaticResource data}}" > <ListBox ItemsSource="{Binding Products}" /></Border>

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 XAMLReadonly properties can be setThe designer knows about the interface to support data binding.

Sample Data from TypeProductSampleData.xaml:

<l:Product xmlns:l="clr-namespace:DigiShop" Name="HP Notebook" Description= "This powerful device provides…" Price="499.90"> <l:Product.Category> <l:Category Name="Notebooks"/> </l:Product.Category></l:Product>

<StackPanel DataContext="{Binding Products.CurrentItem}" d:DataContext="{d:DesignData ProductSampleData.xaml}" > <Image Source="{Binding Picture}" /> <TextBlock Text="{Binding Name}" /></StackPanel>

Demo

More Interactivity with

less code

XAML limitations

Today designers would need to write code to do basic scenarios like:

validationdrag&dropstarting a storyboard

Expression Blend features are limited by the expressiveness of XAMLA developer needs to support the designer to build these interactions

Selfmade: Attached Helpers

<TextBox l:TextBoxHelper.UpdateOnEnter="True" />

Disatvantages of this solution

No designer support in Expression BlendYou need to start from scratch

Register a DependencyProperty to hook up the helperWiring up to eventsHandle conditionsDetaching and disposing

Actions and Behaviors

System.Windows.Interactivity.dll

Hunderts of Behaviors out thereInvokeCommandAction

CallMethodAction

GoToStateAction

PlaySoundAction

PlayMediaAction

RevindMediaAction

TogglePlayPauseMediaAction

HyperlinkAction

SetDataStoreValueAction

ChangePropertyAction

RemoveElementAction

CallDataMethod

InvokeDataCommand

FluidBindPropertyBehavior

DataStateBehavior

ClippingBehavior

GoToNextStateBehavior

ShowMessageBoxBehavior

MouseDragElementBehavior

FluidMoveBehavior

FluidMoveSetTagBehavior

TextBoxEditMaskBehavior

ListBoxAddOne

ListBoxRemoveOne

http://expressionblend.codeplex.com/

<Image Source="{Binding Picture}">

<i:Interaction.Triggers>

<i:EventTrigger EventName="MouseLeftButtonDown"><i:InvokeCommandAction

Command="{Binding AddToCartCommand}"/> </i:EventTrigger>

</i:Interaction.Triggers>

</Image>

Actions in Action

Actions can be attached to any element

<Image Source="digitalworld.png" > <i:Interaction.Behaviors>

<ei:MouseDragElementBehavior/> </i:Interaction.Behaviors></Image>

How to use Behaviors

Behaviors can be attached to any element

public class MyBehavior : Behavior<FrameworkElement>{ protected override void OnAttached() { base.OnAttached(); AssociatedObject.MouseEnter += OnMouseEnter; }  protected override void OnDetaching() { base.OnDetaching(); AssociatedObject.MouseEnter -= OnMouseEnter; }  private static void OnMouseEnter(object sender, MouseEventArgs e) { MessageBox.Show("It works!"); }}

Create your own behavior

Demo

States and Transitions

States of controls

Button(State Machine)

States using Triggers in WPF<Style x:Key="MyButtonStyle" TargetType="{x:Type Button}"> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="White" /> </Trigger> <Trigger Property="IsPressed" Value="True"> <Setter Property="Background" Value="Gray" /> </Trigger> <Trigger Property="IsEnabled" Value="False"> <Setter Property="Opacity" Value="0.5" /> </Trigger> </Style.Triggers></Style>

Visual State Manager

All Silverlight and WPF4 controls support states[TemplateVisualState(Name = "ContentFocused", GroupName = "FocusStates")] [TemplateVisualState(Name = "MouseOver", GroupName = "CommonStates")] [TemplateVisualState(Name = "Focused", GroupName = "FocusStates")] [TemplateVisualState(Name = "Checked", GroupName = "CheckStates")] [TemplateVisualState(Name = "Unchecked", GroupName = "CheckStates")] [TemplateVisualState(Name = "Indeterminate", GroupName = "CheckStates")] [TemplateVisualState(Name = "Pressed", GroupName = "CommonStates")] [TemplateVisualState(Name = "Disabled", GroupName = "CommonStates")] [TemplateVisualState(Name = "Unfocused", GroupName = "FocusStates")] [TemplateVisualState(Name = "Normal", GroupName = "CommonStates")] public class CheckBox : ToggleButton{ ....}

Easing Functions

<DoubleAnimationUsingKeyFrames … ><EasingDoubleKeyFrame KeyTime="0:0:3"

Value="370"><EasingDoubleKeyFrame.EasingFunction>

<BounceEase EasingMode="EaseOut"/>

</EasingDoubleKeyFrame.EasingFunction></EasingDoubleKeyFrame>

</DoubleAnimationUsingKeyFrames>

Make animations feel more natural

Reasons for Visual State Manager

VSM can be attached to any control without codeAll Silverlight and WPF 4.0 controls support VSM.State transitions are created automaticallySupports TransitionEffects and EasingGood support in Expression BlendAdditional States can be addedStates can be switched from externally

Demo

Summary

The way of programming WPF and Silverlight has become more declarativeThis makes design tools more powerfulDesigners can do more without the need of writing codeComplexity is hidden within smart reusable extensions like VSM or BehaviorsThe 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 AGWiesenstrasse 10a8952 Schlieren +41 79 261 68 14

Mail: moc@zuehlke.com Blog: www.wpftutorial.net Twitter: @moser_christian

© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.

The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after

the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.