Silverlight 2 Unplugged

1
Silverlight 2 Unplugged

• Chris Hay
• NxtGenUG (Cambridge) / Roskakori Limited
• http//silverlightuk.blogspot.com

2
About Me

• Blog http//silverlightuk.blogspot.com
• Email chrishayuk_at_googlemail.com
• Coordinator of NxtGenUG Cambridge
• Silverlight Enthusiast
• Lead Developer
• Technologies
• ASP.NET
• C
• VB
• SQL 2005
• Silverlight
• WPF
• WCF
• WWF (only a little)
• F (only a little)

3
Agenda

• Introduction to Silverlight
• Getting Started with Silverlight 2.0
• Creating your first Silverlight application
• XAP File
• Layout Manager Controls (7.5 minutes)
• Controls from 1.0 (7.5 minutes)
• Interacting with Controls (5 minutes)
• Button Controls (5 minutes)
• TextBox Other Controls Brushes Transforms
  Animation (10 minutes) (May ditch due to time
  constraints)
• Styles Resources(7.5 minutes)
• Content Model Control Templates (7.5 minutes)

• Item Controls Binding (15 minutes)
• ListBox
• DataGrid
• Observable Collection
• INotifiable
• Master / Detail (User Control)
• Networking (15 minutes)
• POX
• Web Services / WCF
• Async
• Sockets
• Security (Client Access Policy)
• Storage (10 minutes)
• Isolated Storage
• Open File Dialog
• Html Bridge (1 Minute)
• The End and the Future (1 Minute)

4
Silverlight

• Used to be WPF/E
• Microsofts RIA offering
• Client application that runs in a browser
• Silverlight 1.0
• Silverlight 2

5
Silverlight 1.0

• Went Live September 2007
• Xaml
• Javascript
• Media
• Not business applications
• Very small subset of WPF
• Supported Platforms
• Windows (XP, Vista, 2003, 2008)
• MAC
• Linux (Moonlight)
• Mobile (Coming Soon)
• Browsers
• IE
• Firefox
• Safari
• Show Video

6
Silverlight 1.0 for Mobile

• Initially Silverlight 1.0
• Silverlight 2.0 in the future
• Developer CTP 2nd Quarter 2008 (soon)
• Windows Mobile 6
• Nokia signed up to support Silverlight

7
Silverlight 2

• In Beta 1 (March 2008)
• Used to be Silverlight 1.1
• Xaml
• Desktop CLR
• C / VB
• Larget subset of WPF (and getting closer)
• Rich Control Set
• Supported Platforms
• Windows (XP, Vista, 2003, 2008)
• MAC
• Linux (Moonlight)
• Mobile (Coming Soon)
• Browsers
• IE
• Firefox
• Safari
• Show Video

8
Deep Zoom

• Outside of scope of todays talk
• Formerly SeaDragon
• Renders only viewed portion of image
• Little bandwith
• High Definition Images
• Multi-Layered Images
• Deep Zoom Composer
• Show Demo Video

9
Supported Languages

• Silverlight 1.0
• Javascript
• Silverlight 2.0
• C
• VB.NET
• Dynamic Lanaguages Supported
• Microsoft JScript
• IronPython
• IronRuby
• (More to come)

10
Silverlight 2 Downloads

• Visual Studio 2008
• Silverlight 2 Beta 1 Runtime
• Microsoft Silverlight Tools for Beta 1 for VS2008
• Other useful stuff
• Silverlight Beta 1 SDK (installed with tools
  install)
• Expression Studio 2
• Deep Zoom Composer
• Silverlight 2 Controls Source Code Unit Tests

11
Silverlight 2 - Resources

• http//silverlight.net
• Blogs (including mine)
• Tutorials
• Videos
• Forums
• Samples
• Your favourite search engine
• Good WPF books (Adam Nathan Chris Anderson)
• Silverlight 1 book (Adam Nathan or Lawrence
  Moroney)

12
Silverlight 2 Getting Started
13
Silverlight 2 Getting Started
14
Silverlight 2
15
Silverlight 2 Web Application

• Must run within the context of a website
• Supports some offline capabilities however
• Independent of Web Server technology
• Can be hosted on a unix/linux apache web server
• On creation of project in VS
• Website
• Web Application
• Test file
• Can run directly from file system
• Security restrictions however
• Best run from a website

16
Silverlight 2 Visual Studio

• Toolbox
• Readonly WYSISWG Design Area
• Xaml Design area
• Builds to ClientBin folder

