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

Satisfy Your Technical Curiosity 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: Q Browser plug-in with JavaScript API us/asp.net/bb aspx

Satisfy Your Technical Curiosity Platforms (Feb CTP) Browsers Internet Explorer 6 and 7 (Windows) Firefox , 2.0+ (Windows and Mac) Safari (Mac) Operating systems Windows XP SP2, Vista Mac OS X ( ) Opera support coming soon (probably)

Satisfy Your Technical Curiosity WPF/E Architecture Browser Plug-In Presentation Runtime Presentation Core Media Support (Audio/Video) XAML Native DOM APIJavaScript DOM API Operating System (Windows, Mac) WPF/E

Satisfy Your Technical Curiosity 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

Satisfy Your Technical Curiosity Page Structure 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 );

Satisfy Your Technical Curiosity Hello.xaml <Canvas Width="300" Height="300" xmlns=" xmlns:x=" Hello, WPF/E!

Satisfy Your Technical Curiosity Inline XAML new agHost( "WpfeDiv", // DIV ID "wpfeControl", // Control ID "100%", // Width "100%", // Height "white", // Background color "xamlstuff" // XAML source element ); <Canvas Width="300" Height="300" xmlns=" xmlns:x=" Hello, WPF/E!

Satisfy Your Technical Curiosity

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

Satisfy Your Technical Curiosity 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.Left="40" Canvas.Top="300" Width="220" Height="220"> <Ellipse Canvas.Left="40" Canvas.Top="40" Height="140" Width="140" /> (40,40)(0,0)(40,300) (80,80) (80,340)

Satisfy Your Technical Curiosity Drawing Primitives Shapes Ellipse, Line, Rectangle, Path, Polygon, Polyline Brushes SolidColorBrush, LinearGradientBrush, RadialGradientBrush, ImageBrush Text TextBlock, TextElement, Run Images

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

Satisfy Your Technical Curiosity 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, , 150" Stroke="Black" StrokeThickness="15" StrokeStartLineCap="Round" StrokeEndLineCap="Round" />

Satisfy Your Technical Curiosity Property Element Syntax <Rectangle Canvas.Left="50" Canvas.Top="50" Height="200" Width="300" StrokeThickness="10">

Satisfy Your Technical Curiosity LinearGradientBrush <Rectangle Canvas.Left="50" Canvas.Top="50" Stroke="Black" Height="200" Width="300" StrokeThickness="10">

Satisfy Your Technical Curiosity RadialGradientBrush <Rectangle Canvas.Left="50" Canvas.Top="50" Stroke="Black" Height="200" Width="300" StrokeThickness="10"> <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">

Satisfy Your Technical Curiosity Text <TextBlock Canvas.Top="20" Canvas.Left="20" FontSize="120pt" FontFamily="Georgia" FontStyle="Italic" FontWeight="Bold"> WPF/E

Satisfy Your Technical Curiosity

Images <Image Source="Corsair.jpg" Stretch="None|Fill|Uniform|UniformToFill" /> NoneFill UniformUniformToFill Aspect ratio preserved Aspect ratio not preserved

Satisfy Your Technical Curiosity 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

Satisfy Your Technical Curiosity

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

Satisfy Your Technical Curiosity Transform Types TranslateTransformRotateTransform SkewTransformScaleTransform

Satisfy Your Technical Curiosity Using Transforms...

Satisfy Your Technical Curiosity Clipping <Ellipse Canvas.Left="20" Canvas.Top="20" Fill="SlateBlue" Height="200" Width="200" Stroke="Black" StrokeThickness="10"> UIElement.Clip property controls clipping Geometry objects define clipping regions

Satisfy Your Technical Curiosity Opacity UIElement.Opacity property controls opacity WPF/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" />

Satisfy Your Technical Curiosity OpacityMask UIElement.OpacityMask masks opacity Use gradient brushes for gradient masks <Rectangle Canvas.Left="50" Canvas.Top="50" Stroke="Black" Height="50" Width="500" StrokeThickness="10" Fill="Yellow">

Satisfy Your Technical Curiosity

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 DoubleAnimation[UsingKeyFrames] ColorAnimation[UsingKeyFrames] PointAnimation[UsingKeyFrames] StoryBoard objects hold animation objects

Satisfy Your Technical Curiosity Animating Motion <Rectangle x:Name="Rect" Width="200" Height="100" Fill="Red" Stroke="Blue" StrokeThickness="10"> <DoubleAnimation Storyboard.TargetName="Rect" Storyboard.TargetProperty="(Canvas.Left)" From="0" To="200" Duration="0:0:2" />

Satisfy Your Technical Curiosity Animation Properties StoryBoard and Animation properties control animation parameters PropertyDescription BeginTimeTime at which animation should begin (e.g, "0:0:10") DurationDuration of animation (e.g., "0:0:5") AutoReverseIf true, plays animation in reverse after completion FillBehavior"Stop"=Reset to begin state, "HoldEnd"=Retain end state RepeatBehaviorSpecifies how many times animation plays (e.g., "Forever")

Satisfy Your Technical Curiosity

Object Hierarchy Canvas TextBlock Other Objects Web page WPF/E plug-in WPF/E content

Satisfy Your Technical Curiosity Navigating the Hierarchy UIElement.children -> Child nodes Use children.getItem to retrieve specified node Use children.add to add nodes on the fly UIElement.getParent -> Parent node UIElement.getHost -> WPF/E control findName -> Any node in the hierarchy Call it on UI element or WPF/E control Searches entire object hierarchy Use x:Name attribute to name nodes

Satisfy Your Technical Curiosity 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

Satisfy Your Technical Curiosity

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="javascript:MethodName" attributes in XAML to register event handlers Handlers receive sender and args parameters

Satisfy Your Technical Curiosity 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 }

Satisfy Your Technical Curiosity Mouse Events Fired by Canvases, Rectangles, Ellipses, and other UI elements EventDescription MouseLeftButtonDownFires when left mouse button is depressed MouseLeftButtonUpFires when left mouse button is released MouseEnterFires when mouse enters a UI element MouseLeaveFires when mouse leaves a UI element MouseMoveFires when mouse moves

Satisfy Your Technical Curiosity Mouse Handling UIElement.Cursor property controls cursor Arrow, Hand, IBeam, Wait, None, Default CaptureMouse and ReleaseMouseCapture methods enable mouse capturing Useful during drag operations

Satisfy Your Technical Curiosity Keyboard Events Fired by root Canvas EventDescription KeyDownFires when key is depressed KeyUpFires when key is released GotFocusFires when Canvas receives the input focus LostFocusFires when Canvas loses the input focus

Satisfy Your Technical Curiosity

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

Satisfy Your Technical Curiosity