Silverlight Intermediate(Developing RIA Apps with Silverlight)

Aniruddha Chakrabarti.NET and Integration CoE

Intro …Get to know each other – AllWhat you want to know – AllCourse Objective and Summary – AniruddhaLogisticsScheduleTake Away

AgendaRIA and Web 2.0, RIA toolsSilverlight – History, Overview and ArchitectureControls, Panel, Layout, Transform, Brush …Resource, Style, Control Template, Data TemplateData Binding, Data Annotation, Isolated StorageFull Screen and Out of Browser SupportHTML Bridge: Interaction between managed code &

JavaScriptSilverlight-enabled WCF ServiceWhat’s new in Silverlight 4

What is RIARIA stands for Rich Internet Application“Rich Internet Applications (RIAs) are web applications

that have many of the characteristics of desktop applications, typically delivered either by way of a site-specific browser, via a browser plug-in, or independently via sandboxes or virtual machines” – Wikipedia

The term RIA introduced in white paper in Mar 2002 by Macromedia (now Adobe),though the concept had existed for many years earlier under names such as:Remote Scripting, by Microsoft, circa 1998 X Internet, by Forrester Research in October 2000 Rich (web) clients Rich web application

RIA CharacteristicsImproved usability via rich and creative user interface

that provides an interactive rich experience - similar to desktop rich client applications. Support for Audio, Video.

Modular and loosely coupled web app architecture that supports flexibility and user-level customization

High-performing rich and interactive web-based apps.Collaboration platform to share information among

diverse and geographically separate groups.Platform-independent technology that is supported on

cross-platform (support for many OS), cross-browser and cross-device (available on computers, mobile devices).

RIA tools & frameoworks in market

Source: http://en.wikipedia.org/wiki/List_of_rich_internet_application_frameworks

RIA Landscape – Other tools in MarketFlash

Multimedia platform used to add animation, video, and interactivity to Web pages. Frequently used for advertisements and games.

Manipulates vector and raster graphics to provide animation of text, drawings, and still images. Supports streaming of audio and video. Can capture user input via mouse, keyboard, microphone, camera.

Coded in an Object-oriented language called ActionScript.May be displayed on various computer systems and devices, using

Adobe Flash Player, which is available free of charge for common Web browsers, some mobile phones and few devices.

FlexSDK for the development and deployment of cross-platform rich

Internet applications based on the Adobe Flash platform. Can be written using Adobe Flash Builder or by using the freely

available Flex compiler from Adobe.

RIA Landscape – Other tools in MarketAIR (Adobe Integrated Runtime)

Cross-platform runtime environment developed by Adobe Systems for building rich Internet applications using Adobe Flash, Adobe Flex, HTML, or Ajax, that can be deployed as desktop applications.

Development Environment HTML/Ajax, either via Adobe's own Dreamweaver CS4 (In addition to

Dreamweaver CS3), another HTML editor or a normal text editor in conjunction with the AIR SDK

Adobe Flash Builder (formerly Adobe Flex Builder) Flash CS4

RIA Landscape – Other tools in MarketJava Applet / JavaFX

Java platform for creating and delivering RIAs that can run across wide variety of connected devices. Enables building apps for desktop, browser and mobile phones. TV set-top boxes, gaming consoles, Blu-ray players and other platforms are planned.

Developers use a statically typed, declarative language called JavaFX Script; Java code can be integrated into JavaFX programs. JavaFX is compiled to Java bytecode, so JavaFX applications run on any desktop and browser that runs the Java Runtime Environment (JRE) and on top of mobile phones running Java ME.

On desktop, the current release supports Windows XP, Vista and Mac OS X OS. JavaFX 1.2 would support Linux and OpenSolaris

On mobile, JavaFX is capable of running on multiple mobile operating systems, including Symbian OS, Windows Mobile, and proprietary real-time operating systems.

What is Silverlightcross-browser, cross-platform, and cross-device plug-in for

delivering next generation of .NET-based media experiences and rich interactive apps for Web.

Supported by small download that installs in secondsSubset of WPF and .NET FrameworkProvides compelling graphics that users can manipulate

directly in browser - drag, turn, zoom. Streams video, audio.Reads data and updates the display without interrupting user

by refreshing the whole page.Supported on multiple platforms and browsers

Windows - Win 7, Vista, XP, Server 2008, Server 2003, 2000Mac - OS 10.4.8+ (PowerPC) & OS 10.4.8+ (Intel-based) Linux - Supported on Linux by Mono project (Novel)Browsers - IE 6/7/8, Firefox 1/2/3, Safari 2/3 (Chrome from S4)

History of SilverlightMicrosoft showed first version along with WPF at MIX

conference in March 2006 – was then called WPF/E (Windows presentation Foundation Everywhere)

Was later renamed to Silverlight - Silverlight 1.0 was released in May 2007 at MIX 2007 by Scott G.Less no of UI Controls, No support for .NET (functionality has to be

coded in JavaScript), no XAP packageSilverlight 2.0 was released in October 2008Silverlight 3.0 was released in late 2009.Silverlight 4.0 was released on April 2010 (soon after .NET 4,

Visual Studio 2010 release)

