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
Dec 22, 2015
Silverlight DevelopmentWin Phone 7
Mohammed M. MelhemSenior ICT Assistant: Application Developer
@4mworldwww.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
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
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
Silverlight and the Web
HTML / JavaScript HTML / .NET
XAML / JavaScript XAML / .NET
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
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
• 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
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
14
XAML Sample
<Canvas xmlns="http://schemas.microsoft.com/client/2007" > <TextBlock FontSize="32" Text="Hello world" /></Canvas>
Hello world
Silverlight and Win Phone |TechDay 2011 | 26 April, 2011
15
Markup = Object Model
<TextBlock FontSize="32" Text="Hello world" />
TextBlock t = new TextBlock();t.FontSize = 32;t.Text = "Hello world";
=
Silverlight and Win Phone |TechDay 2011 | 26 April, 2011
16
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>
Silverlight and Win Phone |TechDay 2011 | 26 April, 2011
17
<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>
Silverlight and Win Phone |TechDay 2011 | 26 April, 2011
18
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>
The Canvas
The Rectangle
Silverlight and Win Phone |TechDay 2011 | 26 April, 2011
19
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>
Silverlight and Win Phone |TechDay 2011 | 26 April, 2011
20
Canvas (3)
<Canvas> <Rectangle/></Canvas>
Canvas canvas = new Canvas();Rectangle rectangle = new Rectangle();canvas.Children.Add(rectangle);
=
Silverlight and Win Phone |TechDay 2011 | 26 April, 2011
21
Attached PropertiesExample:
• 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>
Silverlight and Win Phone |TechDay 2011 | 26 April, 2011
22
Attached Properties (2)
<Rectangle Canvas.Top="25" Canvas.Left="25"/>
Rectangle rectangle = new Rectangle();rectangle.SetValue(Canvas.TopProperty, 25);rectangle.SetValue(Canvas.LeftProperty, 25);
=
Silverlight and Win Phone |TechDay 2011 | 26 April, 2011
23
Common Events• MouseMove• MouseEnter• MouseLeave• MouseWheel • MouseLeftButtonDown• MouseLeftButtonUp• KeyUp• KeyDown• GotFocus• LostFocus• Loaded
Silverlight and Win Phone |TechDay 2011 | 26 April, 2011
24
Event Example
<Canvas xmlns="…" xmlns:x="…" MouseEnter="OnMouseEnter"> </Canvas>
Canvas canvas = new Canvas();canvas.MouseEnter += OnMouseEnter;
// or more explicitly:canvas.MouseEnter += new MouseEventHandler(OnMouseEnter);
=
Silverlight and Win Phone |TechDay 2011 | 26 April, 2011
25
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"
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
• WinPhone Emulator • Developer Resourceshttp://www.microsoft.com/express/
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
Silverlight DevelopmentWin Phone 7
Mohammed M. MelhemSenior ICT Assistant: Application Developer
@4mworldwww.4m-world.com
Silverlight and Win Phone |TechDay 2011 | 26 April, 2011