Transcript Expression Blend 4 – deep dive Christian Moser User Experience Architect Zühlke Engineering AG www.wpftutorial.net.

Expression Blend 4 –
deep dive
Christian Moser
User Experience Architect
Zühlke Engineering AG
www.wpftutorial.net
Microsoft’s vision for XAML (2006)
“…XAML rocks because designers can
work in tandem with developers…”
“…A byproduct of XAML's expressivity and
comprehensiveness is true separation of
user interface and business logic. “
“…using Blend, a designer can access
the full expressivity of XAML – layout,
graphics, controls, templating and
styling, animations, data binding, and
basic 3D.”
 http://windowsclient.net/wpf/white-papers/thenewiteration.aspx
A new way of collaboration
Interactive Designer (2006)
Expression Blend (2008)
Expression Studio
The ideal collaboration
Developer
 Connector to backend &
business logic
 Provides data and
commands to UI
 Creates a basic user
interface
Designer
 Improves the interaction
by arranging and
replacing controls
 Creates (or imports) the
visual style
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».
Model-View-ViewModel II
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
At design time
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
Design time attributes
xmlns:d ="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markupcompatibility/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 XAML
Readonly properties can be set
The designer knows about the interface to support data
binding.
Sample Data from Type
ProductSampleData.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>
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
<TextBox l:TextBoxHelper.UpdateOnEnter="True" />
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
http://expressionblend.codeplex.com/
InvokeDataCommand
FluidBindPropertyBehavior
DataStateBehavior
ClippingBehavior
GoToNextStateBehavior
ShowMessageBoxBehavior
MouseDragElementBehavior
FluidMoveBehavior
FluidMoveSetTagBehavior
TextBoxEditMaskBehavior
ListBoxAddOne
ListBoxRemoveOne
Actions in Action
Actions can be attached to any element
<Image Source="{Binding Picture}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonDown">
<i:InvokeCommandAction
Command="{Binding AddToCartCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Image>
How to use Behaviors
Behaviors can be attached to any element
<Image Source="digitalworld.png" >
<i:Interaction.Behaviors>
<ei:MouseDragElementBehavior/>
</i:Interaction.Behaviors>
</Image>
Create your own behavior
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!");
}
}
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
Make animations feel more natural
<DoubleAnimationUsingKeyFrames … >
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="370">
<EasingDoubleKeyFrame.EasingFunction>
<BounceEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
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:
© 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.