Expression Blend for Windows Phone

1,670 views

Published on

My Slides from DevDays in

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,670
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 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
  • XXX Pics of some projects esp Cochlear
  • Beyond the basics. Wiring up to view model, user controls etcXXXX revise
  • Worked with Nick RandoplphXXX Add moreXXX cropXXX add MIX video
  • XXX PIC of fighting
  • XXX PIC of fighting
  • Start a new Phone project (panorama)
  • Beyond the basics. Wiring up to view model, user controls etcXXXX revise
  • XXX pic
  • Demo the app in sketchflowPoint out controlsMaybe make a changeStakeholder editsVisual states for orientation
  • Step 1 would be prototype
  • Navigation framework good for handling web URLSNo nav framework on phone
  • 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
  • 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
  • Drawing tools make it easier to explore options  - especially if you're not confident designerXXX  Stack of stones pic
  • Want toBind flight details to dataWant to use the same layout in the listPlus User Control will give us statesExpose properties (and maybe events)
  • Will it blend XXX pic of guyProvide a way to access Visual States
  • View Model
  • 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
  •   - ironically, loosely coupled has it's drawbacks. Easier to uncouple. A property or method is either there or not Xxx contract pic
  • View Model
  • KirupaIf only interfacing with developers was always as simple as a web form
  • We didn’t cover:Templating controls- Actions
  • Expression Blend for Windows Phone

    1. 1. TRACK: NEXT GENERATION Blend: Wiring it all together Shane Morris UX Automatic Studio @shanemo
    2. 2. ABOUT ME2 2
    3. 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. 4. Case StudyQantas WP Mango App4
    5. 5. Developer / Designer Workflow Nick Shane Sydney Melbourne5
    6. 6. Developer / Designer Workflow6
    7. 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 Design7
    8. 8. Quick Lap of Expression Blend8
    9. 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. 10. Prototyping Getting the application structure and interaction right before you commit to code10
    11. 11. SketchFlow for Windows Phone11
    12. 12. Wiring up an application1. Navigation2. Sample Data3. Layout4. User Controls5. Real Data6. Dependency Properties7. Actions12
    13. 13. Step 1. Navigation13
    14. 14. Navigation Structure and navigation are the most important to get right WP7: navigate to Panorama and pivot14
    15. 15. Wiring up an application1. Navigation2. Sample Data3. Layout4. User Controls5. Real Data6. Dependency Properties7. Actions15
    16. 16. Step 2. Sample Data16
    17. 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. 18. Wiring up an application1. Navigation2. Sample Data3. Layout4. User Controls5. Real Data6. Dependency Properties7. Actions18
    19. 19. Step 3. Layout19
    20. 20. Layout Import from Expression Design (export really), Illustrator (includes .fxg), Photoshop StackPanel is your friend Resizing less of an issue for phone Resources20
    21. 21. Wiring up an application1. Navigation2. Sample Data3. Layout4. User Controls5. Real Data6. Dependency Properties7. Actions21
    22. 22. Step 5. User Controls22
    23. 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 hidden23
    24. 24. Wiring up an application1. Navigation2. Sample Data3. Layout4. User Controls5. Real Data6. Dependency Properties7. Actions24
    25. 25. Real Data25
    26. 26. Real data Binding names are the contract between designer and developer26
    27. 27. Wiring up an application1. Navigation2. Sample Data3. Layout4. User Controls5. Real Data6. Dependency Properties7. Actions27
    28. 28. Dependency Properties28
    29. 29. Dependency Properties www.kirupa.com/blend_silverlight/dependency_propert y_generator.htm29
    30. 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. 31. Resources Expression Blend for Windows Phone 7 (Free) microsoft.com/expression/phone.aspx31

    ×