DesigningApplications using

Expression Blend

Jason LeeEthos Technologies

Agenda• Design Time Sample Data• ItemTemplate• Visual State• Play Time• Q & A

Design Time Sample Data• Design Time Sample Data

• Enables fast and efficient design work• Enables parallel work of designing and coding• If set properly, the DataBinding expressions can be reused in production

version, reducing duplication of work

• Sample Data Types• Simple Property• Complex Property• Collection Property

• How to do it?• Drag and Drop

ItemTemplate• List Control

• Two common list controls : ItemsPanel, ListBox• When DataBound to collection data, it generates Child Items according to

the collection• The appearance of each Child Item is defined by the list control’s

ItemTemplate property

• ItemTemplate• Is a DataTemplate• Defines how each item of ItemsControl/ListBox looks like• DataContext is automatically set with corresponding data

Visual State• Ways of Defining Animations

• Storyboard • Visual State

• Visual State• Is an easy way to define storyboard• Has many pre-defined transitions to apply

• VisualStateGroup• VisualStates are grouped and managed by VisualStateGroup• However, VisualStates are NOT allowed to have duplicate name within the

same page

• Principles• Visual States looks good, but also resource consuming, use it carefully• User expects fast response, which means duration of Visual State should

be kept within short period of time

Creating Visual State• Define Visual States

• More than one Visual States make sense• Set some visible transitions, so that user may feel something is happening• You can preview the effect in Blend by switching between them

• Apply a GoToStateAction Behavior• Attach the behavior to the invoking control (i.e. Button)• The EventName of the Behavior’s Trigger is automatically set by Blend,

and can be changed

• Set Target State• Make sure UserTransitions CheckBox is checked if transitions are intended

Play Time !• Goals

• Understand how to define and apply different types of Design Time Sample Data

• Get familiar with list control’s ItemTemplate• Get familiar with Visual State

! & ?

Thank You ! Any Questions ?