1. Dovydas Navickas
dovydas.nav@gmail.com
http://linkd.in/dovydasnavickas

2. agenda

o introduction
o metro style
o silverlight development
o phone development
o the marketplace

3. about me

o 6 years of developing
o 4 years of C# experience
o lecturer at “Prografika”
o microsoft student partner
o patogiau.lt
o http://linkd.in/dovydasnavickas

4. introduction
features metro tools cloud 
o new platform
o based on familiar technologies and tools
o multiple hardware vendors
o consistent baseline (cpu, resolution, etc.)
o your chance to enter a brand new market!

5. introduction
features metro tools cloud 
METRO IS WINDOWS PHONE‟S DESIGN
LANGUAGE. IT‟S MODERN AND CLEAN.
IT‟S ABOUT TYPOGRAPHY AND CONTENT.

6. 

7. metro


8. metro


9. metro
principals 
clean, light, open, fast
celebrate typography
alive in motion
content, not chrome

10. metro
app hubs 

11. introduction
features metro tools cloud 
Phone Emulator
Samples Documentation
Guides Community
Packaging and Verification Tools

12. introduction
features metro tools cloud 
Notifications App Deployment
Location Identity Feeds
Social Maps

13. SILVERLIGHT

14. silverlight
introduction 
o a subset of the .net framework and WPF
o first introduced as a browser plug-in
o .net runtime on multiple platforms (mac,
windows)
o currently targeted for:
o device apps (currently windows phones)
o client apps (emphasis on enterprise)
o rich media apps (such as streaming video)
o reuse code for desktop, web and phone
apps!

15. silverlight
principals 
o code + xaml
o controls
o layout
o data binding
o graphics

16. code + xaml
o xaml is basically a declarative language for

object instantiation
o xaml is great for UI development. it‟s:
o standard XML
o hierarchical
o extensible
o declarative
o we can do most things both in xaml and in
code, but you‟ll quickly find that xaml is much
more convenient for some tasks

17. code + xaml
comparison
XAML

<Grid x:Name="ContentPanel"
Margin="12,0,12,0">
<TextBlock Text="Hello, Windows Phone 7!"
Margin="6"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
C#
var tb = new TextBlock();
tb.Text = "Hello, Windows Phone 7!";
tb.HorizontalAlignment = HorizontalAlignment.Left;
tb.VerticalAlignment = VerticalAlignment.Top;
tb.Margin = new Thickness(6);
ContentPanel.Children.Add(tb);

18. code + xaml
the visual tree 
o controls contain other controls, and some
controls are built using other controls
o this creates a hierarchical relationship
between the controls which we call the
visual tree
o when you write xaml, the structure of the
visual tree is very clear

19. demo
hello, xaml

20. controls


21. controls
anatomy
o inherits from FrameworkElement

o two main types:
o custom control – a reusable, templatable
control (e.g. a button)
o user control – a way to modularize your
application (e.g. employee view)
o uses dependency properties and routed
events
o responds to input (touch, keyboard)

22. controls
dependency properties 
o extend CLR properties with:
o data binding
o change notification
o animation
o validation
o control-tree inheritance

23. controls
routed events 
o extend CLR events
o can travel along the visual tree:
o bubbling or tunneling

24. controls
routed events
Root

Element 1 Element 2
Element Element Element Element
1.1 1.2 2.1 2.2
 PreviewMouseDown on Root
 PreviewMouseDown on Element 1
 PreviewMouseDown on Element 1.2
 MouseDown (bubble) on Element 1.2
 MouseDown (bubble) on Element 1
 MouseDown (bubble) on Root

25. layout
basic properties
Container

Vertical Alignment
Margin
Horizontal
Alignment Padding
{Min,
Max}
Element
Height Render Transform
{Min, Max} Width

26. layout
panels 
o Grid
o StackPanel
o WrapPanel (*)
o Canvas
o DockPanel
o TabControl
* can be found in the silverlight toolkit

27. demo
layout with panels

