8. TOOLS FOR THE JOB: GRAPHICAL DESIGN
A UX designer can use Blend
to specify the appearance of
the user interface
A version of Blend for the phone
is supplied as part of the phone
SDK
9. TOOLS FOR THE JOB: CODE CREATION
A Developer can take the user
interface design and use
Visual Studio build the
program to make it work
Visual Studio provides a design
environment but it is not as
advanced as Blend
10. DESIGN STYLE AND PROGRAMMING
As programmers we probably start of just worrying about making the
program work
This is a very good place to start
But in modern systems the “look and feel” of the user interface is very
important
No matter how good the code is, if the program is hard to use it will not be popular
You should pay careful attention to the user interface when making
phone programs
If you know any Graphic Designers it is worth getting them on your
development team
11. PROJECT TEMPLATES AND COMPONENTS
Windows Phone SDK
provides a set of project
templates
Each of them maps onto a
particular style of application
12. APPLICATION TEMPLATES
Windows Phone App
Basic single page app
Windows Phone Databound App
Project for creating a Windows Phone application using List and navigation
controls with a basic Model-View-ViewModel architecture
Windows Phone Pivot App
User can “pivot” between different screens by flicking left and right
Windows Phone Panorama application
A single panoramic background with pages of controls that the user can pan
between
15. THE CONTOSO COOKBOOK RECIPE
DETAILS PAGE
This is a Pivot page that displays details
of a recipe
Picture and directions on one pane
Ingredients list on another pane
17. XAML AND OBJECTS
Every XAML element is a declaration of an object
XAML is a way of describing a UI using XML
XAML stands for XML Application Markup Language
This is a declarative way of expressing your UI
XAML elements == objects in the
System.Windows.Controls namespace
Each of the items on the screen of the application
shown is a graphical rendering of an object
19. DISPLAY ELEMENT PROPERTIES
Each of the elements contains properties that define how it appears on
the screen
Position on the screen
Height and width
Font colour and size etc..
These values are used by XAML when the display is drawn
If these value are changed by the program the appearance of the
element will change
20. XAML ELEMENT CLASS HIERARCHY
The XAML class hierarchy is quite complex
Everything is based on the
FrameworkElement class which contains the
fundamental properties of all elements
You can derive your own components if you
wish
24. APPLYING STYLES TO ELEMENTS
You can set colors and font sizes for elements directly in XAML:
This is generally a BAD IDEA!
Difficult to match builtin styles
Difficult to work with Windows Phone Themes
28. ALIGNMENT OF ELEMENTS
Alignment of UI elements is important!
The magic number in Windows Phone UI is 12px, or multiples of 12
Your page should have a nice, visually crisp line that is 24 pixels from the left of the
device’s screen
Gap between controls should be at least 12px
Align on 12px increments… though 6px or 18px may also be appropriate
30. VISUAL STUDIO AND BLEND ALIGNMENT
GRID
Button at bottom of Designer window can
be used to show a 12px alignment Grid
Useful for setting alignment of elements
Available in Blend
Now also available in Visual Studio
31. ALIGNMENT GRID OVERLAY
All new projects include AlignmentGrid.png in the Assets folder
You can overlay the grid at design and runtime by uncommenting the
XAML that shows it
Included near the foot of MainPage.xaml
Copy to other pages to show on those
40. DATA BINDING
Simplest way to program UI controls is to write your own “glue” to get and
set properties of controls
e.g. , textBox1.Text = "Hello, world";
In complex applications, such code quickly becomes unwieldy and error
prone.
Use XAML data binding to link your UI to a class in your application that
contains your application data
A data class that is a source for data binding is called a ViewModel
UI controls can get their display values automatically from properties of
viewmodel class
Changing the property, updates the display
User input can automatically update the bound property of the viewmodel class
41. DATA BINDING IN XAML
Properties of controls can be bound to a public property of a data object
In the example above, the Text property of the TextBlock is bound to the Directions
property of some data source
Define the data source by setting
The DataContext property of any containing FrameworkElement-derived class (a
containing control, the page, or the frame),
The ItemsSource property of a List control
or
42. INOTIFYPROPERTYCHANGED
Data objects that take part in One Way or TwoWay binding must
implement the INotifyPropertyChanged interface
This interface requires only that the object publishes the PropertyChanged event
Object must fire the PropertyChanged event whenever the value of one of its public
properties changes
The XAML runtime subscribes to this event and uses it to update databound UI
elements
46. LIST ITEM RENDERING
All Lists – ListBox, LongListSelector –
have no default rendering for data
items
If you simply bind the ItemsSource
property to a collection of objects, all
you get displayed in the list for each
item is the name of the data object type
47. GENERATING LISTS FROM DESIGN-TIME
DATA
In Blend, if you drag a
collection from the Data
window onto the design
surface while in List mode,
it generates a ListBox and
attempts a default
rendering for list items
Manually change to a
phone:LongListSelector in
the XAML
48. LISTS AND TEMPLATES
All the different elements that affect how a list displays content can be
customised
Each aspect is controlled by a template. For the LongListSelector, there are
many:
GroupFooterTemplate – area that shows at end of each group if LLS used to show
grouped items
GroupHeaderTemplate – area that shows at top of each group if LLS used to show
grouped items
JumpListStyle – layout of items in the Jump List, if enabled
ListFooterTemplate – area that shows at the foot of the whole list
ItemTemplate – layout for each data item
ListHeaderTemplate – area that shows at the top of the whole list
To change the layout of how each data item displays, we need to modify the
ItemTemplate
49. MODIFYING THE ITEMTEMPLATE IN
BLEND
Right-click on the list control, then access the Edit Additional Templates
menu
Design the controls in the template
