building a silverlight 7 applicationsilverlight on windows phone 7 ð§base on silverlight 3 and...
TRANSCRIPT
![Page 1: Building a Silverlight 7 ApplicationSilverlight on Windows Phone 7 ð§Base on Silverlight 3 and above ð§Some phone-specific additions ð§Silverlight runtime optimized to display](https://reader033.vdocuments.net/reader033/viewer/2022051913/6004b1b8bd179d4f401f610f/html5/thumbnails/1.jpg)
Building aSilverlightApplication
7AkberWindow Phone 7 DevelopmentEP.NET Professionals User Grouphttp://www.epdotnet.com
![Page 2: Building a Silverlight 7 ApplicationSilverlight on Windows Phone 7 ð§Base on Silverlight 3 and above ð§Some phone-specific additions ð§Silverlight runtime optimized to display](https://reader033.vdocuments.net/reader033/viewer/2022051913/6004b1b8bd179d4f401f610f/html5/thumbnails/2.jpg)
AgendaSilverlight on Windows PhoneCreating our first applicationResponding to control eventsWindows phone themes and stylesCustomizing text inputAn introduction to databinding in SilverlightQ&A
![Page 3: Building a Silverlight 7 ApplicationSilverlight on Windows Phone 7 ð§Base on Silverlight 3 and above ð§Some phone-specific additions ð§Silverlight runtime optimized to display](https://reader033.vdocuments.net/reader033/viewer/2022051913/6004b1b8bd179d4f401f610f/html5/thumbnails/3.jpg)
Windows Phone
Silverlight onWindows Phone
![Page 4: Building a Silverlight 7 ApplicationSilverlight on Windows Phone 7 ð§Base on Silverlight 3 and above ð§Some phone-specific additions ð§Silverlight runtime optimized to display](https://reader033.vdocuments.net/reader033/viewer/2022051913/6004b1b8bd179d4f401f610f/html5/thumbnails/4.jpg)
Silverlight on Windows Phone 7
Base on Silverlight 3 and above Some phone-specific additions
Silverlight runtime optimized to display content onmemory-constrained devices Applications hosted on the client device Does not support applications hosted in the browser
C# only support – New VB.NET is now supportedwith Community Technology Preview
![Page 5: Building a Silverlight 7 ApplicationSilverlight on Windows Phone 7 ð§Base on Silverlight 3 and above ð§Some phone-specific additions ð§Silverlight runtime optimized to display](https://reader033.vdocuments.net/reader033/viewer/2022051913/6004b1b8bd179d4f401f610f/html5/thumbnails/5.jpg)
Silverlight Project Types
Visual studio offers three project templates Windows Phone Application – a basic, single page
application Windows Phone List Application – a working app consisting
of a list of data items which goes to Details page when anitem is selected
Windows Phone Class Library – a library for shared logicwith no pre-built UI
The starter projects already adopt the look and feelof the Windows Phone platform
![Page 6: Building a Silverlight 7 ApplicationSilverlight on Windows Phone 7 ð§Base on Silverlight 3 and above ð§Some phone-specific additions ð§Silverlight runtime optimized to display](https://reader033.vdocuments.net/reader033/viewer/2022051913/6004b1b8bd179d4f401f610f/html5/thumbnails/6.jpg)
Silverlight Controls Silverlight control
set is rich Familiar to existing
Silverlight developer Some additional
features For example,
Software InputPanel (SIP) supporton Textbox
![Page 7: Building a Silverlight 7 ApplicationSilverlight on Windows Phone 7 ð§Base on Silverlight 3 and above ð§Some phone-specific additions ð§Silverlight runtime optimized to display](https://reader033.vdocuments.net/reader033/viewer/2022051913/6004b1b8bd179d4f401f610f/html5/thumbnails/7.jpg)
THE FUN STUFFShow Me Some Code!
![Page 8: Building a Silverlight 7 ApplicationSilverlight on Windows Phone 7 ð§Base on Silverlight 3 and above ð§Some phone-specific additions ð§Silverlight runtime optimized to display](https://reader033.vdocuments.net/reader033/viewer/2022051913/6004b1b8bd179d4f401f610f/html5/thumbnails/8.jpg)
eXtensible Application Markup Language
XAML
XML
Declarative Markup
<Grid><TextBlock FontSize="48" Text="Hello world" />
</Grid>
![Page 9: Building a Silverlight 7 ApplicationSilverlight on Windows Phone 7 ð§Base on Silverlight 3 and above ð§Some phone-specific additions ð§Silverlight runtime optimized to display](https://reader033.vdocuments.net/reader033/viewer/2022051913/6004b1b8bd179d4f401f610f/html5/thumbnails/9.jpg)
XAML maps to code
Anything in XAML can be done in code
Code
![Page 10: Building a Silverlight 7 ApplicationSilverlight on Windows Phone 7 ð§Base on Silverlight 3 and above ð§Some phone-specific additions ð§Silverlight runtime optimized to display](https://reader033.vdocuments.net/reader033/viewer/2022051913/6004b1b8bd179d4f401f610f/html5/thumbnails/10.jpg)
DEMO - XAML + CODEThe Basics
![Page 11: Building a Silverlight 7 ApplicationSilverlight on Windows Phone 7 ð§Base on Silverlight 3 and above ð§Some phone-specific additions ð§Silverlight runtime optimized to display](https://reader033.vdocuments.net/reader033/viewer/2022051913/6004b1b8bd179d4f401f610f/html5/thumbnails/11.jpg)
Vector-Based
Importable from Photoshop or Illustrator
Shapes
![Page 12: Building a Silverlight 7 ApplicationSilverlight on Windows Phone 7 ð§Base on Silverlight 3 and above ð§Some phone-specific additions ð§Silverlight runtime optimized to display](https://reader033.vdocuments.net/reader033/viewer/2022051913/6004b1b8bd179d4f401f610f/html5/thumbnails/12.jpg)
Determines how objects are painted and outlined
Solid, Gradient, Image, Media
Brushes
![Page 13: Building a Silverlight 7 ApplicationSilverlight on Windows Phone 7 ð§Base on Silverlight 3 and above ð§Some phone-specific additions ð§Silverlight runtime optimized to display](https://reader033.vdocuments.net/reader033/viewer/2022051913/6004b1b8bd179d4f401f610f/html5/thumbnails/13.jpg)
DEMO – SHAPES + BRUSHESPretty Shapes
![Page 14: Building a Silverlight 7 ApplicationSilverlight on Windows Phone 7 ð§Base on Silverlight 3 and above ð§Some phone-specific additions ð§Silverlight runtime optimized to display](https://reader033.vdocuments.net/reader033/viewer/2022051913/6004b1b8bd179d4f401f610f/html5/thumbnails/14.jpg)
DEMO – CONTROLS + EVENTSMake it Do Something
![Page 15: Building a Silverlight 7 ApplicationSilverlight on Windows Phone 7 ð§Base on Silverlight 3 and above ð§Some phone-specific additions ð§Silverlight runtime optimized to display](https://reader033.vdocuments.net/reader033/viewer/2022051913/6004b1b8bd179d4f401f610f/html5/thumbnails/15.jpg)
Windows Phone Themes
• Windows Phone 7 allows users to customize the system themon their phone Select between LightOr Dark background Select from a choice of10 accent colors
• Silverlight controls are all theme aware Adopt color schemeSelected by the user default Developer can customize control rendering and override any themed
properties
![Page 16: Building a Silverlight 7 ApplicationSilverlight on Windows Phone 7 ð§Base on Silverlight 3 and above ð§Some phone-specific additions ð§Silverlight runtime optimized to display](https://reader033.vdocuments.net/reader033/viewer/2022051913/6004b1b8bd179d4f401f610f/html5/thumbnails/16.jpg)
Apply consistent formatting
Per-page or per-application
<Style TargetType="TextBlock"x:Key="SubHeadingText">
<Setter Property="FontSize"Value="42" />
<Setter Property="Foreground"Value="Blue" />
</Style>
Styling
![Page 17: Building a Silverlight 7 ApplicationSilverlight on Windows Phone 7 ð§Base on Silverlight 3 and above ð§Some phone-specific additions ð§Silverlight runtime optimized to display](https://reader033.vdocuments.net/reader033/viewer/2022051913/6004b1b8bd179d4f401f610f/html5/thumbnails/17.jpg)
DEMO – STYLINGMake it Consistent
![Page 18: Building a Silverlight 7 ApplicationSilverlight on Windows Phone 7 ð§Base on Silverlight 3 and above ð§Some phone-specific additions ð§Silverlight runtime optimized to display](https://reader033.vdocuments.net/reader033/viewer/2022051913/6004b1b8bd179d4f401f610f/html5/thumbnails/18.jpg)
Windows Phone Styles
Silverlight for Windows Phone has a built-in resourcedictionary containing standard styles Best practices is to use these styles for sizing text,
setting colors of brushes – unless you want todevelop a custom style
To see which styles are available, look at {ProgramFiles}\Microsoft SDKs\WindowsPhone\v7.0\Design\ThemeResources.xaml
![Page 19: Building a Silverlight 7 ApplicationSilverlight on Windows Phone 7 ð§Base on Silverlight 3 and above ð§Some phone-specific additions ð§Silverlight runtime optimized to display](https://reader033.vdocuments.net/reader033/viewer/2022051913/6004b1b8bd179d4f401f610f/html5/thumbnails/19.jpg)
Control Templates
There is also a dictionary of XAML templates for thestandard controls
You can use this as a basis of any new types of customcontrol you might want to make
You can also find out how controls are put together You can find them at {Program Files}\Microsoft
SDKs\WindowsPhone\v7.0\Design\System.Windows.xaml
![Page 20: Building a Silverlight 7 ApplicationSilverlight on Windows Phone 7 ð§Base on Silverlight 3 and above ð§Some phone-specific additions ð§Silverlight runtime optimized to display](https://reader033.vdocuments.net/reader033/viewer/2022051913/6004b1b8bd179d4f401f610f/html5/thumbnails/20.jpg)
Layout
Grid | Rows & columns, very flexible
Flexible Layout system
Canvas | Fixed-position
StackPanel | “Stacks” dynamically
![Page 21: Building a Silverlight 7 ApplicationSilverlight on Windows Phone 7 ð§Base on Silverlight 3 and above ð§Some phone-specific additions ð§Silverlight runtime optimized to display](https://reader033.vdocuments.net/reader033/viewer/2022051913/6004b1b8bd179d4f401f610f/html5/thumbnails/21.jpg)
DEMO – LAYOUTWhere Does It Go?
![Page 22: Building a Silverlight 7 ApplicationSilverlight on Windows Phone 7 ð§Base on Silverlight 3 and above ð§Some phone-specific additions ð§Silverlight runtime optimized to display](https://reader033.vdocuments.net/reader033/viewer/2022051913/6004b1b8bd179d4f401f610f/html5/thumbnails/22.jpg)
TextBox InputScope
InputScope gives a hint to the system whichSoft Input Panel layout to use
User will appreciate this.
![Page 23: Building a Silverlight 7 ApplicationSilverlight on Windows Phone 7 ð§Base on Silverlight 3 and above ð§Some phone-specific additions ð§Silverlight runtime optimized to display](https://reader033.vdocuments.net/reader033/viewer/2022051913/6004b1b8bd179d4f401f610f/html5/thumbnails/23.jpg)
DEMO – INPUT SCOPEWhere Does It Go?
![Page 24: Building a Silverlight 7 ApplicationSilverlight on Windows Phone 7 ð§Base on Silverlight 3 and above ð§Some phone-specific additions ð§Silverlight runtime optimized to display](https://reader033.vdocuments.net/reader033/viewer/2022051913/6004b1b8bd179d4f401f610f/html5/thumbnails/24.jpg)
Transforms
ControlsText
Media
RotateScaleSkew
TranslateMatrix
PlaneMatrix
Apply 3D to a 2D element
Alters any element Transforms Projections
![Page 25: Building a Silverlight 7 ApplicationSilverlight on Windows Phone 7 ð§Base on Silverlight 3 and above ð§Some phone-specific additions ð§Silverlight runtime optimized to display](https://reader033.vdocuments.net/reader033/viewer/2022051913/6004b1b8bd179d4f401f610f/html5/thumbnails/25.jpg)
AnimationsAnimate a property value over time
Basics
Expression Blend is the best tool for designing animations
Storyboard Animation Keyframe
![Page 26: Building a Silverlight 7 ApplicationSilverlight on Windows Phone 7 ð§Base on Silverlight 3 and above ð§Some phone-specific additions ð§Silverlight runtime optimized to display](https://reader033.vdocuments.net/reader033/viewer/2022051913/6004b1b8bd179d4f401f610f/html5/thumbnails/26.jpg)
DEMO –TRANSFORMS,ANIMATIONS
Make it Look Great
![Page 27: Building a Silverlight 7 ApplicationSilverlight on Windows Phone 7 ð§Base on Silverlight 3 and above ð§Some phone-specific additions ð§Silverlight runtime optimized to display](https://reader033.vdocuments.net/reader033/viewer/2022051913/6004b1b8bd179d4f401f610f/html5/thumbnails/27.jpg)
DatabindingPowerful Concept
Two types
Based on change notification
Property binding List binding
![Page 28: Building a Silverlight 7 ApplicationSilverlight on Windows Phone 7 ð§Base on Silverlight 3 and above ð§Some phone-specific additions ð§Silverlight runtime optimized to display](https://reader033.vdocuments.net/reader033/viewer/2022051913/6004b1b8bd179d4f401f610f/html5/thumbnails/28.jpg)
DEMO – DATABINDINGMake it Real
![Page 29: Building a Silverlight 7 ApplicationSilverlight on Windows Phone 7 ð§Base on Silverlight 3 and above ð§Some phone-specific additions ð§Silverlight runtime optimized to display](https://reader033.vdocuments.net/reader033/viewer/2022051913/6004b1b8bd179d4f401f610f/html5/thumbnails/29.jpg)
Code ReuseReuse UI
User Control Custom Control
Reuse Code
Across projectsAcross platforms
(Web, WindowsPhone)
![Page 30: Building a Silverlight 7 ApplicationSilverlight on Windows Phone 7 ð§Base on Silverlight 3 and above ð§Some phone-specific additions ð§Silverlight runtime optimized to display](https://reader033.vdocuments.net/reader033/viewer/2022051913/6004b1b8bd179d4f401f610f/html5/thumbnails/30.jpg)
DEMO – CODE REUSEDon’t Reinvent The Wheel
![Page 31: Building a Silverlight 7 ApplicationSilverlight on Windows Phone 7 ð§Base on Silverlight 3 and above ð§Some phone-specific additions ð§Silverlight runtime optimized to display](https://reader033.vdocuments.net/reader033/viewer/2022051913/6004b1b8bd179d4f401f610f/html5/thumbnails/31.jpg)
Q&AWindows Phone is based on Silverlight 3.0
You have to create your XAML text using the Notepad editor
Silverlight component cannot generate events
You can customize the keyboard displayed for text input
Silverlight components automatically adapt to the display settings
You can read only information from components using data binding
Windows Phone is based on Silverlight 3.0
You have to create your XAML text using the Notepad editor
Silverlight component cannot generate events
You can customize the keyboard displayed for text input
Silverlight components automatically adapt to the display settings
You can read only information from components using data binding