Zagreb, 23. rujna 2010.

Developing WP7 Apps with Silverlight

José Luis LatorreMicrosoft MVP, UX Specialist & Brainsiders CEOhttp://silverlightguy.com

Generalni sponzori:

Glavni sponzori:

Sponzori:

Organizatori:

Medijski sponzori: Strateški partneri:

Službena PR agencija:

Generalni medijski sponzor:

Application Framework details

Common Base Class Library

Collections ComponentModel Configuration

DiagnosticsReflection IO

Security Threading

Runtime Resources Globalization TextLocation Net

ServiceModel Linq

Application Object

Silverlight Presentation and Media

XNA Frameworks for Games

Windows Phone Frameworks

NavigationShapes Markup Media

Controls Drawing IsolatedStorage

AudioMedia GraphicsInput

Drawing GamerServices

Content

PhoneApplicationPage

PushNotification

WebBrowserControl

SensorsPhoneApplicationFra

me

CameraDevice

IntegrationLaunchers &

ChoosersWindows Phone

Controls

What is Silverlight?

Powerful Development Platform

Engaging, Interactive User Experiences

Silverligh capabilities

Inputs

• Keyboard• Mouse• Touch• Ink

Media

• Digital media capture & playback• VC1, WMA, MP3

Data• Language Integrated Query (LINQ)• LINQ to XML• XML• IsolatedStorageBase Class Library (BCL)• Generics• Collections• Cryptography• Threading

Windows Communication Foundation

• REST• RSS/ATOM• SOAP

XAMLUI Core• Vector• Animation• Text• Images

What Silverlight version do we have?

Performance tuning

Input integration

H/W media and sensor integration

OS application model integration

Relaxed sandbox constraints

It is Silverlight 3 but adding:

What makes Silverlight so Special?

MXeXtensible

A LApplication Markup Language

XML

Declarative Markup

<Grid> <TextBlock FontSize="48" Text="Hello world" /></Grid>

What makes Silverlight so Special?

CodeXAML

XAML maps to code

Anything in XAML can be done in code

Silverligth App Model - What’s a XAP?

Tools

Common format for all Windows Phone apps & games

Declarative, manifest-based installation

Integrated into security model of phone

myapp.xap

An overview of a Silverlight app for WP7

Windows Phone application

Application

Frame

Page 3Page 1 Page 2

Silverlight Controls

• Conforming to Metro Design Guidelines.• Consistent Look & Feel.• Familiar to existing Silverlight developers.• They adapt to the current Theme.

OUTPUT

Media

• Media support– H/W decode– MediaStreamSource– PlayReady DRM

• XNA framework sound effect API– Supports polyphony and looping

• MediaElement– Only supports one MediaElement for page– VideoBrush is not supported

XNA for Windows Phone 7

• Using XNA audio capabilities is needed– Using namespace Microsoft.Xna.Framework.Audio– Together with SoundEffect and SoundEffectInstance– Adding the Wav sound file as a content element to the

project.

// AudioSoundEffect soundEffect; string soundName = "kaboom";

// Loading and playing audiosoundEffect = contentManager.Load<SoundEffect>(soundName); soundEffect.Play();

Vibration

• Makes the phone vibrate during a specific duration– Useful for giving a tactile response to the user.– To notify users of an update.

VibrateController vc = VibrateController.Default;vc.Start(TimeSpan.FromSeconds(3));

Microsoft.Devices.Sensors

INPUT

SIP I

• SIP Stands for Software Input Panel.• The TextBox Silverlight control integrates with SIP• SIP supports around 60 different InputScopes:

SIP II

• SIP can be personalized with several versions of the keyboard that the user can select between.

• But the application can also show the optimum keyboard.

• We use InputScope to do that, for example:<TextBox Grid.Row="1" Name="tbNombre" Text=""> <TextBox.InputScope> <InputScope> <InputScopeName NameValue="PersonalGivenName"></InputScopeName> </InputScope> </TextBox.InputScope></TextBox>

A Silverlight “Hello World” for WP7(link to demo)

Accelerometer

• Measures force applied on each axis over time.

+Y

-Y

+X-X

+Z

-Z

Accelerometer I

• Getting data from the Accelerometer1. Add a refference to Microsoft.Devices.Sensors2. Add the corresponding using

3. Declare the variable AccelerometerSensor

4. Get an instance of the AccelerometerSensor

using Microsoft.Devices.Sensors;

AccelerometerSensor accelerometer;

if (accelerometer == null) { sensor accelerometer = new AccelerometerSensor();}

+Y

-Y

+X-X

+Z

-Z

Accelerometer II

• Getting data from the Accelerometer5. Suscribe to the event ReadingChanged

6. Create the event handler

7. Initialize the accelerometer

accelSensor.ReadingChanged += new EventHandler<AccelerometerReadingAsyncEventArgs>(AccelerometerReadingChanged);

public void AccelerometerReadingChanged(object sender, AccelerometerReadingAsyncEventArgs e){ accelReading.X = (float)e.Value.Value.X; accelReading.Y = (float)e.Value.Value.Y; accelReading.Z = (float)e.Value.Value.Z;}

Accelsensor.Start();

+Y

-Y

+X-X

+Z

-Z

OS INTEGRATION

Application Bar & Context Menu

• The «Application Bar» is a control system that provides a quick addition of a tool bar for our WP7 application.

• Apart from the Application Bar, applications can provide additional options like showing one or more menu elements.

Microsoft.Phone.Shell

Application Bar & Context Menu

• By default we have a sample XAML Code for quickly enabling this features on our applications:

<phone:PhoneApplicationPage.ApplicationBar> <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True"> <shell:ApplicationBarIconButton IconUri=“/appbar_button1.png" Text="Button 1"/> <shell:ApplicationBarIconButton IconUri=“/appbar_button2.png" Text="Button 2"/> <shell:ApplicationBar.MenuItems> <shell:ApplicationBarMenuItem Text="MenuItem 1"/> <shell:ApplicationBarMenuItem Text="MenuItem 2"/> </shell:ApplicationBar.MenuItems> </shell:ApplicationBar></phone:PhoneApplicationPage.ApplicationBar>

Navigation: Frame and Page

• Frame – Is the topmost container control.– PhoneApplicationFrame class.– Contains the page control and sytsem

elements, like System Tray, app bar, etc..

• Page– Fills the entire content region of the

Frame.– Derives from the class

PhoneApplicationPage.– Contains a title.– Can have its own application bar.

Orientation

• In VS2010 we can add a Landscape Page or a Portrait Page.

• The only difference is on the property SupportedOrientation which can be:– Portrait– Landscape– PortraitOrLandscape

• We can’t change the page orientation in code.• But we can react to its changes through the

OrientationChanged event.

Silverlight Toolkit(link to demo)

jose@brainsiders.com - @joslat