Expression Blend 4 for developers

1. Expression Blend 4 for developers Show your inner-designer-side!

2. Glad to meet you! • Gill Cleeren • Microsoft Regional Director • Silverlight MVP • Telerik Insider & MVP • .NET Architect @Ordina (www.ordina.be) • Speaker (TechDays BE-NL-UK-SE-CH..., TechEd, DevDays, NDC Norway, Spring Conference UK, SQL Server Saturday Switzerland...) • Visug user group lead (www.visug.be) • Author Silverlight 4 Data and services cookbook • www.snowball.begill@snowball.begillcleeren

3. Agenda • 5-minute guided tour of Blend • Great work starts with a sketch: SketchFlow • Customization bonanza • Styling • Resources and resource dictionaries • Templates • Parts and states • Push the button: sample data generation • Binding with Blend: how to use data-binding • Blend behaving badly: behaviors • Blend welcomes WP7 • The Blend-bag-of-tricks

4. 5-minute guided tour of Blend

5. What is Expression Blend? • UI designer tool for WPF, Silverlight and WP7 apps • The focus is on next-generation interactive user interfaces and user experiences • The tool covers the entire range of possible WPF/SL interfaces from desktop business applications to web experiences • The main focus of Expression Blend has traditionally been on designers • However, it turns out to be a great developer tool as well!

6. VS can do this for you... • Creating Projects based on templates • Projects and Solutions • Source Control support since Blend 3 • Design and Editor windows • Since Blend 3, support for code editing and IntelliSense • DataSource window • Data binding windows • Working design surface (about always now…) • Toolbox • Properties and events window

7. But VS can’t do this for you... • Richer visual UI editor in Expression Blend • UI hierarchy window • Storyboards and Timelines • Trigger and Visual State support • Resources (XAML) • Design time data • SketchFlow • Integration with Adobe products

8. Demo5-minute guided tour of Blend

9. Great work starts with a sketch: SketchFlow

11. Nice to meet you, SketchFlow • Comes with Expression Blend 4 • Why SketchFlow? • Quick and natural interface design • Interactive • Build up flow of your app • “Sketchy” drawing • Involves everyone in the design

12. Nice to meet you, SketchFlow • Features • SketchFlow Map • Allows importing assets • Sketch styles • Navigation • Annotations • Document generation • Integration with TFS and SharePoint

13. Demo:Great work starts with a sketch: SketchFlow

15. Styles

16. Applications with style(s) • 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>

17. Application with style(s) • Set using Style property using the StaticResource mark-up in XAML: <TextBlock Text="Hello World" Style="{StaticResource Style1}"/>

18. The implicit one: default styles • Styles with no key are default styles • Applied on each element of specified type if no other style is added <Style TargetType="TextBlock"> <Setter Property="FontSize" Value="20"></Setter> </Style>

19. Blend in style • Blend allows “visual” creation of styles “Style” mode allows applying properties. Properties are recorded into a style

20. DemoStyles

21. Managing resources

22. Resources should be in the dictionary • Blend supports managing resource dictionaries • Easier to avoid huge files • Easy to “switch” resources • Blend supports inspecting dictionaries for used or unused resources • A RD can store everything • Brush • Boolean • ... • It’s good practice to make more than 1 RD • Per type • Per theme • ...

23. DemoManaging resources

24. Control Templates

25. Controls the way I want them: Control templates • Allows you to change the complete appearance of the control • Like Style, created as a resource: <Application.Resources> <ControlTemplate x:Key="MyGreatControlTemplate“TargetType="Button"> ... </ControlTemplate> < /Application.Resources>

26. Controls the way I want them: Controls templates • Set using Template property in XAML: • Possible to use link between template and control instantiation using TemplateBinding • ContentPresenter control can be used to define place of “actual content” <Button Content=“Click Me!" Template="{StaticResource MyTemplate}" />

27. DemoControl Templates

28. Parts and states

29. The Parts and States Model (PSM) and the Visual State Manager • VSM relies on variety of components: the PSM • Ensures clean separation between visuals and logic • VSM is used to manage change between states: • State-based effect (larger button when mouse-over) • Transitioning effect (from mouse-over to normal)

30. PSM: the Parts • Named element in template: “working parts” • Not in every control • Code manipulates element in some way

31. PSM: the States • Visual look of control in a particular state MouseOver Pressed [TemplateVisualState(Name="Normal", GroupName="CommonStates")] [TemplateVisualState(Name="MouseOver", GroupName="CommonStates")] [TemplateVisualState(Name="Pressed", GroupName="CommonStates")] [TemplateVisualState(Name="Disabled", GroupName="CommonStates")] [TemplateVisualState(Name="Unfocused", GroupName="FocusStates")] [TemplateVisualState(Name="Focused", GroupName="FocusStates")] public class Button : ButtonBase { ... }

32. PSM: the State Group • Set of mutually exclusive states • Different state groups are orthogonal

33. PSM: the Transitions • Visual look of control as it goes between states • Reverts automatically VisualTransition MouseOver Pressed

34. DemoParts and states

35. Push the button: Generate sample data

36. Sample data in Blend • Allows for customizable generated data • Easy for developers to test what they’re building • Can be “exported” back to Visual Studio • (for designers) Easy to visualize templates... • Possible customizations • Type (string, number, boolean...) • Images (default these are chairs...)

37. DEMO:Push the button: Generate sample data

38. Push the button: Generate sample data Binding with Blend

39. What is data-binding? • A binding is defined by 4 items: • Source object • Source property • Target object (must be dependency object) • Target property (must be dependency property) • Note that data binding • Is not equal to data access! • Has nothing to do with ADO.NET, which is not available in Silverlight

40. The problem is... the syntax • Sample binding: • In general: <TextBlock Text="{Binding Path=FirstName}" /> <TargetControlTargetProperty="{Binding SourceProperty, someBindingProperties}" />

41. VS offers this... • Some Intellisense... • And some editors

42. Blend offers this...

43. Binding in Blend • Perfectly possible to do your data-binding in Blend: • Concept of data context • Element bindings • Data sources bindings • Converter selection and instantation • ...

44. Push the button: Generate sample data Demo: Binding with Blend

45. (Bad) Behaviors

46. Bad Behaviors... • Introduced with SL 3 (and Blend 3 as well) • Encapsulates logic in a class • Is combination of trigger and action • On click, make element invisible • Attach to XAML object with simple declarative syntax (or drag-and-drop in Blend) • Great for designers in Blend! • Is itself a class that inherits from Behavior or Behavior<T>

47. Sample Behavior • To create a behavior • Reference Microsoft.Expression.Interactivity.dll public class MyBehavior : Behavior<UIElement> { protected override void OnAttached() { base.OnAttached(); } protected override void OnDetaching() { base.OnDetaching(); } }

48. Using the behavior • Use it from XAML • Or attach from Blend!! <Ellipse> <i:Interaction.Behaviors> <local:MyBehavior /> </i:Interaction.Behaviors> </Ellipse>

49. (Bad) Behaviors DEMO

50. I use Blend to make my WP7 apps... I swear!