Building Rich, Highly Interactive Web Apps with WPFE

1
Building Rich, Highly Interactive Web Apps with
WPF/E

• Jeff Prosise
• Cofounder, Wintellect
• www.wintellect.com

2
WPF/E

• "WPF/Everywhere"
• Microsoft's upcoming platform for rich, highly
  interactive Web experiences
• Cross-platform (browsers and OSes)
• XAML-based (subset of WPF XAML)
• Targeted availability Q2 2007
• Browser plug-in with JavaScript API
• http//msdn2.microsoft.com/en-us/asp.net/bb187358.
  aspx

3
Platforms (Feb. 2007 CTP)

• Browsers
• Internet Explorer 6 and 7 (Windows)
• Firefox 1.5.0.8, 2.0 (Windows and Mac)
• Safari 2.0.4 (Mac)
• Operating systems
• Windows XP SP2, Vista
• Mac OS X (10.4.8)
• Opera support coming soon (probably)

4
WPF/E Architecture
WPF/E
Presentation Runtime
Native DOM API
JavaScript DOM API
XAML
Media Support (Audio/Video)
Presentation Core
Browser Plug-In
Operating System (Windows, Mac)
5
Components of a WPF/E Page

• WPF/E Plug-in
• ActiveX control for Internet Explorer
• Traditional plug-in for other browsers
• agHost.js
• Host-independent wrapper for WPF/E plug-in
• HTML and JavaScript
• Import agHost.js and instantiate plug-in
• XAML

6
Page Structure
ltscript type"text/javascript" src"aghost.js"gtlt/s
criptgt ltdiv id"WpfeDiv"gtlt/divgt ltscript
type"text/javascript"gt new agHost(
"WpfeDiv", // DIV ID "wpfeControl",
// Control ID "100", // Width
"100", // Height "white",
// Background color null,
// XAML source element "Hello.xaml", //
XAML file "false", //
IsWindowless "30", //
MaxFrameRate null // Error
handler ) lt/scriptgt
7
Hello.xaml
ltCanvas Width"300" Height"300"
xmlns"http//schemas.microsoft.com/client/2007"
xmlnsx"http//schemas.microsoft.com/winfx/2006/
xaml"gt ltTextBlock FontSize"24pt"gtHello,
WPF/E!lt/TextBlockgt lt/Canvasgt
8
Inline XAML
ltscript type"text/javascript"gt new agHost(
"WpfeDiv", // DIV ID
"wpfeControl", // Control ID "100",
// Width "100", // Height
"white", // Background color
"xamlstuff" // XAML source element
) lt/scriptgt ltscript type"text/xaml"
id"xamlstuff"gt ltCanvas Width"300"
Height"300" xmlns"http//schemas.microsoft.c
om/client/2007" xmlnsx"http//schemas.micros
oft.com/winfx/2006/xaml"gt ltTextBlock
FontSize"24pt"gtHello, WPF/E!lt/TextBlockgt
lt/Canvasgt lt/scriptgt
9
(No Transcript)
10
Layout

• Layout is driven by Canvas objects
• Every page has a root Canvas object
• Page can contain additional Canvases
• Canvas is a container for other UI elements
• Object position is relative to Canvas position
• Object position in Canvas controlled by attached
  properties Canvas.Left and Canvas.Top
• All units measured in points

11
Positioning
ltCanvas Width"300" Height"560" xmlns"...
xmlnsx"..."gt ltCanvas Canvas.Left"40"
Canvas.Top"40" Width"220" Height"220"gt
ltEllipse Canvas.Left"40" Canvas.Top"40"
Height"140" Width"140" /gt lt/Canvasgt
ltCanvas Canvas.Left"40" Canvas.Top"300"
Width"220" Height"220"gt ltEllipse
Canvas.Left"40" Canvas.Top"40"
Height"140" Width"140" /gt lt/Canvasgt lt/Canvasgt
12
Drawing Primitives

• Shapes
• Ellipse, Line, Rectangle, Path, Polygon, Polyline
• Brushes
• SolidColorBrush, LinearGradientBrush,
  RadialGradientBrush, ImageBrush
• Text
• TextBlock, TextElement, Run
• Images

