silverlight chapter 01 - introduction

Copyright 2010, AppDev Products, LLC. All Rights Reserved.

Welcome!

Instructor: Bill Hatfield

AppDev’s

Silverlight 4 for Visual Studio 2010 Using Visual Basic


Introducing Silverlight 4!


Objectives• Introduce Silverlight• Investigate XAML and the XAML designer

in Visual Studio 2010• Learn about XAML controls, properties,

and events• Work with container controls, dependency

properties, and the Grid control


Agenda• Introducing Silverlight• Introducing XAML and the Silverlight

Designer• Investigating XAML• Introducing Content and Grid Controls

Introducing Silverlight• Cross-browser, cross-platform plug-in• Create rich interactive applications (RIAs)

for the Web• Originally seen as a competitor to Flash • Lightweight runtime (under 5 MB)• Based on XAML• Quick demonstration:

http://www.microsoft.com/silverlight



Why Silverlight?• Delivers the best of both worlds:

Leverages .NET Framework Creates rich Internet experiences Provides class library support for rapid

development

Why Silverlight?• Beyond HTML

Keeps users engaged o Combines animation, video, vector graphics,

perspective 3D, effects, features like Deep Zoom

• Fastest Web Experiences Put any CPU to work Multi-threading support

• Tap into 100+ Controls Silverlight allows you to skin controls using

mark-up Easier to have controls fit your task or brand


Why Silverlight?• Highest quality media

Up to 1080p true HD-quality video Uses H.264 (MP4) or WMV with Smooth

Streaming• Mac, Windows, and Linux

Works with every major operating system All major browsers

• Go out of Browser Can install applications on desktop Run apps seamlessly without connectivity


Evolution of Silverlight• Silverlight 1

Support for scripting languages only Interesting layout capabilities Great for streaming videos

• Silverlight 2 Support for .NET Framework and CLR Data binding Isolated storage Support for calling services Cross-domain network access


Silverlight 3• Navigation Framework

Build apps with multiple pages Navigation via links

• More controls and layout capabilities• Modal windows• Element-to-element binding• Data validation• Ability to run outside the browser


Silverlight 4• Printing support• Several new controls, including DataGrid• Enhanced data binding, including drag

and drop• “Toast” notification windows• Offline DRM• For trusted applications

COM Interop Reading/writing user’s special folders New interface for requesting application

privilegesCopyright 2010, AppDev Products, LLC. All Rights Reserved.

Silverlight Development Tools• Visual Studio 2008 (Silverlight 3)

Download the Silverlight 3 Toolkit No visual designer

• Visual Studio 2010 (Silverlight 3 or 4) Build Silverlight applications out of the box Full tooling Download Silverlight 4

• Expression Blend 3 (and now 4!) Powerful tool for building layout, animation,

effects Bit of a learning curve (made for designers) Not free, but included in MSDN subscriptionsCopyright 2010, AppDev Products, LLC. All Rights Reserved.

Getting Started• Verify that Silverlight has been installed• Navigate to:

http://www.microsoft.com/silverlight/get-started/install/default.aspx

• Can also use Control Panel to verify version


Getting Started• Build Silverlight solutions in Visual Studio

Suggestion: o Consider using Expression Blend for more complex

styling, templating, animations, and so on

• Three types of Silverlight projects Silverlight Application template creates simple

application Silverlight Navigation Application template

provides a jumpstart for more sophisticated multi-page apps

Silverlight Library creates DLL o Makes it easier to partition logic and features



WPF vs. Silverlight• Microsoft provides two technologies for

client-side applications: WPF and Silverlight

• Both allow you to create client applications Both use XAML to design the interface

• WPF has entire .NET Framework behind it• Silverlight works with a small subset of

Framework


WPF vs. Silverlight• WPF:

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)o XBAPs require the .NET Framework on the client

(where the browser is running)o Browser compatibility: IE only in .NET 3.0; IE and

Firefox in .NET 3.5 and later Provides richest functionality

o Full support for 3D graphics


WPF vs. Silverlight• Silverlight:

