Silverlight Development Win Phone 7 Mohammed M. Melhem Senior ICT Assistant: Application Developer...

Silverlight DevelopmentWin Phone 7

Mohammed M. MelhemSenior ICT Assistant: Application Developer

@4mworldwww.4m-world.com

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

http://www.4m-world.com/

2

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


WHAT IS SILVERLIGHT?An Introduction

PART 1Silverlight 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


WHAT IS WIN PHONE 7?Going mobile


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


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


• 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


XAML OVERVIEW?XML + A


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


14

XAML Sample

<Canvas xmlns="http://schemas.microsoft.com/client/2007" > <TextBlock FontSize="32" Text="Hello world" /></Canvas>

Hello world


15

Markup = Object Model

<TextBlock FontSize="32" Text="Hello world" />

TextBlock t = new TextBlock();t.FontSize = 32;t.Text = "Hello world";

=


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>


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>


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


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>


20

Canvas (3)

<Canvas> <Rectangle/></Canvas>

Canvas canvas = new Canvas();Rectangle rectangle = new Rectangle();canvas.Children.Add(rectangle);

=


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>


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);

=


23

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


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);

=


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"


DEVELOPMENT?Lets have some action


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/


http://msdn.microsoft.com/en-us/library/ff402530(v=VS.92).aspx

http://www.microsoft.com/express/

BROWSER APPLICATIONLets rock!!

DEMOSilverlight and Win Phone |TechDay 2011 | 26 April, 2011

WIN PHONE 7 APPLICATIONLets rock!!

DEMOSilverlight and Win Phone |TechDay 2011 | 26 April, 2011

QUESTIONS?


31

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


http://www.silverlight.net/

http://www.microsoft.com/silverlight

http://msdn.microsoft.com/en-us/ff728590

http://channel9.msdn.com/

Silverlight DevelopmentWin Phone 7

Mohammed M. MelhemSenior ICT Assistant: Application Developer

@4mworldwww.4m-world.com


http://www.4m-world.com/

Silverlight Development Win Phone 7 Mohammed M. Melhem Senior ICT Assistant: Application Developer...

Documents

Transcript of Silverlight Development Win Phone 7 Mohammed M. Melhem Senior ICT Assistant: Application Developer...