satisfy your technical curiosity building rich, highly interactive web apps with wpf/e jeff prosise...
TRANSCRIPT
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
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: Q2 2007
Browser plug-in with JavaScript APIhttp://msdn2.microsoft.com/en-us/asp.net/bb187358.aspx
Satisfy Your Technical Curiosity
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)
Satisfy Your Technical Curiosity
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
Satisfy Your Technical Curiosity
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
Satisfy Your Technical Curiosity
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>
Satisfy Your Technical Curiosity
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>
Satisfy Your Technical Curiosity
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>
Satisfy Your Technical Curiosity
Satisfy Your Technical Curiosity
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
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 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)
Satisfy Your Technical Curiosity
Drawing Primitives
ShapesEllipse, Line, Rectangle, Path, Polygon, Polyline
BrushesSolidColorBrush, LinearGradientBrush, RadialGradientBrush, ImageBrush
TextTextBlock, 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" />
StrokeStrokeFillFill
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, 60 0 0 0 170, 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"> <Rectangle.Stroke> <SolidColorBrush Color="Black" /> </Rectangle.Stroke> <Rectangle.Fill> <SolidColorBrush Color="Yellow" /> </Rectangle.Fill></Rectangle>
Satisfy Your Technical Curiosity
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>
Satisfy Your Technical Curiosity
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>
Satisfy Your Technical Curiosity
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>
Satisfy Your Technical Curiosity
Satisfy Your Technical Curiosity
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
Satisfy Your Technical Curiosity
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" />
Satisfy Your Technical Curiosity
Satisfy Your Technical Curiosity
Transforms
Operations that "transform" UI elements by:TranslatingRotatingScalingSkewing
Use RenderTransform property to applyUse TransformGroup to group transformsUse MatrixTransform for custom transforms
Satisfy Your Technical Curiosity
Transform Types
TranslateTransformTranslateTransform RotateTransformRotateTransform
SkewTransformSkewTransform ScaleTransformScaleTransform
Satisfy Your Technical Curiosity
Using Transforms<Canvas> <Canvas.RenderTransform> <TransformGroup> <RotateTransform Angle="135" CenterX="120" CenterY="120" /> <ScaleTransform ScaleX="1.5" ScaleY="1.2" /> </TransformGroup> </Canvas.RenderTransform> ...</Canvas>
Satisfy Your Technical Curiosity
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
Satisfy Your Technical Curiosity
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" />
Satisfy Your Technical Curiosity
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>
Satisfy Your Technical Curiosity
Satisfy Your Technical Curiosity
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
Satisfy Your Technical Curiosity
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>
Satisfy Your Technical Curiosity
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")
Satisfy Your Technical Curiosity
Satisfy Your Technical Curiosity
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
Satisfy Your Technical Curiosity
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
Satisfy Your Technical Curiosity
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
Satisfy Your Technical Curiosity
Satisfy Your Technical Curiosity
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
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
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
Satisfy Your Technical Curiosity
Mouse Handling
UIElement.Cursor property controls cursorArrow, 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
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
Satisfy Your Technical Curiosity
Satisfy Your Technical Curiosity
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
Satisfy Your Technical Curiosity