This document provides an overview of an upcoming presentation on Expression Blend for Developers. The presentation will cover the basics of Expression Blend, when to use Blend versus Visual Studio, and demonstrations of styling, templating, animation, and behaviors in Blend. It includes an agenda that has two sessions, one in the morning and one after lunch, to cover introductory Blend topics and more advanced features.

1. Expression Blend for DevelopersRDN Dev Day

2. Hello WorldMahesh KrishnanPrincipal ConsultantAuthor: Silverlight 4 for DummiesRun VIC.NET Dev SIG & SDDNMahesh.Krishnan@readify.net@MaheshKrishnanBlogesh.wordpress.com

3. What are we doing?Type of presentationBit of PowerPointLots of DemosNo sales. No wow demos or 5 minutes demos. Useful Tips & Tricks.

4. Rules

5. Have you…??

6. AgendaSession #1 – Intro and Blend BasicsMorning TeaSession #2 – More BlendLunch

7. What is Expression Blend?Primary Tool for Designing User InterfacesVisually design UI – Blend creates XAMLBetter user experience than Visual Studio when working UI designYou still need VS 2010 to do all the developer stuff

8. AdoptionReasonsPositioned as Design toolCrashesMesses with my XamlPatternsDon’t want to learn a new toolI’m productive hand coding XamlNot broadly adoptedMore stable nowLet goBetter supportDon’t learn something different if you don’t need to do something different.Learning curve

9. Blend vs Visual StudioWhen would you use Expression Blend?Prototyping UIUser Interface designWriting small blocks of codeImporting designs from Photoshop and IllustratorAnimationWhen would you use Visual Studio?Simple UI designWriting codeDebugging, setting breakpoints, etcIntegrating with other projects (.NET WCF Services, WCF, ...)

10. BLENDWALkTHROUGH

11. StylingAllows re-use of look and feel across controls:Color, Font, Margins, etcCreated as a resource:<Application.Resources> <Style x:Key="Style1" TargetType="TextBlock"> <Setter Property="Foreground" Value="#FFF0D3D3"/> <Setter Property="FontSize" Value="36"/> </Style></Application.Resources>

12. Applying a StyleSet using Styleproperty using the StaticResourcemark-up in XAML:<TextBlock Text="Hello World" Style="{StaticResource Style1}" />

13. Skinning or TemplatingAllows you to change the complete appearance of the controlLike Style, created as a resource:< Application.Resources> <ControlTemplate x:Key="MyTemplate" TargetType="Button"> <Grid> ... <Rectangle .../> <ContentPresenter ... Content="{TemplateBinding Content}" /> </Grid> </ControlTemplate>< /Application.Resources>

14. Applying the templateSet using Templateproperty using the StaticResourcemark-up in XAML:<ButtonContent="Click ME" Template="{StaticResourceMyTemplate}" />

15. Parts and States ModelStates model breaks the Control down based upon its different states and how it should look for each stateParts model breaks the Control down into various parts and how each part should look

16. Visual State ManagerManages states for a controlAllows setting different State groups for a controlManages transition between statesControls the look and feel of the control when state transition occursAllows designers to define state transition behaviour (usually done using Animation)

17. The Parts Model – an example

18. AnimationAnimation is created by quickly cycling through a series of images Each image is slightly different from the previous oneImage is created by changing a (visual) propertyBasic animations works on properties of type:DoubleColorPoint

19. Basic AnimationStoryboardContainer for animationManages timeline. Can start, pause, stop animationsxxxxAnimation (e.g. DoubleAnimation)Specify From, To and DurationStoryboard will do the interpolation

20. Basic AnimationXAML Syntax for Storyboard: <Storyboard x:Name="MyStoryboard"> <DoubleAnimationStoryboard.TargetName="rect1" Storyboard.TargetProperty="Width" From="40" To="100" Duration="0:0:5"> </DoubleAnimation></Storyboard>

21. Key Frame AnimationAnimates between a series of valuesCan control their interpolation methodDiscrete, Linear, SplinedAnimation classesxxxxAnimationUsingKeyFrame(e.g.DoubleAnimationUsingKeyFrame)Supports Double, Color, Point and Object

22. Key Frame AnimationXAML 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>

23. BehaviorReusable piece of functionalityAllows actions to be performed without writing codeStart an animationTrigger a state changePlay a soundetc

24. Behavior typesAction: invoked to perform an operation.Call a method, open window, etcBehavior: operation performed without invoking itMouse over operationTrigger: fires when something (event) occursTimer ends

25. TFS UnboxedLearn what is involved in getting TFS 2010 up and running in your development environmentStephen Godbold & Dr TaflineMurnaneMonday 2 August 2010 Level 5, 4 Freshwater Place, SouthbankAM session: 8:30am – 12:15pmPM session: 1:15pm – 5:00pm $75 + GST (includes light refreshments)

26. Questions?