13
Rectangles
ltRectangle Canvas.Left"50" Canvas.Top"50"
Height"200" Width"300" StrokeThickness"10"
Stroke"Black" Fill"Yellow" /gt
Fill
Stroke
14
Ellipses and Paths
ltEllipse Canvas.Left"20" Canvas.Top"20"
Height"200" Width"200" Stroke"Black"
StrokeThickness"10" Fill"Yellow" /gt ltEllipse
Canvas.Left"80" Canvas.Top"80" Height"35"
Width"25" Stroke"Black" Fill"Black"
/gt ltEllipse Canvas.Left"140" Canvas.Top"80"
Height"35" Width"25" Stroke"Black"
Fill"Black" /gt ltPath Data"M 70, 150 A 60, 60 0
0 0 170, 150" Stroke"Black" StrokeThickness"15
" StrokeStartLineCap"Round" StrokeEndLineCap"R
ound" /gt
15
Property Element Syntax
ltRectangle Canvas.Left"50" Canvas.Top"50"
Height"200" Width"300" StrokeThickness"10"gt
ltRectangle.Strokegt ltSolidColorBrush
Color"Black" /gt lt/Rectangle.Strokegt
ltRectangle.Fillgt ltSolidColorBrush
Color"Yellow" /gt lt/Rectangle.Fillgt lt/Rect
anglegt
16
LinearGradientBrush
ltRectangle Canvas.Left"50" Canvas.Top"50"
Stroke"Black" Height"200" Width"300"
StrokeThickness"10"gt ltRectangle.Fillgt
ltLinearGradientBrushgt ltGradientStop
Color"Yellow" Offset"0.0" /gt
ltGradientStop Color"Red" Offset"0.25" /gt
ltGradientStop Color"Blue" Offset"0.75" /gt
ltGradientStop Color"LimeGreen" Offset"1.0" /gt
lt/LinearGradientBrushgt lt/Rectangle.Fillgt lt/Rec
tanglegt
17
RadialGradientBrush
ltRectangle Canvas.Left"50" Canvas.Top"50"
Stroke"Black" Height"200" Width"300"
StrokeThickness"10"gt ltRectangle.Fillgt
ltRadialGradientBrush GradientOrigin"0.5,0.5"
Center"0.5,0.5" RadiusX"0.5" RadiusY"0.5"gt
ltGradientStop Color"Yellow" Offset"0" /gt
ltGradientStop Color"Red" Offset"0.25" /gt
ltGradientStop Color"Blue" Offset"0.75" /gt
ltGradientStop Color"LimeGreen" Offset"1" /gt
lt/RadialGradientBrushgt lt/Rectangle.Fillgt lt/Rec
tanglegt
18
Text
ltTextBlock Canvas.Top"20" Canvas.Left"20"
FontSize"120pt" FontFamily"Georgia"
FontStyle"Italic" FontWeight"Bold"gt WPF/E
ltTextBlock.Foregroundgt ltLinearGradientBrushgt
ltGradientStop Color"Yellow" Offset"0.0"
/gt ltGradientStop Color"Red" Offset"0.25"
/gt ltGradientStop Color"Blue" Offset"0.75"
/gt ltGradientStop Color"LimeGreen"
Offset"1.0" /gt lt/LinearGradientBrushgt
lt/TextBlock.Foregroundgt lt/TextBlockgt
19
(No Transcript)
20
Images
ltImage Source"Corsair.jpg" Stretch"NoneFillU
niformUniformToFill" /gt
None
Fill
Aspect ratio preserved
Aspect ratio not preserved
Uniform
UniformToFill
21
Audio and Video

• MediaElement does audio/video playback
• Play, Pause, and Stop methods and Position
  property provide control over playback
• IsMuted, Volume, and Balance properties provide
  control over volume
• Source property identifies media (e.g., WMV) can
  be local file or URL

ltMediaElement Source"Corsair.wmv" Width"100"
Height"100" /gt
22
(No Transcript)
23
Transforms

• Operations that "transform" UI elements by
• Translating
• Rotating
• Scaling
• Skewing
• Use RenderTransform property to apply
• Use TransformGroup to group transforms
• Use MatrixTransform for custom transforms

24
Transform Types
TranslateTransform
RotateTransform
SkewTransform
ScaleTransform
25
Using Transforms
ltCanvasgt ltCanvas.RenderTransformgt
ltTransformGroupgt ltRotateTransform
Angle"135" CenterX"120" CenterY"120" /gt
ltScaleTransform ScaleX"1.5" ScaleY"1.2" /gt
lt/TransformGroupgt lt/Canvas.RenderTransformgt
... lt/Canvasgt
26
Clipping

• UIElement.Clip property controls clipping
• Geometry objects define clipping regions

ltEllipse Canvas.Left"20" Canvas.Top"20"
Fill"SlateBlue" Height"200" Width"200"
Stroke"Black" StrokeThickness"10"gt
ltEllipse.Clipgt ltRectangleGeometry Rect"0, 0,
100, 100" /gt lt/Ellipse.Clipgt lt/Ellipsegt
27
Opacity

• UIElement.Opacity property controls opacity
• WPF/E also supports ARGB color values

ltEllipse Canvas.Left"50" Canvas.Top"50"
Stroke"Black" Height"200" Width"300"
StrokeThickness"10" Fill"Red" Opacity"0.5"
/gt ltEllipse Canvas.Left"200" Canvas.Top"50"
Stroke"Black" Height"200" Width"300"
StrokeThickness"10" Fill"80FFFF00" /gt
28
OpacityMask

• UIElement.OpacityMask masks opacity
• Use gradient brushes for gradient masks