17
Silverlight 2 .XAP

• Really a zip file in disguise
• Change extension to zip and open it up
• Contains built assemblies
• Contains any content marked to be included in
  download
• .XAP file is what is downloaded to client machine

18
Silverlight 2 Html File

• ActiveX object in a div tag

19
Silverlight 2 App.Xaml

• Contains Application Resources (later)
• Entry point for the application
• This where you set your start page for the
  application
• Handles following events
• Application Startup
• Application Exit
• Application Unhandled Exception

20
Silverlight 2 Hello World

• Demo Hello World

21
Layout Manager Controls

• Canvas
• StackPanel
• Grid
• Border
• More still to come
• You can always create your own ?

22
Layout Management - Canvas

• Silverlight 1.0 Control
• Absolute Positioning
• Supports the following attached properties
• Canvas.Top
• Canvas.Left
• Canvas.Zindex
• Not scalable
• Not really used in Silverlight 2

23
Layout Management - StackPanel

• New in Silverlight 2.0
• Equivalent to its WPF counterpart
• Stacks controls like a bookshelf
• Vertical (Default) or Horizontal Orientation
• OrientationVertical
• OrientationHorizontal

24
Layout Management - Grid

• New in Silverlight 2.0
• Equivalent to its WPF counterpart
• Flexible Positioning (similar to tables in HTML)
• Supports the following attached properties
• Grid.Column
• Grid.Row
• Sizing
• Auto Sizing
• Proporitional Sizing
• Pixel Sizing

25
Layout Management - Border

• Wraps its children in a border
• Important Properties
• BorderBrush
• BorderThickness

26
Layout Management -Future Layout Controls

• More still to come
• Will converge with WPF Controls
• Expect the following controls in the future
• DockPanel
• WrapPanel
• GroupBox
• ViewPort

27
Layout Management - Create your own layout
controls

• Build your own layout manager
• Use the source for the existing managers as a
  guide

28
Layout Management - Create your own layout
controls

• MeasureOverride
• Measure all the children and return available
  size
• ArrangeOverride
• Arrange all the children and return final size
• Same as WPF

29
Silverlight 2 Controls in 1.0

• Layout Management
• Canvas
• TextBlock
• Shapes Geometries
• Line
• Ellipse
• Rectangle
• Polygon
• Path
• Media
• Image
• MediaElement

30
Controls in 1.0 - Image

• ltImage Source"/Assets/Images/WeeMee.jpg"/gt
• Supported Image Formats
• JPG
• PNG
• To include in the .XAP
• Must include the leading slash
• Build Action - Content
• Copy to output directory Copy if newer
• Impact (larger .XAP file to download)
• To reference outside the .XAP
• Absolute path
• Build Action None
• Copy to output directory never
• ltImage Source"http//localhost49626/SilverlightN
  etworking_Web/Assets/Images/WeeMee.jpg"/gt

31
Controls in 1.0 - MediaElement

• ltMediaElement Source"/Assets/Images/WeeMee.jpg"/gt
  
• Supported Media Formats
• 720p HD Video
• VC-1
• WMV
• WMA
• MP3
• Supports Media Markers (will leave to Mike
  Ormond)
• Supports Streaming
• Supports Progressive Downloads
• To include in the .XAP
• Must include the leading slash
• Build Action - Content
• Copy to output directory Copy if newer
• Impact (larger .XAP file to download)
• To reference outside the .XAP
• Absolute path
• Build Action None

32
Interacting with Controls

• xName (Xaml attribute) to access control in
  codebehind
• ltButton xName"myButton" Content"My Button"/gt
• Declare Event in Xaml
• ltButton xName"myButton" Content"My Button"
  Click"buttonClickTest"/gt
• Hookup event in codebehind
• myButton.Click new RoutedEventHandler(myButton
  _Click)

33
Demo Simple Media Player

• Start Button
• Stop Button
• MediaElement
• Event Handling
• ASP.NET Futures (3.5) has silverlight 1.0 media
  control

34
New 2.0 Controls - Buttons

• Button Controls
• Button
• RepeatButton
• Continuous Clicks (Delay Property)
• HyperlinkButton
• ToggleButton
• Checked Event (as well as Click)
• IsChecked Property
• CheckBox
• Inherits from toggle button
• RadioButton
• Inherits from toggle button
• Implicity Grouping within Layout Manager
• GroupName property allows explicit grouping
• All inherit from ButtonBase

35
Other 2.0 Controls (non item)