28. controls
styles 
o defines a set of dependency properties and
values
o similar to CSS in HTML
o provides a great way to control the looks of
your app from a central location

29. controls
templates 
o completely customize appearance of
controls without having to write any code or
inherit from the control
o all controls have default styles and
templates
o template editing is easy with Expression
Blend

30. demo
template editing in blend

31. data binding
o flow data from a source to a target

o source: any CLR object
o target: Dependency Property only
o modes: one way, two way
o supports change notifications
o changes to a source object automatically sent
to the UI
o both property and collection changes are
supported

32. data binding
data templates 
o provide a visual representation of an object
o the default behavior if no template is specified
is to display the Object.ToString() result
o use bindings to display data
o respond to changes using triggers
o can only be written in xaml

33. data binding
collections 
o use ItemsControl whenever you need to
bind to a collection
o provide an ItemTemplate to change the
visuals of each item
o controls that inherit from ItemsControl:
o ListBox, ContextMenu, MenuItem, Panorama

34. demo
data binding

35. data binding
the mvvm pattern
o designed specifically with business logic and

WPF/Silverlight in mind Model data
o relies on bindings to
retrieve and set data from
and to the view model presentation logic
View
o uses commands to Model
and state
perform operations on the
view model
o relies on notifications to UI (and possibly
communicate between the View some UI logic)
layers
o creates a data-driven UI

36. graphics
images 
o store images as resources or as content
o content is recommended
o use the Image control to show them
o use WritableBitmap to create images in
runtime
o you can also use it to capture your screens

37. graphics
vectors 
o controls inheriting from Shape can be used
to create 2D shapes
o Rectangle, Ellipse, Line, Polyline, Polygon,
Path
o Path is the most versatile, accepting a
Geometry object which can represent any
shape
o it is easiest to create shapes using
Expression Blend

38. graphics
transforms
o FrameworkElement has a RenderTransform

property which can be assigned to:
o TranslateTransform (move)
o ScaleTransform
o RotateTransform
o SkewTransform
o CompositeTransform (combine any of the
above)
o additionally, the Projection property allows
creating 3D-like effects

39. graphics
animations
o animate dependency property using a Timeline

that fits the property type:
o DoubleAnimation, ColorAnimation, PointAnimation
o use Storyboard to group a few animations
together
o use an easing function to make the animation
look more “real” (e.g. to add elasticity)
o it‟s easiest to create storyboards in xaml and in
Expression Blend

40. demo
animations

41. resources

o silverlight toolkit
http://silverlight.codeplex.com/
o prism
http://prism.codeplex.com/
o project rosetta (tutorials)
http://visitmix.com/labs/rosetta
o Introducing Expression Blend 4
http://expression.microsoft.com/en-us/ff624124

42. break

43. WINDOWS PHONE

44. windows phone

o application structure
o phone-specific controls
o sensors and services

45. application structure
files
o App.xaml: application entry point. contains

global resources, services, events (startup,
shutdown, etc.) and instantiates
PhoneApplicationFrame
o WMAppManifest.xml: contains application
deployment information: capabilities, tasks,
icon.
o MainPage.xaml: a PhoneApplicationPage
that contains the main view of the
application.

46. application structure
default control tree
o PhoneApplicationFrame

o PhoneApplicationPage
o Grid named “LayoutRoot”
o StackPanel named “TitlePanel”
o TextBlock named
“ApplicationTitle”
o TextBlock named “PageTitle”
o Grid named “ContentPanel”
o <your content goes here>
you can clear the entire page
content and write your own, but for
most apps it is recommended to
stay within the „metro‟ guidelines

47. application structure
navigation
o web browser like: each page can be navigated

to using the NavigationService by passing a
URI
o the PhoneApplicationFrame can only display a
single page at a time!
o the hardware back button can be used to go
back to the previous page on the stack
o you can pass data to the page using URI query
or by placing it in a globally known location
(such as the App class)

48. application structure
tombstoning
o windows phone can only run one application at a

