Silverlight Development Win Phone 7

1. Silverlight DevelopmentWin Phone 7 Mohammed M. Melhem Senior ICT Assistant: Application Developer @4mworld www.4m-world.com

2. Agenda • What is Silverlight? • What is Win Phone7? • XAML overview • Development Requirements • Silverlight Features • Silverlight and Win Phone • Demo

3. An Introduction What is Silverlight? Part 1

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

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

6. Silverlight and the Web

7. Going mobile What is Win Phone 7? Part 2

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

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

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

11. XML + A XAML overview? Part 3

12. 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

13. XAML Sample <Canvas xmlns="http://schemas.microsoft.com/client/2007" > <TextBlockFontSize="32" Text="Hello world" /> </Canvas> Hello world

14. Markup = Object Model <TextBlockFontSize="32" Text="Hello world" /> • = TextBlock t = new TextBlock(); t.FontSize = 32; t.Text = "Hello world";

15. Some XAML to get you started <TextBlock>Hello</TextBlock> <TextBlock FontSize=”18”>Hello</TextBlock> <TextBlock FontFamily=”Courier New”>Hello</TextBlock> <TextBlock TextWrapping=”Wrap” Width=”100”> Hello there, how are you? </TextBlock>

16. <Rectangle Canvas.Top=”25” Canvas.Left=”25” Width=”200” Height=”150”> <Rectangle.Fill> <SolidColorBrush Color=”Black” /> </Rectangle.Fill> </Rectangle> <Rectangle Width=”200” Height=”150” > <Rectangle.Fill> <LinearGradientBrush StartPoint=”0,0” EndPoint=”1,1”> <LinearGradientBrush.GradientStops> <GradientStop Color=”Red” Offset=”0” /> <GradientStop Color=”Black” Offset=”1” /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Rectangle.Fill> </Rectangle>

17. The Canvas The Rectangle Canvas • Is a Drawing Surface • Children have relative positions: <Canvas Width="250" Height="200"> <Rectangle Canvas.Top="25" Canvas.Left="25" Width="200" Height="150" Fill="Yellow" /> </Canvas>

18. Canvas (2) • Position relative to first Canvas parent: <Canvas Background="Light Gray"> <Canvas Canvas.Top="25" Canvas.Left="25" Width="150" Height="100" Background="Red"> <Ellipse Canvas.Top="25" Canvas.Left="25" Width="150" Height="75" Fill=“White" /> </Canvas> </Canvas>

19. Canvas (3) <Canvas> <Rectangle/> </Canvas> • = Canvas canvas = new Canvas(); Rectangle rectangle = new Rectangle(); canvas.Children.Add(rectangle);

20. 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! <Canvas> <Rectangle Canvas.Top="25"/> </Canvas>

21. Attached Properties (2) <Rectangle Canvas.Top="25" Canvas.Left="25"/> • = Rectangle rectangle = new Rectangle(); rectangle.SetValue(Canvas.TopProperty, 25); rectangle.SetValue(Canvas.LeftProperty, 25);

22. Common Events • MouseMove • MouseEnter • MouseLeave • MouseWheel • MouseLeftButtonDown • MouseLeftButtonUp • KeyUp • KeyDown • GotFocus • LostFocus • Loaded

23. Event Example <Canvas xmlns="…" xmlns:x="…" MouseEnter="OnMouseEnter"> </Canvas> • = Canvas canvas = new Canvas(); canvas.MouseEnter += OnMouseEnter; // or more explicitly: canvas.MouseEnter += new MouseEventHandler(OnMouseEnter);

24. Custom Elements in XAML • Custom Element = custom class • (Markup = object model) • Use XML namespaces • <prefix:CustomClass/> • XML namespace declaration tells where to find class • xmlns:prefix="clr-namespace:SomeNamespace; assembly=SomeAssembly.dll"

25. Lets have some action Development? Part 3

26. Development Requirements • Phone Developer Toolshttp://msdn.microsoft.com/en-us/library/ff402530(v=VS.92).aspx • WinPhone Emulator • Developer Resources http://www.microsoft.com/express/

27. Lets rock!! Browser application Demo

28. Lets rock!! Win phone 7 application Demo

29. QUESTIONS?

30. Resources • www.silverlight.net • www.microsoft.com/silverlight • http://msdn.microsoft.com/en-us/ff728590 • http://channel9.msdn.com/

31. Silverlight DevelopmentWin Phone 7 Mohammed M. Melhem Senior ICT Assistant: Application Developer @4mworld www.4m-world.com