• TextBox
• Watermarked TextBox
• Inherits from TextBox
• Slider
• Calendar
• DatePicker

36
Brushes

• All were available in Silverlight 1.0
• SolidColorBrush
• LinearGradientBrush
• RadialGradientBrush
• ImageBrush
• VideoBrush

37
Transforms

• All were available in Silverlight 1.0
• RotateTransform
• ScaleTransform
• SkewTransform
• TranslateTransform
• MatrixTransform
• Render Transform only
• No Layout Transform
• Be careful with stackpanels

38
Styles

• Inline Styles (Supported in Silverlight 1.1)
• Style Element
• Applying Styles
• Overriding Styles
• Expanded Setters
• Missing WPF Features

39
Styles - Inline

• Inline Styles (Supported in Silverlight 1.1)
• FontFamily
• Foreground
• FontSize
• Etc.
• Not Scalable
• Hard to change style across application
• Messy XAML
• Hard to maintain consistency

40
Styles Style Element

• xKey is required
• Default Styles not supported (Implicit Key)
• Only Named Types are supported
• Target Type is required

41
Styles Applying the style

• Applied via Style Attribute (referencing the key)

42
Styles Overriding Styles

• Styles are Overridable
• Can override style element style with inline
  style
• Style inheritance however is not possible ?
• BasedOn Attribute (WPF) not supported

43
Styles Expanded Setter

• We have seen setting simple xaml
• Also supports complex xaml

44
Styles Missing WPF Features

• Default Styles
• Cannot apply a style across all buttons
• Must use a named type
• Untargetted Types
• Must have a TargetType
• Style inheritance however is not possible ?
• BasedOn Attribute not supported
• Triggers not supported (Property / Data / Event)

45
Styles Styling by a designer

• http//www.corrina_b.members.winisp.net/skins/roug
  h/Testpage.html

46
Resources

• Static Resource
• Scope
• XAML Elements
• Missing WPF Features

47
Resources StaticResource

• Only StaticResource supported in beta
• DynamicResource not supported
• All static resources are loaded on page load
• Resource is loaded even if not used
• Resource is read once (and only once)
• Resource Item is not modifiable at runtime
• Attempting to modify static resource at runtime
  results in catastrophic failure (wooo ha ha ha
  ha)

48
Resources - Scope

• Style is available within scope of the resources
  section
• StackPanel / Grid etc
• UserControl
• Application Wide (App.xaml)
• Not available outside of the scope
• Style Elements can override other style elements
• MyTextBlock style (defined in app.xaml resource)
• MyTextBlock style (defined in grid resources)
• Grid resource style overrides app.xaml resource

49
Resources Xaml Elements

• Not just styles supported in resource area
• Other Xaml Elements supported e.g. Brushes

50
Resources Missing WPF Features

• DynamicResource
• Direct application of StaticResource
• Dynamic Skinning
• Resource Dictionary (external file for source)
• Merged Dictionaries
• Dynamic Resource
• Themes

51
Content Model

• Can set complex content (not just text)
• MediaElements
• ContentPresenter to display content
• ltButton Height"30" Width"100"
• Click"Button_Click"gt
• ltButton.Contentgt
• ltGridgt
• ltEllipse Height"20"
  Width"20"
• Fill"Red"/gt
• ltContentPresenter
  Content"Hello World"
• 
  HorizontalAlignment"Center"
• 
  VerticalAlignment"Center"/gt
• lt/Gridgt
• lt/Button.Contentgt
• lt/Buttongt

52
Templates

• Uses Resource Section
• Applied via style
• Override ControlTemplate for Template property
• Use TemplateBinding to bind to control properties
• Control continues to use content
• ltStyle xKey"buttonStyle" TargetType"Button"gt
• ltSetter Property"Template"gt
• ltSetter.Valuegt
• ltControlTemplate
  TargetType"Button"gt
• ltGridgt
• ltEllipse
  Height"TemplateBinding Height"
• 
  Width"TemplateBinding Width"
• 
  Fill"Red"/gt
• ltContentPresenter
  Content"TemplateBinding Content"
• 
  HorizontalAlignment"Center"
• 
  VerticalAlignment"Center"/gt
• lt/Gridgt
• lt/ControlTemplategt

53
Binding and Items Controls

• ListBox
• Datagrid

54
ListBox

• Manually add items
• Not Just Text (buttons, textboxes etc)
• Set ItemSource

55
ListBox - DataTemplate

• Customise Listbox

