SilverlightCh01

ObjectivesIntroduce SilverlightInvestigate XAML and the XAML designer in Visual Studio 2010Learn about XAML controls, properties, and eventsWork with container controls, dependency properties, and the Grid controlCopyright 2010, AppDev Products, LLC. All Rights Reserved.

Introducing SilverlightCross-browser, cross-platform plug-inCreate rich interactive applications (RIAs) for the WebOriginally seen as a competitor to Flash Lightweight runtime (under 5 MB)Based on XAMLQuick demonstration:http://www.microsoft.com/silverlightCopyright 2010, AppDev Products, LLC. All Rights Reserved.

Copyright 2010, AppDev Products, LLC. All Rights Reserved.Why Silverlight?Delivers the best of both worlds:Leverages .NET FrameworkCreates rich Internet experiencesProvides class library support for rapid development

Why Silverlight?Beyond HTMLKeeps users engaged Combines animation, video, vector graphics, perspective 3D, effects, features like Deep ZoomFastest Web ExperiencesPut any CPU to workMulti-threading supportTap into 100+ ControlsSilverlight allows you to skin controls using mark-upEasier to have controls fit your task or brandCopyright 2010, AppDev Products, LLC. All Rights Reserved.

Why Silverlight?Highest quality mediaUp to 1080p true HD-quality videoUses H.264 (MP4) or WMV with Smooth StreamingMac, Windows, and LinuxWorks with every major operating systemAll major browsersGo out of BrowserCan install applications on desktopRun apps seamlessly without connectivityCopyright 2010, AppDev Products, LLC. All Rights Reserved.

Evolution of SilverlightSilverlight 1Support for scripting languages onlyInteresting layout capabilitiesGreat for streaming videosSilverlight 2Support for .NET Framework and CLRData bindingIsolated storageSupport for calling servicesCross-domain network accessCopyright 2010, AppDev Products, LLC. All Rights Reserved.

Silverlight 3Navigation FrameworkBuild apps with multiple pagesNavigation via linksMore controls and layout capabilitiesModal windowsElement-to-element bindingData validationAbility to run outside the browserCopyright 2010, AppDev Products, LLC. All Rights Reserved.

Silverlight 4Printing supportSeveral new controls, including DataGridEnhanced data binding, including drag and drop“Toast” notification windowsOffline DRMFor trusted applicationsCOM InteropReading/writing user’s special foldersNew interface for requesting application privilegesCopyright 2010, AppDev Products, LLC. All Rights Reserved.

Silverlight Development ToolsVisual Studio 2008 (Silverlight 3)Download the Silverlight 3 ToolkitNo visual designerVisual Studio 2010 (Silverlight 3 or 4)Build Silverlight applications out of the boxFull toolingDownload Silverlight 4Expression Blend 3 (and now 4!)Powerful tool for building layout, animation, effectsBit of a learning curve (made for designers)Not free, but included in MSDN subscriptionsCopyright 2010, AppDev Products, LLC. All Rights Reserved.

Getting StartedVerify that Silverlight has been installedNavigate to:http://www.microsoft.com/silverlight/get-started/install/default.aspxCan also use Control Panel to verify versionCopyright 2010, AppDev Products, LLC. All Rights Reserved.

Getting StartedBuild Silverlight solutions in Visual StudioSuggestion: Consider using Expression Blend for more complex styling, templating, animations, and so onThree types of Silverlight projectsSilverlight Application template creates simple applicationSilverlight Navigation Application template provides a jumpstart for more sophisticated multi-page appsSilverlight Library creates DLL Makes it easier to partition logic and featuresCopyright 2010, AppDev Products, LLC. All Rights Reserved.

WPF vs. SilverlightMicrosoft provides two technologies for client-side applications: WPF and SilverlightBoth allow you to create client applicationsBoth use XAML to design the interfaceWPF has entire .NET Framework behind itSilverlight works with a small subset of FrameworkCopyright 2010, AppDev Products, LLC. All Rights Reserved.

WPF vs. SilverlightWPF:Ships as part of .NET Framework (3.0 and later)Runs only on Windows (XP or better)Runs as a stand-alone Windows app or as a Web Browser app (XBAP)XBAPs require the .NET Framework on the client (where the browser is running)Browser compatibility: IE only in .NET 3.0; IE and Firefox in .NET 3.5 and laterProvides richest functionalityFull support for 3D graphicsCopyright 2010, AppDev Products, LLC. All Rights Reserved.

WPF vs. SilverlightSilverlight:Ships independently; isn’t part of .NET FrameworkIs typically hosted in a Web browserBroad browser support including IE, Firefox, SafariCross-platform - Runs on Windows, Mac, Linux clientsProvides a subset of WPF’s featuresAnd only small subset of .NET FrameworkWhich do you use?Depends on target audience, technological needs, preferred deploymentCopyright 2010, AppDev Products, LLC. All Rights Reserved.

