Dovydas Navickasdovydas.nav@gmail.comhttp://linkd.in/dovydasnavickas

agenda

o introductiono metro styleo silverlight developmento phone developmento the marketplace

about meo 6 years of developingo 4 years of C# experienceo lecturer at “Prografika”o microsoft student partnero patogiau.lt

o http://linkd.in/dovydasnavickas

introductiono new platform

o based on familiar technologies and toolso multiple hardware vendors

o consistent baseline (cpu, resolution, etc.)o your chance to enter a brand new

market!

features metro tools cloud

introduction

METRO IS WINDOWS PHONE’S DESIGN

LANGUAGE. IT’S MODERN AND CLEAN.

IT’S ABOUT TYPOGRAPHY AND

CONTENT.

features metro tools cloud

metro

metro

metro

clean, light, open, fastcelebrate typographyalive in motioncontent, not chrome

principals

metroapp hubs

introductionfeatures metro tools cloud

Phone Emulator

Samples Documentation

Guides CommunityPackaging and Verification Tools

introductionfeatures metro tools cloud

Notifications

Location Identity Feeds

MapsSocial

App Deployment

SILVERLIGHT

silverlighto a subset of the .net framework and

WPFo 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!

introduction

silverlighto code + xamlo controlso layouto data bindingo graphics

principals

code + xamlo xaml is basically a declarative language for

object instantiationo xaml is great for UI development. it’s:

o standard XMLo hierarchicalo extensibleo 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

code + xamlcomparison

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); 

code + xamlo 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

the visual tree

demohello, xaml

controls

controlso inherits from FrameworkElemento 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)

anatomy

controlso extend CLR properties with:

o data bindingo change notificationo animationo validationo control-tree inheritance

dependency properties

controlso extend CLR eventso can travel along the visual tree:

o bubbling or tunneling

routed events

controlsrouted events

Root

Element 1

Element1.1

Element 2

Element 2.1

Element 2.2

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

layoutbasic properties

Element

HorizontalAlignment

Vertical Alignment

Container

Margin

Padding

{Min, Max}Heigh

t

{Min, Max} Width

Render Transform

layouto Grido StackPanelo WrapPanel (*)o Canvaso DockPanelo TabControl

* can be found in the silverlight toolkit

panels

demolayout with panels

controlso defines a set of dependency

properties and valueso similar to CSS in HTMLo provides a great way to control the

looks of your app from a central location

styles

controlso 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

templates

demotemplate editing in blend

data bindingo flow data from a source to a target

o source: any CLR objecto target: Dependency Property onlyo modes: one way, two way

o supports change notificationso changes to a source object automatically

sent to the UIo both property and collection changes are

supported

data bindingo provide a visual representation of an

objecto the default behavior if no template is

specified is to display the Object.ToString() result

o use bindings to display datao respond to changes using triggerso can only be written in xaml

data templates

data bindingo use ItemsControl whenever you need

to bind to a collectiono provide an ItemTemplate to change

the visuals of each itemo controls that inherit from

ItemsControl:o ListBox, ContextMenu, MenuItem,

Panorama

collections

demodata binding

data bindingo designed specifically with

WPF/Silverlight in mind o relies on bindings to

retrieve and set data from and to the view model

o uses commands to perform operations on the view model

o relies on notifications to communicate between the layers

o creates a data-driven UI

the mvvm pattern

Model

View

View Model

business logic and data

presentation logic and state

UI (and possibly some UI logic)

graphicso store images as resources or as

contento content is recommended

o use the Image control to show themo use WritableBitmap to create images

in runtimeo you can also use it to capture your

screens

images

graphicso controls inheriting from Shape can be

used to create 2D shapeso Rectangle, Ellipse, Line, Polyline, Polygon,

Patho Path is the most versatile, accepting a

Geometry object which can represent any shape

o it is easiest to create shapes using Expression Blend

vectors

graphicso FrameworkElement has a RenderTransform

property which can be assigned to:o TranslateTransform (move)o ScaleTransformo RotateTransformo SkewTransformo CompositeTransform (combine any of the

above)o additionally, the Projection property allows

creating 3D-like effects

transforms

graphicso 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

animations

demoanimations

resourceso silverlight toolkit

http://silverlight.codeplex.com/

o prismhttp://prism.codeplex.com/

o project rosetta (tutorials)http://visitmix.com/labs/rosetta

o Introducing Expression Blend 4http://expression.microsoft.com/en-us/ff624124

break

WINDOWS PHONE

windows phoneo application structureo phone-specific controlso sensors and services

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

files

application structureo PhoneApplicationFrame

o PhoneApplicationPageo 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

default control tree

application structureo web browser like: each page can be

navigated to using the NavigationService by passing a URIo 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 stacko you can pass data to the page using URI

query or by placing it in a globally known location (such as the App class)

navigation

application structureo 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 buttono you get a call while the app is runningo the phone gets lockedo 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

tombstoning

application structureo preferred menu system

for your appso up to 4 buttons,

monochrome 62x62 bitmapso add a button from Blend to

get some default bitmapso get more from

http://thenounproject.como add up to 5 menu items

application bar

demoapplication bar

phone controlso most of silverlight’s controls have

been adjusted to windows phone, supporting touch and templated to the phone’s themeo while some controls such as ComboBox

and ToolTip exist on the phone, their use is discouraged

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

panorama and pivot

demopanorama & pivot

sensorso measures acceleration forces such as gravity

or the forces caused by moving the sensoro can tell the direction of the earth relative to the

phoneo use the Accelerometer class to access the

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

accelerometer

sensorso 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

geo-location

sensorso obtain photos from the camera using

the CameraCaptureTask choosero get a Stream from the chooser and

create a BitmapImage from ito the emulator will provide a simple

black-and-white image to capture

camera

serviceso 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 inactiveo tile (background, title, count)o raw – directly to the app

o you need to create a compatible web service

push notifications

what’s newo internet explorer 9o SQL CE: in-memory local SQL databaseo multi-tasking and live agentso silverlight 4o raw camera feed accesso tcp/ip socketso better developer toolso beta sdk shipping this month

in version 7.5 (aka “mango”)

resourceso Programming Windows Phone 7 by

Charles Petzold (free ebook)http://www.charlespetzold.com/phone/

o Windows Phone 7 Developer Guidehttp://msdn.microsoft.com/en-us/library/gg490765.aspx

o quickstartshttp://create.msdn.com/en-us/education/quickstarts

o the noun project (icons for your app)http://thenounproject.com/

break

THE MARKETPLACE

marketplaceo integrated into the phone

o use the zune software to browse on the PC

o free or paid apps with a trial optiono downloads, updates and payments are

managed for youo free registration for students using

DreamSpark

advantages

marketplacesteps

develop & debug

submit& validate

certify & sign

windows phone application deployment service

marketplace

marketplaceo make it appealing (use metro!)o make it stable and reliableo make it original and usefulo make it easy to useo read the certification requirements

carefullyo test your app as suggested to avoid

common certification pitfalls

best practices

marketplaceo currently not supported directly in App

Hubo use a third-party broker: appa

market / yalla appso as a student, you get 100 credits

which you can use to:o upload appso unlock devices for development

in lithuania

resourceso certification requirements

http://msdn.microsoft.com/en-us/library/hh184843(v=VS.92).aspx

o dreamsparkhttps://www.dreamspark.com/

o yalla appshttp://www.yallaapps.com/

o appa markethttp://appamarket.com/

o best practices for application marketinghttp://create.msdn.com/en-US/home/about/app_submission_walkthrough_application_marketing

thank you!