Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect

Satisfy Your Technical Curiosity

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

Jeff ProsiseJeff ProsiseCofounder, WintellectCofounder, Wintellectwww.wintellect.comwww.wintellect.com


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 APIhttp://msdn2.microsoft.com/en-us/asp.net/bb187358.aspx


Platforms (Feb. 2007 CTP)

BrowsersInternet Explorer 6 and 7 (Windows)Firefox 1.5.0.8, 2.0+ (Windows and Mac)Safari 2.0.4+ (Mac)

Operating systemsWindows XP SP2, VistaMac OS X (10.4.8+)

Opera support coming soon (probably)


WPF/E Architecture

Browser Plug-InBrowser Plug-In

Presentation RuntimePresentation Runtime

Presentation Core

Media Support (Audio/Video)

XAML

Native DOM API JavaScript DOM API

Operating System (Windows, Mac)Operating System (Windows, Mac)

WPF/E


Components of a WPF/E Page

WPF/E Plug-inActiveX control for Internet ExplorerTraditional plug-in for other browsers

agHost.jsHost-independent wrapper for WPF/E plug-in

HTML and JavaScriptImport agHost.js and instantiate plug-in

XAML


Page Structure<script type="text/javascript" src="aghost.js"></script>

<div id="WpfeDiv"></div>

<script type="text/javascript"> 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 );</script>


Hello.xaml<Canvas Width="300" Height="300" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <TextBlock FontSize="24pt">Hello, WPF/E!</TextBlock></Canvas>