Features Supported by SilverlightWPF and XAML - Includes subset of WPF - greatly extends elements in browser.

WPF allows immersive graphics, animation, media, and other rich client features, extending browser-based UI possible with HTML. XAML provides a declarative markup syntax for creating elements.

Extensions to JavaScript- Provides extensions to the universal browser scripting language that provide control over the browser UI, including ability to work with WPF elements.

Cross-browser, cross-platform support - Runs the same on all popular browsers and on popular platforms.

Integration with existing applications - Integrates seamlessly with existing JavaScript and ASP.NET AJAX code to complement existing functionality.

Access to the .NET Framework programming model – could be created using dynamic languages such as IronPython as well as languages such as C# and VB.

Networking support - Includes support for HTTP over TCP. You can connect to WCF, SOAP, or ASP.NET AJAX services and receive XML, JSON, or RSS data.

LINQ – Includes LINQ – enables to program data access using intuitive native syntax and strongly typed objects in .NET Framework languages.

Which UI Platform to useThick Client

WPFXBAP (XAML Browser Apps)Win Forms

Thin ClientASP.NET Web FormsASP.NET AjaxASP.NET MVCASP.NET Dynamic Data

RIASilverlight (with ASP.NET Web Forms)Silverlight (with ASP.NET MVC)Silverlight (with ASP.NET Web Forms/MVC + Ajax)

Architecture

Silverlight ArchitectureSilverlight platform as a whole consists of two major

parts, plus an installer and update component – Core presentation framework - Components and services

oriented toward the UI and user interaction, including user input, lightweight UI controls for Web apps, media playback, data binding, vector graphics, text, animation, and images. Also includes XAML for specifying layout.

.NET Framework for Silverlight - A subset of the .NET Framework that contains components and libraries, including data integration, extensible Windows controls, networking, base class libraries, garbage collection, and CLR.

Installer and updater - An installation and update control that simplifies the process of installing the application for first-time users, and subsequently provides low-impact, automatic updates.

Silverlight Architecture (Cont’d)

Core Presentation FrameworkSilverlight core presentation framework is subset of

WPF. Provides libraries and utilities necessary to parse Silverlight XAML files, present UI to browser, and handle interaction from user.

Feature Description

Input Handles inputs from hardware devices such as the keyboard and mouse, drawing, or other input devices.

UI rendering Renders vector and bitmap graphics, animations, and text.Media Features playback and management of audio and video files, such as .WMP and .MP3Deep Zoom Enables you to zoom in on and pan around high resolution images.Controls Supports extensible controls that are customizable through styling and templating.Layout Enables dynamic positioning of UI elements.Data binding Enables linking of data objects and UI elements.

DRM Enables digital rights management of media assets.

XAML Provides a parser for XAML markup.

.NET Framework for SilverlightFeature Description

Data Supports Language-Integrated Query (LINQ) and LINQ to XML features. Also supports the use of XML and serialization classes for handling data.

Base Class Library (BCL)

.NET Framework libraries that supports as string handling, regular expressions, input and output, reflection, collections, and globalization.

WCFProvides features to simplify access to remote services and data. Includes a browser object, HTTP request & response object, support for cross-domain HTTP requests, support for RSS/Atom syndication feeds, and support for JSON, POX, and SOAP services.

CLR Provides memory management, garbage collection, type safety checking, and exception handling.

WPF controlsProvides a rich set of controls, including Button, Calendar, CheckBox, DataGrid, DatePicker, HyperlinkButton, ListBox, RadioButton, and ScrollViewer.

DLR (dynamic language runtime)

Supports dynamic compilation and execution of scripting languages such as JavaScript, IronRuby and IronPython to program Silverlight-based apps.

Silverlight Plug-in

Browser Add on

Silverlight ToolsVisual Studio (with Silverlight Tools for VS 2008/VS2010)

Silverlight developer runtime – Unlike Silverlight runtime (installed by end users), has error messages for debugging.

Silverlight SDK and Silverlight ToolsExpression Blend

Creating new Silverlight Project

Application and Programming Model

Application and Programming ModelProvides two distinct models for app development:

