1. Silverlight Development Win Phone 7 Mohammed M. Melhem Senior ICT Assistant: Application Developer @4mworld www.4m-world.com Silverlight and Win Phone |TechDay 2011 | 26 April, 2011

2. Agenda What is Silverlight? What is Win Phone7? XAML overview Development Requirements Silverlight Features Silverlight and Win Phone Demo Silverlight and Win Phone |TechDay 2011 | 26 April, 2011 2

3. WHAT IS SILVERLIGHT? An Introduction Silverlight and Win Phone |TechDay 2011 | 26 April, 2011

4. What is Silverlight Media Webcam and microphone Multicast streaming Output protection Offline DRM Business Applications Printing Rich Text, Clipboard Access, HTML Right Click, Mouse wheel, Drag Drop, Beyond the Browser Silverlight and Win Phone |TechDay 2011 | 26 April, 2011 www.4m-world.com

5. What is Silverlight Beyond the Browser Local File Access Cross Site Network Hardware Device Access COM Automation Support (Access Office, Accessing Windows) Full Keyboard Support in full screen mode Silverlight and Win Phone |TechDay 2011 | 26 April, 2011 www.4m-world.com

6. Silverlight and the Web HTML / JavaScript HTML /.NET XAML / JavaScript XAML /.NET Silverlight and Win Phone |TechDay 2011 | 26 April, 2011

7. WHAT IS WIN PHONE 7? Going mobile Silverlight and Win Phone |TechDay 2011 | 26 April, 2011

8. What is Win Phone 7 New platform “Fresh, Clean UI” Integrated with MS Cloud Completely built by MS. Support GPU with DirectX 9 Development using Silverlight & XNA Silverlight and Win Phone |TechDay 2011 | 26 April, 2011 8

9. Two Flavors of Applications 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 Silverlight and Win Phone |TechDay 2011 | 26 April, 2011

10. Superset of Silverlight 3.0 Windows Communication Foundation SOAP and REST services Integrated access to phone UI Sensors Picker for contacts and photos App Deployment & Updates Notifications Location Xbox LIVE Digital media capture & playback Media library access Isolated Storage LINQ (Objects and XML) Hub Integration Launchers Choosers Touch Hardware buttons Accelerometer Common Capabilities Input Media Data.NET Phone Access Integrated With Cloud Services OS Integration Silverlight and Win Phone |TechDay 2011 | 26 April, 2011

11. Silverlight & Win Phone Important points Uses the same base class library Has been modified for performance Integrated with the hardware Integrated with the operating system Specific API for the device (accelerometer, GPS, etc.) Uses out-of-browser model Silverlight and Win Phone |TechDay 2011 | 26 April, 2011 11

12. XAML OVERVIEW? XML + A Silverlight and Win Phone |TechDay 2011 | 26 April, 2011

13. XAML overview XAML = eXtensible Application Markup Language Flexible XML document schema Examples: WPF, Silverlight, Workflow Foundation More compact than code Enables rich tooling support While still preserving good readability and hand-coding within text editors Silverlight and Win Phone |TechDay 2011 | 26 April, 2011 13

14. XAML Sample <Canvas xmlns="http://schemas.microsoft.com/client/2007" > xmlns="http://schemas.microsoft.com/client/2007" > </Canvas><Canvas xmlns="http://schemas.microsoft.com/client/2007" > xmlns="http://schemas.microsoft.com/client/2007" > </Canvas> Hello world Silverlight and Win Phone |TechDay 2011 | 26 April, 2011 14

15. Markup = Object Model TextBlock t = new TextBlock(); t.FontSize = 32; t.Text = "Hello world"; TextBlock t = new TextBlock(); t.FontSize = 32; t.Text = "Hello world"; = Silverlight and Win Phone |TechDay 2011 | 26 April, 2011 15

16. Some XAML to get you started Hello Hello there, how are you? Hello Hello there, how are you? Silverlight and Win Phone |TechDay 2011 | 26 April, 2011 16

17. Silverlight and Win Phone |TechDay 2011 | 26 April, 2011 17

18. Canvas Is a Drawing Surface Children have relative positions: <Rectangle Canvas.Top="25" Canvas.Left="25" <Rectangle Canvas.Top="25" Canvas.Left="25" Width="200" Height="150" Fill="Yellow" /> Width="200" Height="150" Fill="Yellow" /></Canvas> <Rectangle Canvas.Top="25" Canvas.Left="25" <Rectangle Canvas.Top="25" Canvas.Left="25" Width="200" Height="150" Fill="Yellow" /> Width="200" Height="150" Fill="Yellow" /></Canvas> Silverlight and Win Phone |TechDay 2011 | 26 April, 2011 18