Inline XAML<script type="text/javascript"> new agHost( "WpfeDiv", // DIV ID "wpfeControl", // Control ID "100%", // Width "100%", // Height "white", // Background color "xamlstuff" // XAML source element );</script>

<script type="text/xaml" id="xamlstuff"> <Canvas Width="300" Height="300" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <TextBlock FontSize="24pt">Hello, WPF/E!</TextBlock> </Canvas></script>



Layout

Layout is driven by Canvas objectsEvery page has a root Canvas objectPage can contain additional Canvases

Canvas is a container for other UI elementsObject position is relative to Canvas positionObject position in Canvas controlled by attached properties Canvas.Left and Canvas.Top

All units measured in points


Positioning

<Canvas Width="300" Height="560" xmlns="... xmlns:x="..."> <Canvas Canvas.Left="40" Canvas.Top="40" Width="220" Height="220"> <Ellipse Canvas.Left="40" Canvas.Top="40" Height="140" Width="140" /> </Canvas>

<Canvas Canvas.Left="40" Canvas.Top="300" Width="220" Height="220"> <Ellipse Canvas.Left="40" Canvas.Top="40" Height="140" Width="140" /> </Canvas></Canvas>

(40,40)(40,40)

(0,0)(0,0)

(40,300)(40,300)

(80,80)(80,80)

(80,340)(80,340)


Drawing Primitives

ShapesEllipse, Line, Rectangle, Path, Polygon, Polyline

BrushesSolidColorBrush, LinearGradientBrush, RadialGradientBrush, ImageBrush

TextTextBlock, TextElement, Run

Images


Rectangles<Rectangle Canvas.Left="50" Canvas.Top="50" Height="200" Width="300" StrokeThickness="10" Stroke="Black" Fill="Yellow" />

StrokeStrokeFillFill


Ellipses and Paths<Ellipse Canvas.Left="20" Canvas.Top="20" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="Yellow" /><Ellipse Canvas.Left="80" Canvas.Top="80" Height="35" Width="25" Stroke="Black" Fill="Black" /><Ellipse Canvas.Left="140" Canvas.Top="80" Height="35" Width="25" Stroke="Black" Fill="Black" /><Path Data="M 70, 150 A 60, 60 0 0 0 170, 150" Stroke="Black" StrokeThickness="15" StrokeStartLineCap="Round" StrokeEndLineCap="Round" />


Property Element Syntax<Rectangle Canvas.Left="50" Canvas.Top="50" Height="200" Width="300" StrokeThickness="10"> <Rectangle.Stroke> <SolidColorBrush Color="Black" /> </Rectangle.Stroke> <Rectangle.Fill> <SolidColorBrush Color="Yellow" /> </Rectangle.Fill></Rectangle>


LinearGradientBrush<Rectangle Canvas.Left="50" Canvas.Top="50" Stroke="Black" Height="200" Width="300" StrokeThickness="10"> <Rectangle.Fill> <LinearGradientBrush> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </LinearGradientBrush> </Rectangle.Fill></Rectangle>


RadialGradientBrush<Rectangle Canvas.Left="50" Canvas.Top="50" Stroke="Black" Height="200" Width="300" StrokeThickness="10"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5"> <GradientStop Color="Yellow" Offset="0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1" /> </RadialGradientBrush> </Rectangle.Fill></Rectangle>


Text<TextBlock Canvas.Top="20" Canvas.Left="20" FontSize="120pt" FontFamily="Georgia" FontStyle="Italic" FontWeight="Bold"> WPF/E <TextBlock.Foreground> <LinearGradientBrush> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </LinearGradientBrush> </TextBlock.Foreground></TextBlock>



Images<Image Source="Corsair.jpg" Stretch="None|Fill|Uniform|UniformToFill" />

NoneNone FillFill

UniformUniform UniformToFillUniformToFillAs

pect

ratio

pre

serv

edAs

pect

ratio

pre

serv

ed

Aspe

ct ra

tio n

ot p

rese

rved

Aspe

ct ra

tio n

ot p

rese

rved


Audio and Video

MediaElement does audio/video playbackPlay, Pause, and Stop methods and Position property provide control over playbackIsMuted, Volume, and Balance properties provide control over volumeSource property identifies media (e.g., WMV); can be local file or URL

<MediaElement Source="Corsair.wmv" Width="100" Height="100" />



Transforms

Operations that "transform" UI elements by:TranslatingRotatingScalingSkewing

Use RenderTransform property to applyUse TransformGroup to group transformsUse MatrixTransform for custom transforms


Transform Types

TranslateTransformTranslateTransform RotateTransformRotateTransform

SkewTransformSkewTransform ScaleTransformScaleTransform


Using Transforms<Canvas> <Canvas.RenderTransform> <TransformGroup> <RotateTransform Angle="135" CenterX="120" CenterY="120" /> <ScaleTransform ScaleX="1.5" ScaleY="1.2" /> </TransformGroup> </Canvas.RenderTransform> ...</Canvas>


Clipping

<Ellipse Canvas.Left="20" Canvas.Top="20" Fill="SlateBlue" Height="200" Width="200" Stroke="Black" StrokeThickness="10"> <Ellipse.Clip> <RectangleGeometry Rect="0, 0, 100, 100" /> </Ellipse.Clip></Ellipse>

UIElement.Clip property controls clippingGeometry objects define clipping regions


Opacity

UIElement.Opacity property controls opacityWPF/E also supports ARGB color values

<Ellipse Canvas.Left="50" Canvas.Top="50" Stroke="Black" Height="200" Width="300" StrokeThickness="10" Fill="Red" Opacity="0.5" /><Ellipse Canvas.Left="200" Canvas.Top="50" Stroke="Black" Height="200" Width="300" StrokeThickness="10" Fill="#80FFFF00" />


OpacityMask

UIElement.OpacityMask masks opacityUse gradient brushes for gradient masks

<Rectangle Canvas.Left="50" Canvas.Top="50" Stroke="Black" Height="50" Width="500" StrokeThickness="10" Fill="Yellow"> <Rectangle.OpacityMask> <LinearGradientBrush StartPoint="0,0" EndPoint="1,0"> <GradientStop Offset="0" Color="Black" /> <GradientStop Offset="0.8" Color="Transparent" /> </LinearGradientBrush> </Rectangle.OpacityMask></Rectangle>



Animation

Animations are created by varying properties of UI elements over time

From/To animations vary properties linearlyKey-frame animations use discrete steps

Animation objects define animationsDoubleAnimation[UsingKeyFrames]ColorAnimation[UsingKeyFrames]PointAnimation[UsingKeyFrames]

StoryBoard objects hold animation objects


Animating Motion<Rectangle x:Name="Rect" Width="200" Height="100" Fill="Red" Stroke="Blue" StrokeThickness="10"> <Rectangle.Triggers> <EventTrigger RoutedEvent="Rectangle.Loaded"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="Rect" Storyboard.TargetProperty="(Canvas.Left)" From="0" To="200" Duration="0:0:2" /> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Rectangle.Triggers></Rectangle>


Animation Properties

StoryBoard and Animation properties control animation parameters

Property Description

BeginTime Time at which animation should begin (e.g, "0:0:10")

Duration Duration of animation (e.g., "0:0:5")

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")



Object Hierarchy<html> <body> ... <div id="WpfeDiv">

</div> ... </body></html>

Canvas

Canvas TextBlock

Other Objects

Web pageWeb page

WPF/E plug-inWPF/E plug-in

WPF/E contentWPF/E content


Navigating the Hierarchy

UIElement.children -> Child nodesUse children.getItem to retrieve specified nodeUse children.add to add nodes on the fly

UIElement.getParent -> Parent nodeUIElement.getHost -> WPF/E controlfindName -> Any node in the hierarchy

Call it on UI element or WPF/E controlSearches entire object hierarchyUse x:Name attribute to name nodes


createFromXaml

createFromXaml method creates objects from XAML strings

Create objects programmaticallyAdd objects to tree with object.children.add

Implemented by WPF/E controlUse document.getElementById to acquire control reference at run-timeOr, in an event handler, use sender.getHost to acquire control reference



Events

WPF/E objects fire eventsCanvas and shape objects fire Loaded events and mouse events (e.g., MouseLeftButtonDown)StoryBoard objects fire Completed eventsOther objects fire other events

Use EventName="javascript:MethodName" attributes in XAML to register event handlers

Handlers receive sender and args parameters


Handling Events<Rectangle Canvas.Left="50" Canvas.Top="50" Width="300" Height="200" Stroke="Black" StrokeThicknes="10" Fill="Yellow" MouseLeftButtonDown="javascript:onClick" />

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}


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


Mouse Handling

UIElement.Cursor property controls cursorArrow, Hand, IBeam, Wait, None, Default

CaptureMouse and ReleaseMouseCapture methods enable mouse capturing

Useful during drag operations


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



Microsoft Expression Studio

Tools for building rich contentWeb: CSS, XHTML, ASP.NETBlend: Video, vector graphics, animation, etc.Design: Graphic designMedia: Digital media

http://www.microsoft.com/http://www.microsoft.com/products/expression/en/products/expression/en/default.mspxdefault.mspx


Documents

Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect