Expression Blend for Developers

RDN Dev Day

Hello World

Mahesh Krishnan• Principal Consultant• Author: Silverlight 4 for

Dummies• Run VIC.NET Dev SIG & SDDN• Mahesh.Krishnan@readify.net• @MaheshKrishnan• Blogesh.wordpress.com

What are we doing?

Type of presentation• Bit of PowerPoint• Lots of Demos• No sales. • No wow demos or 5

minutes demos. • Useful Tips & Tricks.

Rules

Have you…?

?

Agenda

Section #1Intro

Section #2 Layout & Drawing

Section #3 Styles

Section #4 Sample Data

Section #5Controls

Session #1 – Intro and Blend BasicsMorning TeaSession #2 – More BlendLunch

Section #6Animation

Section #7 Behaviors

Section #3 SketchFlow

Section #4 Advanced Features

Section #5Extras + Questions

What is Expression Blend?

• Primary Tool for Designing User Interfaces

• Visually design UI – Blend creates XAML

• Better user experience than Visual Studio when working UI design

• You still need VS 2010 to do all the developer stuff

Adoption

Reasons• Positioned as Design

tool• Crashes• Messes with my Xaml• Patterns• Don’t want to learn a

new tool• I’m productive hand

coding Xaml

• Not broadly adopted• More stable now• Let go• Better support• Don’t learn something

different if you don’t need to do something different.

• Learning curve

Blend vs Visual Studio

• When would you use Expression Blend?– Prototyping UI– User Interface design– Writing small blocks of code– Importing designs from Photoshop and Illustrator– Animation

• When would you use Visual Studio?– Simple UI design– Writing code– Debugging, setting breakpoints, etc– Integrating with other projects (.NET WCF Services,

WCF, ...)

BLENDWALKTHROUGH

Styling

• Allows re-use of look and feel across controls:–Color, Font, Margins, etc

• Created as a resource:<Application.Resources> <Style x:Key="Style1" TargetType="TextBlock"> <Setter Property="Foreground" Value="#FFF0D3D3"/> <Setter Property="FontSize" Value="36"/> </Style></Application.Resources>

Applying a Style

• Set using Style property using the StaticResource mark-up in XAML:

<TextBlock Text="Hello World" Style="{StaticResource Style1}" />

Skinning or Templating

• Allows you to change the complete appearance of the control

• Like Style, created as a resource:

< Application.Resources> <ControlTemplate x:Key="MyTemplate" TargetType="Button"> <Grid> ... <Rectangle .../> <ContentPresenter ... Content="{TemplateBinding Content}" /> </Grid> </ControlTemplate>< /Application.Resources>

Applying the template

• Set using Template property using the StaticResource mark-up in XAML:

<Button Content= "Click ME" Template="{StaticResource MyTemplate}" />

Parts and States Model

• States model breaks the Control down based upon its different states and how it should look for each state

• Parts model breaks the Control down into various parts and how each part should look

Visual State Manager

• Manages states for a control–Allows setting different State groups

for a control• Manages transition between states–Controls the look and feel of the

control when state transition occurs• Allows designers to define state

transition behaviour (usually done using Animation)

The Parts Model – an example

Animation

• Animation is created by quickly cycling through a series of images

• Each image is slightly different from the previous one

• Image is created by changing a (visual) property

• Basic animations works on properties of type:– Double– Color– Point

Basic Animation

• Storyboard–Container for animation–Manages timeline. Can start, pause,

stop animations• xxxxAnimation (e.g.

DoubleAnimation)– Specify From, To and Duration– Storyboard will do the interpolation

Basic Animation

• XAML Syntax for Storyboard:

<Storyboard x:Name="MyStoryboard"> <DoubleAnimation Storyboard.TargetName="rect1" Storyboard.TargetProperty="Width" From="40" To="100" Duration="0:0:5"> </DoubleAnimation></Storyboard>

Key Frame Animation

• Animates between a series of values• Can control their interpolation method–Discrete, Linear, Splined

• Animation classes–xxxxAnimationUsingKeyFrame

(e.g.DoubleAnimationUsingKeyFrame)– Supports Double, Color, Point and Object

Key Frame Animation

• XAML Syntax for Storyboard:

<Storyboard x:Name="MyStoryboard"> <DoubleAnimationUsingKeyFrames Duration="0:0:4.5" Storyboard.TargetName="rect1" Storyboard.TargetProperty="Width”> <LinearDoubleKeyFrame Value="140" KeyTime="0:0:0"/> <LinearDoubleKeyFrame Value="10" KeyTime="0:0:2.2"/> <LinearDoubleKeyFrame Value="140" KeyTime="0:0:3"/> </DoubleAnimationUsingKeyFrames></Storyboard>

Behavior

• Reusable piece of functionality• Allows actions to be performed

without writing code– Start an animation– Trigger a state change– Play a sound– etc

Behavior types

• Action: invoked to perform an operation.– Call a method, open window, etc

• Behavior: operation performed without invoking it–Mouse over operation

• Trigger: fires when something (event) occurs– Timer ends

TFS Unboxed

Learn what is involved in getting TFS 2010 up and running in your development environmentStephen Godbold & Dr Tafline Murnane

Monday 2 August 2010 Level 5, 4 Freshwater Place, SouthbankAM session: 8:30am – 12:15pmPM session: 1:15pm – 5:00pm $75 + GST (includes light refreshments)

Questions?