Managed API for Silverlight - uses code running on CLR for Silverlight. Could be used with compiled languages (VB, C#) or dynamic languages such (IronPython, IronRuby)

JavaScript API for Silverlight - uses JavaScript code interpreted by the browser.

Both can not be used at the same time within a single instance of the Silverlight plug-in. However, you can implement a splash screen that uses the JavaScript API

and then transitions to the managed API when your application has loaded. Managed API provides significantly more functionality than JavaScript API.

Managed API apps have access to lightweight version of .NET Framework. JavaScript API, however, has access only to the Silverlight presentation core

and the browser JavaScript engine.

Managed Programming & Application ModelManaged API enables you to bundle managed assemblies and resource

files into application package (.xap) files. Silverlight plug-in is responsible for loading an application package and extracting its contents.

Application package must contain an assembly with a class derived from Application. Application class encapsulates interaction between appand the Silverlight plug-in. Also provides application lifetime events & resource management.

Silverlight documentation uses “application model” to refer to application packaging and the common functionality encapsulated by the Application class.

Application ClassApplication class encapsulates services commonly

required by Silverlight-based app, like life-cycle event notification and interaction with Silverlight plug-in.

EventsStartup, Exit, UnhandledException

PropertyCurrent: Returns the current application object.Host: Allows code to interact directly with the Silverlight

plug-in that hosts it.RootVisual: To display the application UI, RootVisual is set

at Startup event handler (represents the entry point of application code in the Silverlight plug-in life cycle).

Application Class Exampale

Application StructureSilverlight apps are deployed as .xap package (xaml app package)An application package is a zip file (compressed using the Deflate

algorithm) that has a .xap file extension.For Silverlight-based apps using the managed API, build process

generates an application package.While embedding Silverlight plug-in in web page, specify app

package that the plug-in should download. Plug-in uses a manifest file in application package to identify the application class to instantiate. This class is known as the entry point of your application, and it must derive from the Application class.

Application Structure (Cont’d)

XAP PackageA XAP App package contains the following -

One AppManifest.xaml file, which identifies the packaged assemblies and the application entry point.

One application assembly, which includes your application class.Zero or more library assemblies.Zero or more loose resource files, such as images or video files.

Application Manifest

AppManifest.xaml file is typically generated by build process, and uses XAML markup to declare a Deployment object.

EntryPointAssembly and EntryPointType attributes to identify the application entry point.

RuntimeVersion attribute to identify required version of Silverlight.

<Deployment xmlns="http://schemas.microsoft.com/client/2007/deployment" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" EntryPointAssembly="Silverlight3App" EntryPointType="Silverlight3App.App" RuntimeVersion="3.0.40818.0"> <Deployment.Parts> <AssemblyPart x:Name="Silverlight3App" Source="Silverlight3App.dll" /> </Deployment.Parts></Deployment>

Build and Deploy

Silverlight Assemblies<UserControl

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" xmlns:input="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input"xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

x:Class="TestSilverlightApp.MainPage"Width="440" Height="480" FontSize="13.333" FontFamily="Arial">

.NET Framework AssembliesSilverlight - C:\Program Files\

Reference Assemblies\Microsoft\Framework\Silverlight\v3.0

Silverlight SDK - C:\Program Files\Microsoft SDKs\Silverlight\v3.0\Libraries\Client

.NET Framework for SilverlightCore CLR: Core part of CLR customized for RIASmall BCL: Small part of Base Class Library customized for RIA

Controls

Silverlight Controls Hierarchy

Silverlight ControlsButtonToggleButtonTextBoxPasswordBoxTextBlockCheckBoxRadioButtonListBoxComboBoxSliderProgressBar

System.Windows

Silverlight Controls (Image, Audio, Video)HyperlinkButtonImageMediaElement

System.Windows

Silverlight ControlsCalendarDatePickerTabControlTreeView

xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"

<controls:Calendar />

Silverlight ControlsDataGrid

xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

<data:DataGrid Height="100" x:Name="dgAssemblies"/>

Silverlight ControlsLabel

xmlns:dataInput="clr-namespace:System.Windows.Controls; assembly=System.Windows.Controls.Data.Input"

<dataInput:Label Content="This is a label"></dataInput:Label>

Unique Silverlight ControlsAutoCompleteBox

Populate ItemsSource property for the valuesValidationSummary (similar to ASP.NET)

xmlns:dataInput="clr-namespace:System.Windows.Controls; assembly=System.Windows.Controls.Data.Input"

<input:AutoCompleteBox/>

Not Supported ControlsSilverlight does not support these controls

ListViewExpander

Layout, Input and Panels

Layout SystemSilverlight plug-in defines area that Silverlight-based appis displayed in

– Embed plug-in in a host HTML page; Either position plug-in somewhere inline in HTML page display or have

plug-in take up entire HTML page. Two frames of reference when positioning Silverlight objects: Within the plug-in: Position objects on the Silverlight surface within the

plug-in’s bounding box. Most of the layout overviews describe this type of positioning.

Within the HTML: The entire plug-in and all the objects positioned within it are subject to where you place the plug-in in HTML.

Layout related propertiesMargin (of type Thickness)Padding (of type Thickness)HorizontalAlignment

Left, Right, Center (Default), StretchVerticalAlignment

Bottom, Top, Center (Degault), StretchHorizontalContentAlignment

Left, Right, Center (Default), StretchVerticalContentAlignment

Bottom, Top, Center (Degault), StretchZindix (for Canvas only)

Margin

MarginPadding

Padding

<Button Height="120" Width="180" Content="Hello" Margin="50" Padding="40" />

<Button Height="120" Width="180" Content="Hello" Margin="20,40,60,80" Padding="10,30,50,70" />

Alignment Example<StackPanel x:Name="LayoutRoot" Background="LightBlue" Height="100"> <Button Height="40" Width="90" Content="Hello"></Button></StackPanel>

<Grid x:Name="LayoutRoot" Background="LightBlue" Height="100"> <Button Height="40" Width="90" Content="Hello" HorizontalAlignment="Right" VerticalAlignment="Bottom"> </Button></Grid>

<Grid x:Name="LayoutRoot" Background="LightBlue" Height="130"> <Button Height="120" Width="180" Content="Hello"></Button></Grid>

<Grid x:Name="LayoutRoot" Background="LightBlue" Height="130"> <Button Height="120" Width="180" Content="Hello"

HorizontalContentAlignment="Right" VerticalContentAlignment="Bottom"></Button>

</Grid>

Layout with Panels - CanvasSimplest among the PanelsPositions child elements based on absolute positions.Uses Canvas.Left, .Top and .Zindex (determines the z-

order of the element) attached property for positioning z-order of an object determines whether the object is in front of or

behind another overlapping object. By default, the z-order of objects within a Panel is determined by the

sequence in which they are declared. This behavior can be changed by setting Canvas.ZIndex attached

property on objects within the Panel.

Layout with Panels - StackPanelStacks child elements one after another Setting Orientation = Horizontal stacks

elements horizontally. This is the default behavior.Setting Orientation = Vertical stacks elements

vertically.

Orientation = Vertical

Orientation = Horizontal

Layout with Panels - GridGrid is the most powerful Panel available – provides

complete freedom to developer.Does not support WrapPanel (unlike WPF)

Layout (Continued)ScrollViewerBorderPopup

2D Graphics

TransformScaleTransformRotateTransformSkewTransformTranslateTransformMatrixTransformGroupTransform

Transform Example <Button Margin="10,20,50,50">Scale Transform <Button.RenderTransform> <ScaleTransform ScaleX="1.5" ScaleY="1.5" /> </Button.RenderTransform> </Button>

<Button>Rotate Transform <Button.RenderTransform> <RotateTransform Angle="-5" /> </Button.RenderTransform> </Button>

<Button>Skew Transform <Button.RenderTransform> <SkewTransform AngleX="30" AngleY="5" /> </Button.RenderTransform> </Button>  <Button>Translate Transform <Button.RenderTransform> <TranslateTransform X="20" Y="40" /> </Button.RenderTransform> </Button>

Transform Group Example <StackPanel VerticalAlignment="Top" Margin="10" x:Name="LayoutRoot"> <Button Margin="50">Group Transform <Button.RenderTransform> <TransformGroup> <ScaleTransform ScaleX="1.5" ScaleY="1.5" /> <RotateTransform Angle="-5" /> </TransformGroup> </Button.RenderTransform> </Button> </StackPanel>

Brushes

SolidColorBrushLinearGradientBrush and RadialGradientBrushImageBrush and VideoBrushWebBrowserBrush (new in SL4)

Gradient Brush Example <TextBox Background="LightBlue" Height="40" Text="Solid Color Brush"></TextBox> <TextBox Height="40" Text="Solid Color Brush"> <TextBox.Background> <SolidColorBrush Color="LightGreen"></SolidColorBrush> </TextBox.Background> </TextBox> <TextBox Height="40" Text="Linear Gradient Brush"> <TextBox.Background> <LinearGradientBrush> <GradientStop Color="Yellow" Offset="0" /> <GradientStop Color="Red" Offset="1" /> </LinearGradientBrush> </TextBox.Background> </TextBox>  <TextBox Height="80" Text="Radial Gradient Brush"> <TextBox.Background> <RadialGradientBrush> <GradientStop Color="White" Offset="0" /> <GradientStop Color="Blue" Offset=".5" /> <GradientStop Color="LightSalmon" Offset="1.5" /> </RadialGradientBrush> </TextBox.Background> </TextBox>

Image Brush Example <TextBox Height="300" Width="400" FontSize="20" Foreground="White"> <TextBox.Background> <ImageBrush ImageSource="Chikmagalur049.JPG"></ImageBrush> </TextBox.Background> </TextBox> 

Video Brush Example <MediaElement x:Name="videoMediaElement" Source="Wildlife.wmv" Visibility="Collapsed" /> <TextBox Height="300" Width="400" FontSize="20" Foreground="LightYellow" Text="This is using Video Brush"> <TextBox.Background> <VideoBrush SourceName="videoMediaElement" /> </TextBox.Background> </TextBox> 

ShapesLineRectangleEclipsePath

Shapes Example<Line Stroke="Red" StrokeThickness="2" X1="10" Y1="5" X2="270" Y2="5" /> <Polyline Points="100,10 10,10 10,50 100,50 250,30" Stroke="Black" StrokeThickness="5" /> <Rectangle Height="50" Margin="20" Fill="LightBlue" Stroke="Black" StrokeThickness="2"></Rectangle> <Ellipse Height="50" Fill="LightGreen" Stroke="Black" StrokeThickness="5" />  <Polygon Points="30,20 50,100 10,100 30,20" Stroke="Red" Fill="LightCyan" StrokeThickness="5" />

Pixel Shader EffectBlur EffectDrop Shadow Effect<Button Margin="20" FontSize="20">Drop Shadow Effect <Button.Effect> <DropShadowEffect Color="Blue" BlurRadius="10" /> </Button.Effect></Button><Button Margin="20" FontSize="20">Blur Effect <Button.Effect> <BlurEffect Radius="4" /> </Button.Effect></Button>

Silverlight ToolkitControls -

Numeric UpDownRating ControlExpanderTime PickerTime UpDown

Silverlight ToolkitControls -

Accordian

ViewBox

Silverlight ToolkitPanels

Wrap PanelDock Panel

Child Window<controls:ChildWindow x:Class="SL4App.ChildWindow1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" Width="400" Height="300" Title="ChildWindow"> <Grid x:Name="LayoutRoot" Margin="2"> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions>  <Button x:Name="CancelButton" Content="Cancel" Click="CancelButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,0,0" Grid.Row="1" /> <Button x:Name="OKButton" Content="OK" Click="OKButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,79,0" Grid.Row="1" /> <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"> <TextBlock>This is a child window</TextBlock> <TextBox></TextBox> <CheckBox>CheckBox</CheckBox> </StackPanel> </Grid></controls:ChildWindow>

ChildWindow1 child = new ChildWindow1();child.Show();

Child Window

ResourceResources allow reuseResources are stored in ResourceDictionaryResource property is defined in FrameworkElement,

so each class deriving from it can store resources.Could be stored in Page or in App.xamlOnly StaticResource Markup Extenstion is supported,

DynamicResource is not supported .

Resource, Style and Template

Resource Example (1)

Resource Example (2)

Creating a Resource in Blend

Define the Resource

Refer the Resource

StyleSimilar to CSS in HTML.A Style is nothing but a collection of property setters

for a control. Every property of a FrameworkElement (as long as it

is a DependencyProperty) can be set through a Style.Supports BasedOn and TargetType similar to WPF.Referenced using StaticResource Markup Extension.Priority of Style is from bottom to top in hierarchy

(with bottom one with highest priority).

Style Example

TemplateTemplate allow separate appearance of control from it’s

behavior and logic.Button: appearance is the raised area that you can press, and the

behavior is the Click event that gets raised in response to a click.The source code for every control is completely separated from its

default visual tree representations.Template allows to completely replace an element’s visual tree,

while keeping all of its functionality intact.Default visuals for every Control in WPF are defined in

templates (and customized for each Windows theme). There are three types of Templates

ControlTemplateDataTemplate ItemsPanelTemplate

Control Template Example

Template Binding Example

Data Template Example

Data Template Example

Items Panel Template Overview

Data AnnotationYou can apply attributes to the class or members that

specify validation rules, how data is displayed, and set relationships between entity classes.

System.ComponentModel.DataAnnotations namespace contains classes used as data attributes.

By applying these attributes on data class or member, you centralize the data definition and do not have to re-apply the same rules in multiple places.

Could be of three typesDisplay Attribute – for UI purposeValidation AttributeData Modeling Attribtue

Display AttributeSystem.ComponentModel.DataAnnotations namespace contains

following Display/UI related attributes - DataTypeAttribute - Specifies a particular type of data, such as e-mail

address or phone number.DisplayAttribute - Specifies localizable strings for data types and

members that are used in the user interface.DisplayColumnAttribute - Designates display and sorting properties

when a table is used as a parent table in a foreign key relationship.DisplayFormatAttribute - Specifies how data fields are displayed and

formatted.FilterUIHintAttribute - Designates the filtering behavior for a column.UIHintAttribute - Designates the control and values to use to display

the associated entity member.Are automatically applied when used with DataGrid control. Can manually retrieve display attribute values when data

binding by using controls such as Label and DescriptionViewer.

Validation AttributeFollowing attributes are used to enforce validation rules for data

applied to the class or member:CustomValidationAttribute - Uses a custom method for validation.DataTypeAttribute - Specifies a particular type of data, such as e-mail

address or phone number.EnumDataTypeAttribute - Ensures that the value exists in an

enumeration.RangeAttribute - Designates minimum and maximum constraints.RegularExpressionAttribute - Uses a regular expression to determine

valid values.RequiredAttribute - Specifies that a value must be provided.StringLengthAttribute - Designates max and min number of characters.ValidationAttribute - Serves as base class for validation attributes.

All validation attributes derive from the ValidationAttribute class. The logic to determine if a value is valid is implemented in the overridden IsValid method.

Are automatically applied when used with DataGrid control.

Data Annotation Example - DisplayAttribute

Data Annotation Example - ValidationAttribute

Data BindingBinding engine gets info from Binding object about:

Source object that contains the data that flows between the source and target. Source can be any CLR object.

Target UI property that displays and possibly allows user changes to the data - can be any DependencyProperty of a FrameworkElement.

Direction of the data flow. The direction is specified by setting the Mode property on the Binding object.

Optional value converter that applies to data as it is passed. Value converter implements IValueConverter.

Data Binding

Data Form<dataFormToolkit:DataForm x:Name="dfPerson" AutoEdit="False" AutoCommit="False" />

dfPerson.CurrentItem = new Person{FirstName="Aniruddha",LastName="Chakrabarti",Age=35};

Data BindingData ContextINotifyPropertyChangedObservableCollection, INotifyCollectionChangedIValueConverter, IMultiValueConverter

Isolated StorageSmall section of local storage that is

isolated to a specific app and user. Web apps can save small amounts of

persistent data for their purposes. Cannot be accessed by other apps/users.Automatically created for Silverlight apps

as needed. Size - 1MB max for Silverlight app.Exposed via IsolatedStorageFile class

(in System.IO.IsolatedStorage ns)Could be accessed via GetUserStoreForApplication and GetUserStoreForSite static methods of IsolatedStorageFile class

Isolated Storage Example

Isolated Storage – Application SettingsIsolated storage could be used to store app

settings -per-app, per-computer, and per-user settings.

Scope is determined by full path of app .xap file.

You store application settings using isolated storage through IsolatedStorageSettings class (in System.IO.IsolatedStorage namespace)Exposes static property for Application & Site

level settings. Implements a dictionary which stores

name/value pairs.

Isolated Storage Application Settings Example

Integrating Silverlight in a web pageSilverlight plug-in cab be embedded within Web page in one of three

ways:Using an ASP.NET Silverlight server control.Using the HTML object element.Using the Silverlight.js helper file.

<form id="form1" runat="server" style="height:100%;"> <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> <div style="height:100%;"> <asp:Silverlight ID="Silverlight1" runat="server" Source="~/ClientBin/Silverlight3App.xap" MinimumVersion="3.0.40307.0" Width="100%" Height="100%" /> </div> </form>

Full Screen SupportProvides functionality for displaying the Silverlight

plug-in in full-screen mode.Embedded Mode: plug-in displays within the Web browserFull Screen Mode: plug-in resizes to the current resolution

of the screen and displays on top of all other applications, including the browser.

How to enable Full Screen ModeContent.IsFullScreen property determines whether Silverlight

plug-in displays as full-screen or embedded.If IsFullScreen property to true, the Silverlight plug-in displays in

full-screen mode; otherwise, the plug-in displays in embedded mode.

Registers Application Events

Toggles Content.IsFullScreen Mode when mouse left button down event is fired.

Full Screen Example

Out of Browser SupportFirst introduced in SL3Silverlight-based apps can be configured, so that

users can install them from their host Web pages and run them outside the browser.

Configuration is a simple matter of providing additional information about an application. This information is supplied through the application manifest.

Silverlight uses this info to display installation UI, shortcuts for launching the app, and an out-of-browser application window.

Out of Browser ExampleTo set Out of Browser support for app, check Project > Silverlight

Project Options > Enable Application Outside Browser option.OutOfBrowserSettings.xml file is added in Properties folder.

Field Description PropertyWindow Title Appears in title bar of the out-of-browser app window. TitleWidth & Height Indicates the dimensions of the out-of-browser app window. Width & Height

Shortcut name Appears in out-of-browser installation dialog & installed app shortcut ShortName

Download desc. Appears as a tooltip on the installed application shortcuts. Blurb

Icon fieldsOS chooses most appropriate icon to display in the following locations: installation dialog box, Application window, Windows Explorer, Windows taskbar, Macintosh dock bar.

Icons

Enable GPU Acceleration

Indicates whether graphics performance is enhanced by using hardware acceleration.

EnableGPUAcceleration

How to enable Out of Browser in VS

Out of Browser settings<OutOfBrowserSettings ShortName="SL4App Application" EnableGPUAcceleration="False" ShowInstallMenuItem="True"> <OutOfBrowserSettings.Blurb>SL4App Application on your desktop; at home, at work or on the go.</OutOfBrowserSettings.Blurb> <OutOfBrowserSettings.WindowSettings> <WindowSettings Title="SL4App Application" Height="250" Width="350" Top="100" Left="75" WindowStartupLocation="Manual" /> </OutOfBrowserSettings.WindowSettings> <OutOfBrowserSettings.Icons /></OutOfBrowserSettings>

Install Silverlight Out of Browser App

How to whether the app is running Out of Browser

if (App.Current.IsRunningOutOfBrowser){

tbMode.Text = "Running Out of Browser";}Else{

tbMode.Text = "Running in Browser";}

How to check the Network status

if (NetworkInterface.GetIsNetworkAvailable()){

tbNetwork.Text = "Connected to Network";}Else{

tbNetwork.Text = "Disconnected";}

Save As Dialog (new in SL3)<StackPanel VerticalAlignment="Top" Margin="10" x:Name="LayoutRoot"> <TextBlock>Enter text and Click on Save to save text to local file</TextBlock> <TextBox Height="100" x:Name="textbox" /> <Button Click="Button_Click">Save to local file</Button></StackPanel>

SaveFileDialog dialog = new SaveFileDialog(){

Filter = "TextFile (*.txt)|*.txt|WordDoc (*.doc)|*.doc",DefaultExt = "*.txt",FilterIndex = 1

}; bool? result = dialog.ShowDialog();if (result == true){

Stream stream = dialog.OpenFile();using (StreamWriter fileWriter = new StreamWriter(stream))

{ fileWriter.Write(textbox.Text); fileWriter.Close(); }}

Save As Dialog (Cont’d)

HTML BridgeAllows to attach Silverlight managed event handlers to

HTML controls.Attach JavaScript event handlers to Silverlight controls.Expose complete managed types to JavaScript for

scripting.Expose individual methods of managed types to

JavaScript for scripting.Use managed containers for DOM elements such as

window, document, and standard HTML elements.Pass managed types as parameters to JavaScript

functions and objects.Return managed types from JavaScript.

Accessing the HTML DOMBrowser library provides access to HTML document,

individual DOM elements and allows to invoke scripts from managed Silverlight code.

To access HTML DOM from Silverlight, use following HTML Bridge classes from System.Windows.BrowserHtmlPage - represents the Web page. HtmlPage is static

and is the main entry point for all DOM access. Exposes properties like Document, Plugin, BrowserInformation and Window

HtmlDocument – represents document object. Provides GetElementById, SetProperty, GetProperty, Submit methods and Body, QueryString properties

HtmlElement - represents DOM elements. Propvides SetProperty, GetProperty methods and Id, Children, Parent, CssClass properties.

HTMLPage class example

this.DataContext = HtmlPage.BrowserInformation;

Updating DOM Elements - Example

Interacting with HTML ExampleWindow class provides methods like Alert, Prompt and

Confirm methods for dialog boxes.Navigate and NavigateToBookmark methods for page

navigation.GetProperty and SetProperty methods to read and

write properties related to window.

Silverlight-enabled WCF ServiceWCF server functionality for hosting Web services is not available

in Silverlight 3/4. WCF client-side features are generally supported.

Currently Silverlight WCF Framework only supports basicHttpBinding, PollingDuplexHttpBinding and CustomBinding.

Other WCF bindings are not available because they require features that are not supported by the Silverlight client. WSHttpBinding, for example, requires sessions and transactions, which are not supported.

Making a Service Available Across Domain BoundariesTo prevent cross-site request forgery, Silverlight allows only site-of-

origin communication by default for all requests other than images and media. Example - a Silverlight control hosted at

http://contoso.com/mycontrol.aspx can access only services on that same domain by default – for example http://contoso.com/service.svc, but not a service at http://fabrikam.com/service.svc.

To enable a Silverlight control to access a service in another domain, the service must explicitly opt-in to allow cross-domain access.

Silverlight 4 supports two different mechanisms for services to opt-in to cross-domain access: Place a clientaccesspolicy.xml file at the root of the domain where the

service is hosted to configure the service to allow cross-domain access. Place a valid crossdomain.xml file at the root of the domain where the

service is hosted. The file must mark the entire domain public. Silverlight supports a subset of the crossdomain.xml schema.

Use clientaccesspolicy.xml file to allow cross-domain access

Create a clientaccesspolicy.xml file that allows access to the service. The following configuration allows access from any other domain to all resources on the current domain.

WCF Syndication (RSS and Atom)Mechanism of app integration - server exposes some

application data in interoperable format known as a Feed. Feed - collection of application data that consists of some

feed-level metadata (title, author, URL, and other metadata) and a series of feed items.

Within the feed, feed items are ordered in reverse chronological order.

Feed item consists of -Standard set of item-level metadata (title, URL, creation date,

category etc) Arbitrary amount of application specific data.

Two common types of syndication feeds are Really Simple Syndication (RSS) 2.0 and Atom 1.0 – WCF supports both.

Syndication classes in WCFLocated in System.ServiceModel.Web assembly

(System.ServiceModel.Syndication ns)Syndication specific classes - allows to work

with feed, feed items, and related metadata in format-independent way: SyndicationFeed - Represents a top-level feed

object, <feed> in Atom 1.0 and <rss> in RSS 2.0. SyndicationItem - Represents a feed item, for

example an RSS <item> or an Atom <entry>. SyndicationPerson, SyndicationLink,

SyndicationCategoryInfrastructure classes - build on WCF web

programming model to provide syndication support Atom10FeedFormatter & RSS20FeedFormatter -

feed formatter classes support serializing object model to and from RSS 2.0 and Atom 1.0.

RSS

Atom

Syndication Object Model

Syndication Feed Example

Create a Basic RSS Feed in WCF Mark Service contract interface

with the WebGetAttribute. Each operation exposed as

syndication feed should return Rss20FeedFormatter object.

Use WebHttpBinding instead of basic/ws HttpBinding.

To host service use WebServiceHost (not ServiceHost)

Create a Basic Atom Feed in WCF Mark Service contract interface

with the WebGetAttribute. Each operation exposed as

syndication feed should return Atom10FeedFormatter object (instead of Rss20FeedFormatter object).

Use WebHttpBinding instead of basic/ws HttpBinding.

To host service use WebServiceHost (not ServiceHost)

Syndication (RSS and Atom) in IE8

WCF Syndication Example

Using Syndication within Enterprise

Syndication Example

Syndication Example (Cont’d)

Resources

Silverlight 4: What’s new

Printingnamespace - System.Windows.Printing classes – PrintDocument

private void btnPrint_Click(object sender, RoutedEventArgs e) { PrintDocument printDoc = new PrintDocument(); printDoc.PrintPage += (s, args) => { args.PageVisual = LayoutRoot; };  printDoc.Print("SL4"); }

Printing (Cont’d)args.PageVisual = dgEmps;

RichTextBox control

Clipboard AccessSilverlight 4 adds ability to programmatically access clipboard to

format and modify data during copy, cut, and paste operations. Copy: Clipboard.SetText(rtb.Selection.Text);

Paste:rtb.Selection.Text = Clipboard.GetText();

Cut:Clipboard.SetText(rtb.Selection.Text);

rtb.Selection.Text = "";

Elevated Trust

Verified / Unverified Application

Security Warning for Unverified App Security Warning for Verified App

Silverlight PerformanceTest on Multiple Platforms and Browsers Set EnableFrameRateCounter to true During Development Use Transparent Background for a Silverlight Plug-in

Sparingly When Animating the Opacity or Transform of a

UIElement, set its CacheMode Cache Visual Elements when Blending layers using Opacity

and Rotating or Stretching Objects Avoid Using Windowless Mode Use Visibility Instead of Opacity Whenever Possible Silverlight Uses Multi-Core in Rendering and Media In Full-Screen Mode, Hide Unused Objects

Silverlight Performance (Cont’d)Do Not Use Width and Height with MediaElement

Objects Do Not Use Width and Height with Path Objects Break Up CPU-Intensive Work into Smaller Tasks Break Up Large Application Packages Use Double.ToString(CultureInfo.InvariantCulture)

Rather Than Double.ToString() Use Stretch="Fill" When Rendering a Lot of ImagesPerform time-consuming operations on a background

thread using BackgroundWorker class.

Security

Silverlight Security ModelBy default, Silverlight apps are hosted in browser and run in an

environment that restricts access to user's computer . Operate within partial-trust security boundary - called a sandbox.

Silverlight apps run in a different security context than the rest of the HTML page that hosts the Silverlight plug-in.

Cannot access file system and other system resources in the same way as traditional .NET applications. These actions can still be performed, but they typically must be initiated by the user.Otherwise Silverlight throws SecurityException exception.

Despite the restricted execution environment, there are some security considerations when you build Silverlight applications.

Silverlight 4 and later applications can be configured to run in elevated trust, which also has security implications.

Silverlight SecurityApps operate within a partial-trust security boundary (sandbox). Cannot access the file system and other system resources in the

same way as traditional .NET applications. This sandbox environment is enabled by a security model.In the context of security within the application, there are two

code types in Silverlight: platform code and application code. Platform code is the API provided by the Silverlight runtime and SDK.Application code is the code that you write by using the platform code.

Silverlight runtime can detect code type based on location of code assembly and by checking the public key of assembly.

If an assembly is loaded from the Silverlight runtime or SDK installation directory, is signed with a public key from Microsoft, and meets some additional requirements, the assembly can contain platform code. This means that Silverlight application code is never considered to be platform code.

Security LevelsSilverlight code has three security levels: Transparent, SafeCritical,

and Critical. Transparent Code - code that cannot elevate permissions of call stack.

Transparent code can only run with same permission level as its caller. All app code is Transparent code. Has the following characteristics - Cannot contain unverifiable code. All of the code must be verifiably type-safe. Cannot call native code via a P/Invoke or COM interop. Cannot access Critical code or data unless the target is marked SafeCritical.

SafeCritical Code - code layer on top of Critical code that helps to ensure calls are safe. Platform code can be Transparent, SafeCritical, or Critical

Critical Code - code that has ability to perform operations outside the security sandbox (such as writing to the file system)

Security Features: Partial TrustFeatures Sandbox RestrictionsFile system access File system access is limited and most dialog boxes must be user-initiated.

Isolated local storage

Local storage is isolated from the rest of the file system. Storage is limited to 1 MB unless the user increases it. User may clear isolated storage cache.

Full-screen modeFull-screen mode must be user-initiated and displays a message about how to exit. When the user presses the ESC key or switches to another window, the application automatically exits full-screen mode.

Webcam & micro-phone support

Use of a webcam or microphone must be user-initiated. The user must grant permission in the security prompt.

Printing The Print dialog box must be user-initiated.

Clipboard accessClipboard access must be user-initiated. The user must grant permission in the security prompt. Permission ends when the current page is closed or the user navigates away.

Right-click, context menu support

By default, Silverlight provides a right-click context menu that includes an option to access the Microsoft Silverlight Configuration Dialog Box. The configuration dialog box is also available on the Start menu in case an application provides its own right-click support.

Reflection and Reflection Emit Reflection and reflection emit are restricted per partial-trust requirements.

Network resource access

Network resource access is restricted. Only some network protocols can be used and access is restricted by a security policy.

Security Exception

Different Sandbox Modes

aaa

Hosting Environment DescriptionWeb Browser, partial trust

The Silverlight application runs as part of a Web page, and has limited access to the host computer.

Out-of-Browser, partial trust

The Silverlight application is installed on the user's computer, but with the same security context as an in-browser Silverlight application.

Out-of-Browser, elevated trust

The Silverlight application is installed with increased access to the user's computer. Silverlight 4 and later.