Expression Blend for Windows Phone
1 like1,097 views
This document discusses how to wire up an application in Blend by walking through navigation, sample data, layout, user controls, real data, and dependency properties. It emphasizes getting the application structure and navigation correct during prototyping before coding. Specific techniques covered include importing designs from Expression Design and Photoshop, using sample data as a placeholder, exposing events and properties from user controls, and generating dependency properties. The goal is to facilitate collaboration between designers and developers in Blend.
Expression Blend for Windows Phone
- 1. TRACK: NEXT GENERATION Blend: Wiring it all together Shane Morris UX Automatic Studio @shanemo
- 2. ABOUT ME 2 2
- 3. Agenda • Blend and Wiring up an application Developer/Designer workflow 1. Navigation • Prototyping 2. Sample Data 3. Layout 4. User Controls 5. (Real Data) 6. (Dependency Properties) 7. (Actions) 3
- 4. Case Study Qantas WP 'Mango' App 4
- 5. Developer / Designer Workflow Nick Shane Sydney Melbourne 5
- 6. Developer / Designer Workflow 6
- 7. Designer companion to WPF Visual Studio Surface Designer-friendly Silverlight Can go a LONG way Windows Phone without seeing any XAML Works on same Visual Studio project Works with Illustrator, Photoshop and Expression Design 7
- 8. Quick Lap of Expression Blend 8
- 9. Agenda • Blend and Wiring up an application Developer/Designer workflow 1. Navigation • Prototyping 2. Sample Data 3. Layout 4. User Controls 5. (Real Data) 6. (Dependency Properties) 7. (Actions) 9
- 10. Prototyping Getting the application structure and interaction right before you commit to code 10
- 11. SketchFlow for Windows Phone 11
- 12. Wiring up an application 1. Navigation 2. Sample Data 3. Layout 4. User Controls 5. Real Data 6. Dependency Properties 7. Actions 12
- 14. Navigation Structure and navigation are the most important to get right WP7: navigate to Panorama and pivot 14
- 15. Wiring up an application 1. Navigation 2. Sample Data 3. Layout 4. User Controls 5. Real Data 6. Dependency Properties 7. Actions 15
- 16. Step 2. Sample Data 16
- 17. Sample Data Mainstay for designer early in project Often hangs around for the rest of the project. From scratch, From XML, From class definition. 17
- 18. Wiring up an application 1. Navigation 2. Sample Data 3. Layout 4. User Controls 5. Real Data 6. Dependency Properties 7. Actions 18
- 20. Layout Import from Expression Design (export really), Illustrator (includes .fxg), Photoshop StackPanel is your friend Resizing less of an issue for phone Resources 20
- 21. Wiring up an application 1. Navigation 2. Sample Data 3. Layout 4. User Controls 5. Real Data 6. Dependency Properties 7. Actions 21
- 22. Step 5. User Controls 22
- 23. User Controls Will it Blend? Problems: no design time data, no design time size… Start in Blend Expose Events, dependency properties, data contexts Visual states hidden 23
- 24. Wiring up an application 1. Navigation 2. Sample Data 3. Layout 4. User Controls 5. Real Data 6. Dependency Properties 7. Actions 24
- 25. Real Data 25
- 26. Real data Binding names are the contract between designer and developer 26
- 27. Wiring up an application 1. Navigation 2. Sample Data 3. Layout 4. User Controls 5. Real Data 6. Dependency Properties 7. Actions 27
- 29. Dependency Properties www.kirupa.com/blend_silverlight/dependency_propert y_generator.htm 29
- 30. Agenda • Blend and Wiring up an application Developer/Designer workflow 1. Navigation • Prototyping 2. Sample Data 3. Layout 4. User Controls 5. Real Data 6. Dependency Properties 7. (Actions) 30
- 31. Resources Expression Blend for Windows Phone 7 (Free) microsoft.com/expression/phone.aspx 31
Editor's Notes
- #2: There’s a lot to coverSo to make it real I’ll walk you though wiring up a recent app.We won’t cover everything
- #3: XXX Pics of some projects esp Cochlear
- #4: Beyond the basics. Wiring up to view model, user controls etcXXXX revise
- #5: Worked with Nick RandoplphXXX Add moreXXX cropXXX add MIX video
- #6: XXX PIC of fighting
- #7: XXX PIC of fighting
- #9: Start a new Phone project (panorama)
- #10: Beyond the basics. Wiring up to view model, user controls etcXXXX revise
- #11: XXX pic
- #12: Demo the app in sketchflowPoint out controlsMaybe make a changeStakeholder editsVisual states for orientation
- #14: Step 1 would be prototype
- #15: Navigation framework good for handling web URLSNo nav framework on phone
- #18: one of my favourite Blend featuresHangs araounf - e.g. On screen instructional copy. Tech writer edited XML and we imported to Sample data and made it available at runtime.XXX - lorem ipsum funny pic from web
- #20: Time passes and we have a visual design concept approvedI use ExDesign for comping – getting ideas, and for bitmaps assets and path stuff that’s too hard to do in Blend. But you could use IllustratorStop there since this is meant to be advanced and moving things around isn’t very advanced. But a better containment model than canvases with transforms would be good
- #21: Drawing tools make it easier to explore options - especially if you're not confident designerXXX Stack of stones pic
- #23: Want toBind flight details to dataWant to use the same layout in the listPlus User Control will give us statesExpose properties (and maybe events)
- #24: Will it blend XXX pic of guyProvide a way to access Visual States
- #25: View Model
- #26: For swapping in the view model to work we had to agree on the names so that Sample Data and View model use the same namesAlso where binding debugging will come in handy
- #27: - ironically, loosely coupled has it's drawbacks. Easier to uncouple. A property or method is either there or not Xxx contract pic
- #28: View Model
- #29: KirupaIf only interfacing with developers was always as simple as a web form
- #31: We didn’t cover:Templating controls- Actions