Silverlight and Windows Phone workshop
0 likes993 views
This document summarizes a presentation about developing applications for Windows Phone 7 using Silverlight. It introduces Windows Phone 7, Silverlight for Windows Phone, and the Blend design tool. It covers common Silverlight controls and concepts like layouts, transforms, animations, styling and binding. It also discusses LINQ and code reuse in Silverlight. The presentation aims to demonstrate how to create a simple Silverlight app and use Blend 4 for designing the user interface.
Silverlight and Windows Phone workshop
- 1. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Silverlight programming on Microsoft Phone Radu Poenaru Microsoft Student Partner
- 2. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Today‘s agenda • Introduction in Windows Phone 7 • Silverlight for Windows Phone • Blend design • LINQ • Lunch break • Building our Twitter Client
- 3. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Let‘s start! Introduction in Windows Phone 7 • Silverlight for Windows Phone • Blend design • Lunch break • Building our Twitter Client
- 4. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® New Start Philosophy Customer Design Experience Platform
- 5. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Integrated Experiences Presentation Title | PP | DD Microsoft PEOPLE OFFICE MARKETPLACE PICTURES MUSIC+VIDEO GAMES
- 6. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Hardware • Common hardware • Common platform • Many producers • HTC • Samsung • LG • Etc Presentation Title | PP | DD Microsoft • Only one resolution at launch: 800 x 480 pixels • Second resolution will be added later: 480 x 320 • Identical touch Input • Consistent processor and GPU • Identical RAM size
- 7. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Applications Presentation Title | PP | DD Microsoft Browser Web Site Web API people + standards + server code + client code experiences Hosted in the Cloud
- 8. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Windows Phone Team goals Presentation Title | PP | DD Microsoft
- 9. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Application Platform Presentation Title | PP | DD CLOUD SCREEN Cloud Services Runtime – On “Screen” Code you write on the client Code you write on the server Tools & Support Developer Portal Services Tools you use to design & develop Tools you use to ship & sell Sensors Media Data Xbox LIVE Notifications .NET Framework managed code sandbox Location Phone Phone Emulator Samples Documentation Guides Community Packaging and Verification Tools Notifications Location Identity Feeds MapsSocial App Deployment Registration Validation Certification Publishing Marketplace MO and CC Billing Business Intelligence Update Management
- 10. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Two different approaches Presentation Title | PP | DD Microsoft High performance game framework Rapid creation of multi-screen 2D and 3D games Rich content pipeline Mature, robust, widely adopted technology spanning Xbox 360, Windows, and Zune Modern XAML/event-driven application UI framework Rapid creation of visually stunning apps Metro-themed UI controls HTML/JavaScript 500,000 developers spanning Windows and web
- 11. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Common features for SL and XNA • Input • Touch • Hardware buttons • Media • Digital media capture & playback • Media library access • Data • Isolated storage • LINQ for both Objects and XML • .Net • Superset of Silverlight 3 • WCF – SOAP and REST services • Phone access • Integrated access to Phone UI • Sensors • Pickers for contacts and photos • Integration with Cloud Services • App deployment and updates • Notifications • Location • Xbox LIVE Presentation Title | PP | DD Microsoft
- 12. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® What am I producing? Presentation Title | PP | DD Microsoft Tools • One format for all Windows Phone apps & games • Simple, declarative, manifest-based installation • Tightly integrated into security model of phone myapp.xap
- 13. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Pathway to the customer (1) Presentation Title | PP | DD Microsoft Tools myapp.xap Windows Phone Emulator Windows Phone device Development Stage Developer tests Tests with hardware and beta testers
- 14. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Pathway to the customer (2) Packaging & Verification Tools Submit & validate Certify and sign Windows Phone Application Deployment Service Marketplace Developer Microsoft portal Customer
- 15. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® UI and design – Metro experience • Three important things: Personal Weather surfaced on the live tile in Start Relevant Weather updated based on your location Connected Weather for your contacts
- 16. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop Themes
- 17. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Typography Make words feel welcome Pay attention to balance, weight & scale
- 18. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone®
- 19. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Motion Use motion to delight the user Remember that pacing is important: the more you use it, the less special it becomes
- 20. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Make It Easy to Use Familiar = Easy to use Provide consistent and predictable experience
- 21. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Hardware Implications Hardware buttons Optional landscape keyboards Design for one hand usage whenever possible
- 22. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop Gestures
- 23. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Touch Recommended touch target size is 9mm Minimum touch target size is 7mm Minimum spacing between elements is 2mm Visual size is 60-100% of the touch target size
- 24. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Common controls
- 25. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Application Bar + Menu Up to 4 Icons You don’t need to fill all 4 controls Swipe up the bar to bring up the menu
- 26. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Tabs Separate multiple tasks Tap or flick tabs to change them
- 27. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Hubs Rich experience Aggregate multiple sources
- 28. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Hubs vs. Single-PageApps
- 29. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Iconography Icons in the application menu should be consistent Test icons with users (pay attention to context)
- 30. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Sources of information • Official Microsoft Phone website: http://www.microsoft.com/windowsmobile/en-gb/default.mspx • Windows Phone for developers http://developer.windowsphone.com/ • Windows Phone UI Design http://microsoftfeed.com/2010/windows-phone-ui-design-and- interaction-guides/ • Mix 2010 event http://live.visitmix.com/Sessions
- 31. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Questions ?
- 32. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Today‘s agenda • Introduction in Windows Phone 7 Silverlight for Windows Phone Blend design • LINQ • Lunch break • Building our Twitter Client
- 33. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® What we are trying to achieve • How to create a simple Silverlight app • Use Blend 4 for Phone for design http://70gigapixel.cloudapp.net/
- 34. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® What is Silverlight? “Silverlight is a powerful development platform for creating engaging, interactive user experiences for Web, desktop, and mobile applications when online or offline.” Microsoft Official Silverlight website http://www.silverlight.net/
- 35. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Silverlight • Very powerful framework • Same known XAML and C# • Windows, Mac, Linux and now Phone • Learning curve is smooth
- 36. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Silverlight capacities Inputs • Keyboard • Mouse • Touch • Ink Media • Digital media capture & playback • VC1, WMA, MP3 Data • Language Integrated Query (LINQ) • LINQ to XML • XML • IsolatedStorage Base Class Library (BCL) • Generics • Collections • Cryptography • Threading Windows Communication Foundation • REST • RSS/ATOM • SOAP XAML UI Core • Vector • Animation • Text • Images
- 37. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® What about Silverlight for Phone It is a superset of Silverlight 3 having several elements from Silverlight 4 and many extras: • Performance tuning • Input integration • Hardware media and sensor integration • OS application model integration • Relaxed sandbox constraints
- 38. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Let‘s see some code • XAML – eXtensible Application Markup Language • XML with custom tags • Maps to code • Can contain as children • resources • styles • controls • supports binding • Anything that is done in XAML can be done in code Let‘s see some demo
- 39. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Shapes • Vector- based • Easy to scale, keeping the smoothness • Can be easily imported from Photoshop or Illustrator • Example(ellipse code):
- 40. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Brushes • Determines how objects are painted and outlined • Solid – filled with just one color • Gradient – linear or radial with multiple stop points • Image – shows an image in the brush • Media – paints with a playing movie Let‘s see a Demo!
- 41. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Controls • Encapsulate functionality • Requires a x:Name if you plan to call it from the code • Same properties in XAML as in Code
- 42. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Events • Can be created in XAML and Code • XAML editor helps you create a handler
- 43. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Layout containers • Flexible Layout system • Canvas – fixed position • StackPanel – „Stacks“ dynamically • Grid – rows and columns, very flexible • Can be nested – but beware of performance issues
- 44. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Demo • Layout demo • Attached properties
- 45. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Transforms • Alters any element • Controls • Text • Media • Transforms • Rotate, Scale, Skew ,Translate, Matrix • Projections • Plane, Matrix, • Apply 3D to a 2D element
- 46. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Animations • Animates a property value over the time • Basic elements in a page • Contains one or more Storiboards • Contains one or more Animations • Contains one or more Keyframes • Expression Blend is the best tool to do this Let‘s see some demo!
- 47. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Styling • Applies a set of values to a specific target type • Created in page Resources, application Resources or a ResourceDictionary • Requires • x:Key • TargetType • On the element – StaticResource pointing to the x:Key
- 48. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Binding • Connects data to UI • Two types • Property binding • List binding • Value converters – ex take color Red and convert it to hex representation • Based on change notification • Cascades through the hierarchy of controls • Let‘s see a demo
- 49. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Code reuse • Reuse UI • User controls • Custom controls • Reuse code • Across projects • Across platforms – Web, Desktop through OOB, Phone
- 50. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® References • Search for Silverlight 3 source: • Forums, books, podcasts • http://silverlight.net • http://www.stackoverflow.com • Get Started with Silverlight for Windows Phone http://www.silverlight.net/getstarted/devices/windows-phone/ • Silverlight for Windows Phone forum http://forums.silverlight.net/forums/63.aspx • Mix 2010 event http://live.visitmix.com/Sessions
- 51. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Today‘s agenda • Introduction in Windows Phone 7 • Silverlight for Windows Phone • Blend design LINQ • Lunch break • Building our Twitter Client
- 52. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® LINQ “LINQ is a set of extensions to the .NET Framework that encompass language-integrated query, set, and transform operations. It extends C# and Visual Basic with native language syntax for queries and provides class libraries to take advantage of these capabilities.” LINQ website
- 53. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Flavours of LINQ • LINQ to Entities • LINQ to SQL • LINQ to XML • LINQ Over DataSet • LINQ to CSV • etc
- 54. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® LINQ syntax • Similar syntax with MSSQL and other flavours of SQL • Differences • For enabling Intellisense, first you have to set the from clause • The last one is select • Query taken from 101 LINQ Samples http://msdn.microsoft.com/en-us/vcsharp/aa336746.aspx Hint : it is easier found on Bing than typing this link
- 55. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Get Twitter data
- 56. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Comments and sugestions are welcome! radu.poenaru@studentpartners.de www.radupoenaru.com Thank you!
Editor's Notes
- #2: My presentation – universitate, msp, interests in MS products, Questions to know each other - Programming level, Silverlight, Design
- #7: Goals Highest priority: delighting the user. Consistency : One sees the phone and when buying another brand- same experience Choice : flexibility, choice of color, keyboard : DIVERSITY Developer: largest possible coverages of users – little change in hw design – no more testing for many screen sizes, processors etc Thus consistency will standardize the choisability
- #9: Cheap: VS Express for Phone + Blend 4 for Phone + Students are exempt from annual subscription fee in Marketplace 2: easy to use, reliable technology Standardized: apps created for a specific model will run the same and have same appereance on same class of devices. Tools: reuse of skills : C# and XAML + extensive set of apis that enable users to easily start. Users experience: powerful code + good designer will make it happen
- #10: 1Two flavours : XAML and XNA 2 One download to setup, extra dowload for Blend 3 Cloud services – apps can be yours(u build, u consume + Azure), theirs(WCF and their apis: Twitter), MS 4
- #11: Apps usually in SL Games usually in XNA
- #16: These are the principles that guide the experience Personal – it‘s a personal device – allow user to add it on main screen Relevant – relevant to user interaction and location of user Social – reffers to friends location
- #17: Use the color
- #20: It‘s built in and nice to show. But it‘s like in an action movie: if it is 100% action you‘ll finish the movie tired. Same applies here – too much animaton can bother and tire the user
- #25: Are a way of building consistent experience Silverlight is flexible and you can make new controls - but be consistent Pay attention to : - interaction - visual style - motion
- #26: Light experience with less buttons in bar
- #27: Focuses user on a single task Splits experience in multiple single tasks
- #28: Very used – allows to build pretty immersive exp
- #29: Not all experiences needs to be a hub
- #38: 0 Examples for SL 3 apply to the Phone 1 2 the text box has a associated sw keyboard, list have implemented phisyx 3 same video experience, sensors : vibr, location services 4 app is part from experience – same look as Phone 5 security concerns – relax cross-domain policy check
- #39: Start the dev of sample application – text block in XAML and code
- #40: Importable from designers‘ Photoshop No demo yet
- #41: Demo with Ellipse
- #43: VS can create the events for you Or you can create them by hand Default event handler for Button – Click event Or by double clicking
- #44: Grid – layout system, not semantic informational display
- #45: Attached properties A ball doesn‘t now its position, but the parent can provide it. Canvas – not so flexible, phone can be rotated Stack panel Grid – rows : auto or * or pixels
- #47: Ball pulsing demo app - animation in Blend - call it from code