An Inconvenient Truth (or Two)Far more difficult to create a decent-looking application in XAMLBecause the bar is so much lower in other environmentsDevelopers creating applications in XAML generally create ugly applicationsGood XAML applications require graphic designersOn the other hand…Far easier to create great-looking application Because Windows and Web forms are so limited Also check out Microsoft Expression StudioCopyright 2010, AppDev Products, LLC. All Rights Reserved.

Silverlight and XAMLSilverlight and XAML: The same thing?XAML is XML-based grammar that can be used to declaratively define Silverlight applicationsCan also use Silverlight libraries and code the interfaceXAML <-> Silverlight libraries are not a one-to-one mappingSome names in used in creating a Silverlight interface in XAML don’t match exactly with the corresponding library class/collection/property namesCopyright 2010, AppDev Products, LLC. All Rights Reserved.

Introducing XAMLBuild Silverlight solutions in Visual StudioUse Expression Blend for sophisticated styling, templating, animations, and moreSilverlight projectsSilverlight Application template creates simple applicationOutputs XAP file, downloaded by the Silverlight runtimeSilverlight Navigation Application template provides a jumpstart for multi-page appsSilverlight Library creates DLL Makes it easier to partition logic and featuresCopyright 2010, AppDev Products, LLC. All Rights Reserved.

Additional Silverlight 4 ProjectsSilverlight 4 adds more project types:Silverlight Business ApplicationIncludes login and membership WCF RIA Services Class LibraryFocus on Silverlight Application template in this courseVisual Studio 2010 doesn’t include all Silverlight controlsDownload Silverlight Toolkit to get the resthttp://www.codeplex.com/SilverlightCopyright 2010, AppDev Products, LLC. All Rights Reserved.

Investigating XAMLXAML is simpleBut provides several different ways to set property valuesSimple Properties/Type ConvertersComplex PropertiesMarkup ExtensionsAttached PropertiesCopyright 2010, AppDev Products, LLC. All Rights Reserved.

Simple Properties/Type ConvertersDragging Button control onto design surface creates several propertiesMarkup counts on Button class providing Content, Height, HorizontalAlignment, Margin, Name, VerticalAlignment, and Width propertiesSome properties are simple stringsContent and Name propertiesOthers are more complexCopyright 2010, AppDev Products, LLC. All Rights Reserved.

Type ConvertersHeight and Width properties?Properties are numericMarkup supplies values as stringsAlong the line, some code must convertWorks because Integer class provides built-in conversion from stringOther properties even more complex:HorizontalAlignment and VerticalAlignment?Need to convert from string (Bottom, Center, Stretch, or Top; Center, Left, Right, Stretch) to enumerated valuesCopyright 2010, AppDev Products, LLC. All Rights Reserved.

Type ConvertersMargin adds own set of issuesCan supply a single value (all four sides)Can supply two values (left/right and top/bottom)Can supply four values (left, top, right, bottom)Margin property is a Thickness structureContains four integersSetting property calls constructor for Thickness structureRequires converter to read the comma-delimited string and convert to a call to the constructorCopyright 2010, AppDev Products, LLC. All Rights Reserved.

Complex PropertiesType converters work wellSome properties can’t be represented by single valueWant to specify background of a Grid control as a linear gradient?Can’t represent the behavior with a single valueProperties of elements that are themselves objects with properties require special careRepresent as nested elements Named Parent.Property (Grid.Background)Copyright 2010, AppDev Products, LLC. All Rights Reserved.

Markup ExtensionsUsually, standard XAML markup provides functionality you needSometimes not possible to set property value at design timeSome properties must be set dynamically, at runtimeNeed to use markup extensionAllows you to set property in non-standard wayCan specify markup extension as nested element, or as attributeAs attribute, always surrounded with { }Indicating value supplied at runtimeCopyright 2010, AppDev Products, LLC. All Rights Reserved.

Markup ExtensionsDeclarative binding requires markup extension:Can also express using child element:Copyright 2010, AppDev Products, LLC. All Rights Reserved.Property= "{Binding ElementName=ObjectName, Path="PropertyName}"<Object.Property> <Binding ElementName="ObjectName", Path=PropertyName"/></Object.Property>

Attached PropertiesNest a control within a GridSpecify its row and column with Grid.Row and Grid.Column propertiesWhere did these come from? Child control doesn't supply!Grid adds these to all its child controlsIn other words, they're attached propertiesProperties appear as properties of the classBut they're defined in a different class (Grid, in this case)Copyright 2010, AppDev Products, LLC. All Rights Reserved.

Attached PropertiesSpecific syntax:DefiningType.PropertyNameGrid.RowAren't actually propertiesConverted to method calls by compilerDefining class must provide GetPropertyName and SetPropertyName methodsGrid.GetRow and Grid.SetRowTechnique hides what's really going onCalling method in defining class?Does Grid keep track of all its children's coordinates?Copyright 2010, AppDev Products, LLC. All Rights Reserved.