19. Canvas (2) Position relative to first Canvas parent: <Canvas Canvas.Top="25" Canvas.Left="25" <Canvas Canvas.Top="25" Canvas.Left="25" Width="150" Height="100" Width="150" Height="100" Background="Red"> Background="Red"> <Ellipse Canvas.Top="25" <Ellipse Canvas.Top="25" Canvas.Left="25" Canvas.Left="25" Width="150" Width="150" Height="75" Height="75" Fill=“White" /> Fill=“White" /> </Canvas> <Canvas Canvas.Top="25" Canvas.Left="25" <Canvas Canvas.Top="25" Canvas.Left="25" Width="150" Height="100" Width="150" Height="100" Background="Red"> Background="Red"> <Ellipse Canvas.Top="25" <Ellipse Canvas.Top="25" Canvas.Left="25" Canvas.Left="25" Width="150" Width="150" Height="75" Height="75" Fill=“White" /> Fill=“White" /> </Canvas> Silverlight and Win Phone |TechDay 2011 | 26 April, 2011 19

20. Canvas (3) <Canvas> </Canvas><Canvas> </Canvas> Canvas canvas = new Canvas(); Rectangle rectangle = new Rectangle(); canvas.Children.Add(rectangle); Canvas canvas = new Canvas(); Rectangle rectangle = new Rectangle(); canvas.Children.Add(rectangle); = Silverlight and Win Phone |TechDay 2011 | 26 April, 2011 20

21. Attached Properties Example: Top property only make sense inside a Canvas When we add new layouts, do we add new properties to Rectangle? Solution: attached properties! Silverlight and Win Phone |TechDay 2011 | 26 April, 2011 21

22. Attached Properties (2) Rectangle rectangle = new Rectangle(); rectangle.SetValue(Canvas.TopProperty, 25); rectangle.SetValue(Canvas.LeftProperty, 25); Rectangle rectangle = new Rectangle(); rectangle.SetValue(Canvas.TopProperty, 25); rectangle.SetValue(Canvas.LeftProperty, 25); = Silverlight and Win Phone |TechDay 2011 | 26 April, 2011 22

23. Common Events MouseMove MouseEnter MouseLeave MouseWheel MouseLeftButtonDown MouseLeftButtonUp KeyUp KeyDown GotFocus LostFocus Loaded Silverlight and Win Phone |TechDay 2011 | 26 April, 2011 23

24. Event Example <Canvas xmlns="…" xmlns:x="…" MouseEnter="OnMouseEnter"> MouseEnter="OnMouseEnter"></Canvas> <Canvas xmlns="…" xmlns:x="…" MouseEnter="OnMouseEnter"> MouseEnter="OnMouseEnter"></Canvas> Canvas canvas = new Canvas(); canvas.MouseEnter += OnMouseEnter; // or more explicitly: canvas.MouseEnter += new MouseEventHandler(OnMouseEnter); Canvas canvas = new Canvas(); canvas.MouseEnter += OnMouseEnter; // or more explicitly: canvas.MouseEnter += new MouseEventHandler(OnMouseEnter); = Silverlight and Win Phone |TechDay 2011 | 26 April, 2011 24

25. Custom Elements in XAML Custom Element = custom class (Markup = object model) Use XML namespaces XML namespace declaration tells where to find class xmlns:prefix="clr-namespace:SomeNamespace; assembly=SomeAssembly.dll" Silverlight and Win Phone |TechDay 2011 | 26 April, 2011 25

26. DEVELOPMENT? Lets have some action Silverlight and Win Phone |TechDay 2011 | 26 April, 2011

27. Development Requirements Phone Developer Tools http://msdn.microsoft.com/en-us/library/ff402530(v=VS.92).aspx http://msdn.microsoft.com/en-us/library/ff402530(v=VS.92).aspx WinPhone Emulator Developer Resources http://www.microsoft.com/express/ Silverlight and Win Phone |TechDay 2011 | 26 April, 2011 27

28. BROWSER APPLICATION Lets rock!! Silverlight and Win Phone |TechDay 2011 | 26 April, 2011

29. WIN PHONE 7 APPLICATION Lets rock!! Silverlight and Win Phone |TechDay 2011 | 26 April, 2011

31. Resources www.silverlight.net www.microsoft.com/silverlight http://msdn.microsoft.com/en-us/ff728590 http://channel9.msdn.com/ Silverlight and Win Phone |TechDay 2011 | 26 April, 2011 31

32. Silverlight Development Win Phone 7 Mohammed M. Melhem Senior ICT Assistant: Application Developer @4mworld www.4m-world.com Silverlight and Win Phone |TechDay 2011 | 26 April, 2011