Ships independently; isn’t part of .NET Framework

Is typically hosted in a Web browsero Broad browser support including IE, Firefox, Safari

Cross-platform - Runs on Windows, Mac, Linux clients

Provides a subset of WPF’s featureso And only small subset of .NET Framework

• Which do you use? Depends on target audience, technological

needs, preferred deployment

An Inconvenient Truth (or Two)• Far more difficult to create a decent-

looking application in XAML Because the bar is so much lower in other

environments Developers creating applications in XAML

generally create ugly applications Good XAML applications require graphic

designers• On the other hand…

Far easier to create great-looking application o Because Windows and Web forms are so limited

• Also check out Microsoft Expression StudioCopyright 2010, AppDev Products, LLC. All Rights Reserved.

Silverlight and XAML• Silverlight and XAML: The same thing?

XAML is XML-based grammar that can be used to declaratively define Silverlight applications

Can also use Silverlight libraries and code the interface• XAML <-> Silverlight libraries are not a one-to-

one mapping Some names in used in creating a Silverlight interface in

XAML don’t match exactly with the corresponding library class/collection/property names



Introducing XAML• Build Silverlight solutions in Visual Studio

Use Expression Blend for sophisticated styling, templating, animations, and more

• Silverlight projects Silverlight Application template creates simple

applicationo Outputs XAP file, downloaded by the Silverlight

runtime Silverlight Navigation Application template

provides a jumpstart for multi-page apps Silverlight Library creates DLL

o Makes it easier to partition logic and features

Additional Silverlight 4 Projects• Silverlight 4 adds more project types:

Silverlight Business Applicationo Includes login and membership

WCF RIA Services Class Library• Focus on Silverlight Application template

in this course• Visual Studio 2010 doesn’t include all

Silverlight controls Download Silverlight Toolkit to get the rest

http://www.codeplex.com/Silverlight



Your First Silverlight Application

Pages 1-8 to 1-10

Investigating XAML• XAML is simple

But provides several different ways to set property values

• Simple Properties/Type Converters• Complex Properties• Markup Extensions• Attached Properties



Simple Properties/Type Converters• Dragging Button control onto design

surface creates several properties Markup counts on Button class providing

Content, Height, HorizontalAlignment, Margin, Name, VerticalAlignment, and Width properties

• Some properties are simple strings Content and Name properties

• Others are more complex


Type Converters• Height and Width properties?

Properties are numeric Markup supplies values as strings Along the line, some code must convert Works because Integer class provides built-in

conversion from string• Other properties even more complex:

HorizontalAlignment and VerticalAlignment?o Need to convert from string (Bottom, Center,

Stretch, or Top; Center, Left, Right, Stretch) to enumerated values


Type Converters• Margin adds own set of issues

Can 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 structure Contains four integers Setting property calls constructor for

Thickness structure Requires converter to read the comma-

delimited string and convert to a call to the constructor


Complex Properties• Type converters work well

Some properties can’t be represented by single value

• Want to specify background of a Grid control as a linear gradient? Can’t represent the behavior with a single

value• Properties of elements that are

themselves objects with properties require special care Represent as nested elements Named Parent.Property (Grid.Background)


DEMO

Page 1-22: Complex Properties, Try It Out!


Markup Extensions• Usually, standard XAML markup provides

functionality you need• Sometimes not possible to set property

value at design time Some properties must be set dynamically, at

runtime Need to use markup extension

o Allows you to set property in non-standard way

• Can specify markup extension as nested element, or as attribute As attribute, always surrounded with { } Indicating value supplied at runtime


Markup Extensions• Declarative binding requires markup

extension:

• Can also express using child element:

Property= "{Binding ElementName=ObjectName, Path="PropertyName}"

<Object.Property> <Binding ElementName="ObjectName", Path=PropertyName"/></Object.Property>


DEMO• Markup extension/binding


Attached Properties• Nest a control within a Grid

Specify its row and column with Grid.Row and Grid.Column properties

Where did these come from? o Child control doesn't supply!

Grid adds these to all its child controls In other words, they're attached properties Properties appear as properties of the class

o But they're defined in a different class (Grid, in this case)


Attached Properties• Specific syntax:

DefiningType.PropertyNameo Grid.Row

Aren't actually propertieso Converted to method calls by compiler

Defining class must provide GetPropertyName and SetPropertyName methods

o Grid.GetRow and Grid.SetRow

• Technique hides what's really going on Calling method in defining class? Does Grid keep track of all its children's

coordinates?


Attached Properties• Of course, Grid doesn't keep track of all its

children's coordinates• Child controls all inherit from

DependencyObject Defined to maintain an unlimited number of

dependency properties• Parent (Grid) maintains a single instance

of a field for each property Grid.RowProperty for Grid.Row, for example Child maintains its own value for that property


Attached Properties• Calling parent control's GetPropertyName

and SetPropertyName methods equivalent to calling GetValue and SetValue methods of child object

• To retrieve Grid.Row property of TextBox named DemoTextBox, use expression like:DemoTextBox.GetValue(Grid.RowProperty)



Designer• Investigating XAML• Introducing Content and Grid

Controls

Content and Grid Controls• Many controls inherit from ContentControl

(including Button) and can contain other controls Button with image and text?

o No problem! ListBox containing a bunch of TextBox

controls? o No problem!


Working with Layout Controls• Several controls useful for laying out other

controls• DockPanel

Allocates an edge for each child control Useful for defining rough layout

• StackPanel Stacks children horizontally or vertically Useful internal to other controls (Button, for

example)


Working with Layout Controls• Grid

Arranges children in a grid No need for fixed sizes or positions Rescales when resized

• Canvas No layout logic Manually control each aspect of layout


List Box as Container• DEMO



Working with the Grid Control• DEMO

Dependency Properties• In standard .NET code, property is defined

using two procedures “setter” and “getter”

• More complex mechanism here Workflow uses same mechanism

• Dependency properties allow for: Styling Automatic data binding Animation Change notification and more…


DependencyObject Class• DependencyProperty class acts as base

for the properties• DependencyObject is base for classes that

can consume and expose dependency properties

• XAML classes expose far more properties than the corresponding prior classes Need some internal plumbing to handle


Investigating DependencyProperty• .NET maintains internal dictionary of

classes and the properties they expose• DependencyProperty instance defined as

a static/shared member of a class• In constructor, code registers property, its

type, and hosting class with .NET• Can optionally create standard .NET

property that wraps up the dependency property


Declaring the Property


VB: Public Shared IsAvailableProperty As DependencyPropertyC#: public static DependencyProperty IsAvailableProperty;

In Constructor


[Visual Basic]MyClass.IsAvailableProperty = _ DependencyProperty.Register("IsAvailable", _ GetType(Boolean), GetType(MyClass))[C#]MyClass.IsAvailableProperty = DependencyProperty.Register("IsAvailable", typeof(bool), typeof(MyClass))

Property Wrapper


[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 Wrapper


[C#]public bool IsAvailable{ get { return (bool) GetValue(MyClass.IsAvailableProperty); } set { SetValue(MyClass.IsAvailableProperty, value) }}

Using Attached Properties• Button control doesn’t expose

Grid.Column or Grid.Row Yet these attributes exist in the XAML markup

• These are attached properties Properties added by container, when hosted Retrieve and set using

DependencyObject.GetValue and DependencyObject.SetValue


Working with Attached Properties


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

Interacting with the Grid• Add code to move button to new row



Running Out of Browser• Silverlight applications distributed through

browser But applications can be run locally: no

connection!• Even when run locally

Silverlight apps use only small subset of .NET Framework

Apps are still sandboxedo Can’t do anything destructive unless granted

permission explicitly No connectivity required

• Simple to install and uninstall


Running Out of Browser• DEMO

silverlight chapter 01 - introduction

Technology

appdev products

build silverlight applications

xaml controls

net frameworkis

entire net framework

linksmore controls

container controls

skin controls