Silverlight and Windows Phone workshop

1,934 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,934
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • My presentation – universitate, msp, interests in MS products,
    Questions to know each other
    - Programming level, Silverlight, Design
  • 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

  • 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
  • 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
  • Apps usually in SL
    Games usually in XNA
  • 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
  • Use the color
  • 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
  • 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
  • Light experience with less buttons in bar
  • Focuses user on a single task
    Splits experience in multiple single tasks
  • Very used – allows to build pretty immersive exp
  • Not all experiences needs to be a hub
  • 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
  • Start the dev of sample application – text block in XAML and code
  • Importable from designers‘ Photoshop

    No demo yet
  • Demo with Ellipse
  • 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
  • Grid – layout system, not semantic informational display
  • 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
  • Ball pulsing demo app
    - animation in Blend
    - call it from code
  • Silverlight and Windows Phone workshop

    1. 1. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Silverlight programming on Microsoft Phone Radu Poenaru Microsoft Student Partner
    2. 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. 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. 4. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® New Start Philosophy Customer Design Experience Platform
    5. 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. 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. 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. 8. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Windows Phone Team goals Presentation Title | PP | DD Microsoft
    9. 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. 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. 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. 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. 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. 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. 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. 16. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop Themes
    17. 17. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Typography Make words feel welcome Pay attention to balance, weight & scale
    18. 18. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone®
    19. 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. 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. 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. 22. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop Gestures
    23. 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. 24. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Common controls
    25. 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. 26. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Tabs Separate multiple tasks Tap or flick tabs to change them
    27. 27. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Hubs Rich experience Aggregate multiple sources
    28. 28. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Hubs vs. Single-PageApps
    29. 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. 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. 31. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Questions ?
    32. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 44. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Demo • Layout demo • Attached properties
    45. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 55. Presented by Radu Poenaru at „Silverlight and Windows“ Workshop ® Windows Phone® Get Twitter data
    56. 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!

    ×