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