56
ListBox - Binding

• Binding MyPropertyName
• Binding Modes
• OneWay
• TwoWay
• Binding LikesFootball, ModeTwoWay

57
Observable Collections

• Notifies the Items Control if the underlying
  collection has changed

58
INotifyPropertyChanged

• Notifies the Items Control if the underlying
  collection has changed
• Implements INotifyPropertyChanged
• Raises Event (PropertyChangedEvenHandler)

59
DataContext

• Sets the scope of the binding
• Useful for master detail

60
IValueConverter

• Used to convert data for UI display

61
IValueConverter

• Converter declared as a resource
• ltlocalDateToString xKey"DateConverter"/gt
• Converter specified within binding
• ltTextBlock Text"Binding PublishDate,
  ModeOneWay, ConverterStaticResource
  DateConverter"/gt

62
Networking

• POX Web Client
• Security
• CrossDomain.xml
• ClientAccessPolicy.xml
• WCF Service is recommended approach
• SOAP
• (Was JSON in Silverlight 1.1)
• JSON is supported but is a pain
• ASMX is supported but use WCF
• ADO.NET Data Services
• Sockets

63
Plain Old Xml

• Grab Xml Data
• Use Web Client

64
Pox Calling the service

• Setup the Service
• Setup the Completed Event Handler
• Call the Service (asynchronously)

65
LINQ to Xml

• LINQ to Xml Supported
• No Xpath Support

66
Service Security

• Can only access hosted Web Server unless server
  has
• ClientAccessPolicy.xml
• CrossDomain.xml (flash)
• Be careful misuse can open security risk
• See my blog posting regarding

67
CrossDomain.xml
68
ClientAccessPolicy.xml
69
WCF Service

• Echo Service Demo
• Create Service as normal
• Must change binding of WCF Service to
  basicHttpBinding (default is wsHttpBinding) in
  web.config

70
WCF Service Client Proxy

• Within Silverlight Application
• Add Service Reference
• Click Discover (will find service)
• Only asynchronous calls supported
• ServicesReferences.ClientConfig is ignored

71
WCF Service Calling the service

• Setup the Service
• Setup the Completed Event Handler
• Call the Service (asynchronously)

72
WCF Service Membership

• Supports Membership Provider Model
• ASP.NET Compatibility Mode
• Leverages existing website login mechanism
• Restricts service access to logged in users
• See my blog posting regarding

73
ADO.NET Data Services

• Silverlight supports it
• Ask Guy about it

74
Sockets

• Outside of scope of todays talk
• Can only create a socket with hosted web server
• CrossDomain.xml ClientAccessPolicy.xml have no
  effect
• Port Range supported 4502-4532

75
Storage

• Isolated Storage
• Open File Dialog

76
Isolated Storage - Security

• Applications have no direct access to file system
• (except via open file dialog, later)
• Isolated Storage is only area that can be saved
  to
• Can store pretty much anything
• Size is limited by default and increasable by
  user permission

77
Isolated Storage User Store
78
Isolated Storage Storage Limits

• 100kb default per user per application
• Can query available free space
• AvailableFreeSpace Property (in bytes)
• Can query maximum available (Quota)
• Quota Property (in bytes)
• Can request increase in quota
• Requires user approval
• TryIncreaseQuotaTo method
• Can only increase not decrease

79
Isolated Storage File System

• Lives in AppData\LocalLow\Microsoft\Silverlight\is
  
• Folder Structure / Underlying file system is
  synchronised
• Directory is worth 1Kb in Isolated Storage
• Only if created in Silverlight
• Supports Hierarchical Directory Structure
• userStore.CreateDirectory("aa/a1")
• Can recurse the file system

80
Open File Dialog

• Only way to access file system outside of
  Isolated Storage

81
Html Bridge

• Not covering today
• Can access Html of hosted web page (2 way)
• HtmlDocument (System.Windows.Browser)
• HtmlPage
• GetElementByID
• http//www.silverlight.net/Quickstarts/Dom/DomAcce
  ss.aspx

82
The Future

• More Betas (this year)
• Silverlight 2 release (this year)
• Silverlight 2 port to Moonlight
• Silverlight 2 port to Mobile Devices
• Silverlight moving closer to WPF (more WPF
  features)
• The end of the web as we know it ?

83
The End

• Slides up on my blog
• http//silverlightuk.blogspot.com
• Email chrishayuk_at_googlemail.com
• Hope to do some screencasts (see blog)
• Thanks for coming