time. so, each time you switch to another
application, the current one gets terminated – i.e.
tombstoned
o your app will get tombstoned if:
o you click the start button
o you get a call while the app is running
o the phone gets locked
o the app uses a launcher or a chooser (e.g. use the
camera)
o you can use the app‟s Activated and Deactivated
events to handle tombstoning

49. application structure
application bar
o preferred menu system for

your apps
o up to 4 buttons,
monochrome 62x62
bitmaps
o add a button from Blend to
get some default bitmaps
o get more from
http://thenounproject.com
o add up to 5 menu items

50. demo
application bar

51. phone controls

o most of silverlight‟s controls have been
adjusted to windows phone, supporting
touch and templated to the phone‟s theme
o while some controls such as ComboBox and
ToolTip exist on the phone, their use is
discouraged

52. phone controls
panorama and pivot
o panoramic applications

offer a unique way to
view controls, data,
and services by using
a long horizontal
canvas that extends
beyond the confines of
the screen.
o pivot can be used for
filtering large datasets,
viewing multiple data
sets, or switching
application views.

53. demo
panorama & pivot

54. sensors
accelerometer
o measures acceleration forces such as gravity

or the forces caused by moving the sensor
o can tell the direction of the earth relative to the
phone
o use the Accelerometer class to access the
sensor
o this sensor reports a constant value in the
emulator, so it is recommended that you mock its
values for testing
o possible uses: responding to phone
movements in games, bubble levels, etc.

55. sensors
geo-location 
o obtain the current location of the phone
using the GeoCoordinateWatcher class
o you can get the latitude, longitude, altitude
and current speed of the device
o this sensor is not available in the emulator.
use the GpsEmulator project, available at
app hub
o use the Bing maps control to display a map
of the current location

56. sensors
camera 
o obtain photos from the camera using the
CameraCaptureTask chooser
o get a Stream from the chooser and create a
BitmapImage from it
o the emulator will provide a simple black-
and-white image to capture

57. services
push notifications
o allows applications to receive updates in the

background (app doesn‟t need to be running!)
o three types of notifications:
o toast – when app is inactive
o tile (background, title, count)
o raw – directly to the app
o you need to create a compatible web service

58. what‟s new
in version 7.5 (aka “mango”)
o internet explorer 9

o SQL CE: in-memory local SQL database
o multi-tasking and live agents
o silverlight 4
o raw camera feed access
o tcp/ip sockets
o better developer tools
o beta sdk shipping this month

59. resources

o Programming Windows Phone 7 by Charles
Petzold (free ebook)
http://www.charlespetzold.com/phone/
o Windows Phone 7 Developer Guide
http://msdn.microsoft.com/en-us/library/gg490765.aspx
o quickstarts
http://create.msdn.com/en-us/education/quickstarts
o the noun project (icons for your app)
http://thenounproject.com/

60. break

61. THE MARKETPLACE

62. marketplace
advantages 
o integrated into the phone
o use the zune software to browse on the PC
o free or paid apps with a trial option
o downloads, updates and payments are
managed for you
o free registration for students using
DreamSpark

63. marketplace
steps 
develop submit certify
& debug & validate & sign
windows phone
application marketplace
deployment service

64. marketplace
best practices 
o make it appealing (use metro!)
o make it stable and reliable
o make it original and useful
o make it easy to use
o read the certification requirements carefully
o test your app as suggested to avoid common
certification pitfalls

65. marketplace
in lithuania 
o currently not supported directly in App Hub
o use a third-party broker: appa market / yalla
apps
o as a student, you get 100 credits which you
can use to:
o upload apps
o unlock devices for development

66. resources
o certification requirements

http://msdn.microsoft.com/en-us/library/hh184843(v=VS.92).aspx
o dreamspark
https://www.dreamspark.com/
o yalla apps
http://www.yallaapps.com/
o appa market
http://appamarket.com/
o best practices for application marketing
http://create.msdn.com/en-
US/home/about/app_submission_walkthrough_application_marketing

67. thank you!