Silverlight Chapter 01 - Introduction
-
Upload
bill-hatfield -
Category
Technology
-
view
530 -
download
5
description
Transcript of 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
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
Introducing Silverlight 4!
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
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
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
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
Copyright 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 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
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
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
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
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
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
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
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
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
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
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
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
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
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
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
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
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
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
Agenda• Introducing Silverlight• Introducing XAML and the Silverlight
Designer• Investigating XAML• Introducing Content and Grid Controls
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
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
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
Your First Silverlight Application
Pages 1-8 to 1-10
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
Agenda• Introducing Silverlight• Introducing XAML and the Silverlight
Designer• Investigating XAML• Introducing Content and Grid Controls
Investigating XAML• XAML is simple
But provides several different ways to set property values
• Simple Properties/Type Converters• Complex Properties• Markup Extensions• Attached Properties
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
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
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
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
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
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
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
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)
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
DEMO
Page 1-22: Complex Properties, Try It Out!
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
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
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
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>
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
DEMO• Markup extension/binding
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
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)
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
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?
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
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
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
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)
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
Agenda• Introducing Silverlight• Introducing XAML and the Silverlight
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!
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
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)
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
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
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
List Box as Container• DEMO
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
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…
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
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
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
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
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
Declaring the Property
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
VB: Public Shared IsAvailableProperty As DependencyPropertyC#: public static DependencyProperty IsAvailableProperty;
In Constructor
Copyright 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 Wrapper
Copyright 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 Wrapper
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
[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
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
Working with Attached Properties
Copyright 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);
Interacting with the Grid• Add code to move button to new row
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
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
Copyright 2010, AppDev Products, LLC. All Rights Reserved.
Running Out of Browser• DEMO