ltRectangle Canvas.Left"50" Canvas.Top"50"
Stroke"Black" Height"50" Width"500"
StrokeThickness"10" Fill"Yellow"gt
ltRectangle.OpacityMaskgt ltLinearGradientBrush
StartPoint"0,0" EndPoint"1,0"gt
ltGradientStop Offset"0" Color"Black" /gt
ltGradientStop Offset"0.8" Color"Transparent"
/gt lt/LinearGradientBrushgt
lt/Rectangle.OpacityMaskgt lt/Rectanglegt
29
(No Transcript)
30
Animation

• Animations are created by varying properties of
  UI elements over time
• From/To animations vary properties linearly
• Key-frame animations use discrete steps
• Animation objects define animations
• DoubleAnimationUsingKeyFrames
• ColorAnimationUsingKeyFrames
• PointAnimationUsingKeyFrames
• StoryBoard objects hold animation objects

31
Animating Motion
ltRectangle xName"Rect" Width"200"
Height"100" Fill"Red" Stroke"Blue"
StrokeThickness"10"gt ltRectangle.Triggersgt
ltEventTrigger RoutedEvent"Rectangle.Loaded"gt
ltEventTrigger.Actionsgt
ltBeginStoryboardgt ltStoryboardgt
ltDoubleAnimation
Storyboard.TargetName"Rect"
Storyboard.TargetProperty"(Canvas.Left)"
From"0" To"200" Duration"002" /gt
lt/Storyboardgt lt/BeginStoryboardgt
lt/EventTrigger.Actionsgt lt/EventTriggergt
lt/Rectangle.Triggersgt lt/Rectanglegt
32
Animation Properties

• StoryBoard and Animation properties control
  animation parameters

Property
Description
BeginTime
Time at which animation should begin (e.g,
"0010")
Duration
Duration of animation (e.g., "005")
AutoReverse
If true, plays animation in reverse after
completion
FillBehavior
"Stop"Reset to begin state, "HoldEnd"Retain end
state
RepeatBehavior
Specifies how many times animation plays (e.g.,
"Forever")
33
(No Transcript)
34
Object Hierarchy
lthtmlgt ltbodygt ... ltdiv
id"WpfeDiv"gt lt/divgt
... lt/bodygt lt/htmlgt
Web page
WPF/E plug-in
Canvas
Canvas
TextBlock
WPF/E content
Other Objects
35
Navigating the Hierarchy

• UIElement.children -gt Child nodes
• Use children.getItem to retrieve specified node
• Use children.add to add nodes on the fly
• UIElement.getParent -gt Parent node
• UIElement.getHost -gt WPF/E control
• findName -gt Any node in the hierarchy
• Call it on UI element or WPF/E control
• Searches entire object hierarchy
• Use xName attribute to name nodes

36
createFromXaml

• createFromXaml method creates objects from XAML
  strings
• Create objects programmatically
• Add objects to tree with object.children.add
• Implemented by WPF/E control
• Use document.getElementById to acquire control
  reference at run-time
• Or, in an event handler, use sender.getHost to
  acquire control reference

37
(No Transcript)
38
Events

• WPF/E objects fire events
• Canvas and shape objects fire Loaded events and
  mouse events (e.g., MouseLeftButtonDown)
• StoryBoard objects fire Completed events
• Other objects fire other events
• Use EventName"javascriptMethodName" attributes
  in XAML to register event handlers
• Handlers receive sender and args parameters

39
Handling Events
ltRectangle Canvas.Left"50" Canvas.Top"50"
Width"300" Height"200" Stroke"Black"
StrokeThicknes"10" Fill"Yellow"
MouseLeftButtonDown"javascriptonClick" /gt
function onClick(sender, args) sender.Fill
"Red" // Change fill color
window.alert(args.X) // X coordinate relative to
root canvas window.alert(args.Y) // Y
coordinate relative to root canvas
40
Mouse Events

• Fired by Canvases, Rectangles, Ellipses, and
  other UI elements

Event
Description
MouseLeftButtonDown
Fires when left mouse button is depressed
MouseLeftButtonUp
Fires when left mouse button is released
MouseEnter
Fires when mouse enters a UI element
MouseLeave
Fires when mouse leaves a UI element
MouseMove
Fires when mouse moves
41
Mouse Handling

• UIElement.Cursor property controls cursor
• Arrow, Hand, IBeam, Wait, None, Default
• CaptureMouse and ReleaseMouseCapture methods
  enable mouse capturing
• Useful during drag operations

42
Keyboard Events

• Fired by root Canvas

Event
Description
KeyDown
Fires when key is depressed
KeyUp
Fires when key is released
GotFocus
Fires when Canvas receives the input focus
LostFocus
Fires when Canvas loses the input focus
43
(No Transcript)
44
Microsoft Expression Studio

• Tools for building rich content
• Web CSS, XHTML, ASP.NET
• Blend Video, vector graphics, animation, etc.
• Design Graphic design
• Media Digital media

http//www.microsoft.com/ products/expression/en/
default.mspx
45
(No Transcript)