md2010 jl-wp7-sl-dev
DESCRIPTION
TRANSCRIPT
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)
[email protected] - @joslat