Attached PropertiesOf course, Grid doesn't keep track of all its children's coordinatesChild controls all inherit from DependencyObjectDefined to maintain an unlimited number of dependency propertiesParent (Grid) maintains a single instance of a field for each propertyGrid.RowProperty for Grid.Row, for exampleChild maintains its own value for that propertyCopyright 2010, AppDev Products, LLC. All Rights Reserved.

Attached PropertiesCalling parent control's GetPropertyName and SetPropertyNamemethods equivalent to calling GetValue and SetValue methods of child objectTo retrieve Grid.Row property of TextBox named DemoTextBox, use expression like:Copyright 2010, AppDev Products, LLC. All Rights Reserved.DemoTextBox.GetValue(Grid.RowProperty)

Content and Grid ControlsMany controls inherit from ContentControl (including Button) and can contain other controlsButton with image and text? No problem!ListBox containing a bunch of TextBox controls? No problem!Copyright 2010, AppDev Products, LLC. All Rights Reserved.

Working with Layout ControlsSeveral controls useful for laying out other controlsDockPanelAllocates an edge for each child controlUseful for defining rough layoutStackPanelStacks children horizontally or verticallyUseful internal to other controls (Button, for example)Copyright 2010, AppDev Products, LLC. All Rights Reserved.

Working with Layout ControlsGridArranges children in a gridNo need for fixed sizes or positionsRescales when resizedCanvasNo layout logicManually control each aspect of layoutCopyright 2010, AppDev Products, LLC. All Rights Reserved.

Dependency PropertiesIn standard .NET code, property is defined using two procedures“setter” and “getter”More complex mechanism hereWorkflow uses same mechanismDependency properties allow for:StylingAutomatic data bindingAnimationChange notificationand more…Copyright 2010, AppDev Products, LLC. All Rights Reserved.

DependencyObject ClassDependencyProperty class acts as base for the propertiesDependencyObject is base for classes that can consume and expose dependency propertiesXAML classes expose far more properties than the corresponding prior classesNeed some internal plumbing to handleCopyright 2010, AppDev Products, LLC. All Rights Reserved.

Investigating DependencyProperty.NET maintains internal dictionary of classes and the properties they exposeDependencyProperty instance defined as a static/shared member of a classIn constructor, code registers property, its type, and hosting class with .NETCan optionally create standard .NET property that wraps up the dependency propertyCopyright 2010, AppDev Products, LLC. All Rights Reserved.

In ConstructorCopyright 2010, AppDev Products, LLC. All Rights Reserved.[Visual Basic]MyClass.IsAvailableProperty = _ DependencyProperty.Register("IsAvailable", _ GetType(Boolean), GetType(MyClass))[C#]MyClass.IsAvailableProperty = DependencyProperty.Register("IsAvailable", typeof(bool), typeof(MyClass))

Property WrapperCopyright 2010, AppDev Products, LLC. All Rights Reserved.[Visual Basic]Public Property IsAvailable() As Boolean Get Return _ CType(GetValue(MyClass.IsAvailableProperty), Boolean) End Get Set(ByVal value As Boolean) SetValue(MyClass.IsAvailableProperty, value) End SetEnd Property

Property WrapperCopyright 2010, AppDev Products, LLC. All Rights Reserved.[C#]public bool IsAvailable{ get { return (bool) GetValue(MyClass.IsAvailableProperty); } set { SetValue(MyClass.IsAvailableProperty, value) }}

Using Attached PropertiesButton control doesn’t expose Grid.Column or Grid.RowYet these attributes exist in the XAML markupThese are attached propertiesProperties added by container, when hostedRetrieve and set using DependencyObject.GetValue and DependencyObject.SetValueCopyright 2010, AppDev Products, LLC. All Rights Reserved.

Working with Attached PropertiesCopyright 2010, AppDev Products, LLC. All Rights Reserved.[Visual Basic]Dim row As Integer = CType(DemoButton.GetValue(Grid.RowProperty), Integer)DemoButton.SetValue(Grid.RowProperty, row + 1) [C#]int row = (int)DemoButton.GetValue(Grid.RowProperty);DemoButton.SetValue(Grid.RowProperty, row + 1);

Running Out of BrowserSilverlight applications distributed through browserBut applications can be run locally: no connection!Even when run locallySilverlight apps use only small subset of .NET FrameworkApps are still sandboxedCan’t do anything destructive unless granted permission explicitlyNo connectivity requiredSimple to install and uninstallCopyright 2010, AppDev Products, LLC. All Rights Reserved.

SilverlightCh01

More Related Content

What's hot (18)

Similar to SilverlightCh01 (20)

Recently uploaded (20)

SilverlightCh01