1 / 63

Expression Blend 4 for developers

Expression Blend 4 for developers. Show your inner-designer-side!. Glad to meet you!. Gill Cleeren Microsoft Regional Director Silverlight MVP Telerik Insider & MVP .NET Architect @Ordina ( www.ordina.be )

tameka
Download Presentation

Expression Blend 4 for developers

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

  10. 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

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

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

  13. Styles

  14. 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>

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

  16. 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>

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

  18. DemoStyles

  19. Managing resources

  20. 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 • ...

  21. DemoManaging resources

  22. Control Templates

  23. 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>

  24. 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}" />

  25. DemoControl Templates

  26. Parts and states

  27. 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)

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

  29. 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 { ... }

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

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

  32. DemoParts and states

  33. Push the button: Generate sample data

  34. 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...)

  35. DEMO:Push the button: Generate sample data

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

  37. 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

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

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

  40. Blend offers this...

  41. 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 • ...

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

  43. (Bad) Behaviors

  44. 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>

  45. 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(); } }

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

  47. (Bad) Behaviors DEMO

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

More Related