![Page 1: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/1.jpg)
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
![Page 2: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/2.jpg)
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
![Page 3: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/3.jpg)
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)
![Page 4: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/4.jpg)
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
![Page 5: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/5.jpg)
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
![Page 6: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/6.jpg)
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>
![Page 7: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/7.jpg)
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>
![Page 8: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/8.jpg)
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>
![Page 9: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/9.jpg)
Satisfy Your Technical Curiosity
![Page 10: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/10.jpg)
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
![Page 11: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/11.jpg)
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)
![Page 12: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/12.jpg)
Satisfy Your Technical Curiosity
Drawing Primitives
ShapesEllipse, Line, Rectangle, Path, Polygon, Polyline
BrushesSolidColorBrush, LinearGradientBrush, RadialGradientBrush, ImageBrush
TextTextBlock, TextElement, Run
Images
![Page 13: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/13.jpg)
Satisfy Your Technical Curiosity
Rectangles<Rectangle Canvas.Left="50" Canvas.Top="50" Height="200" Width="300" StrokeThickness="10" Stroke="Black" Fill="Yellow" />
StrokeStrokeFillFill
![Page 14: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/14.jpg)
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" />
![Page 15: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/15.jpg)
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>
![Page 16: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/16.jpg)
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>
![Page 17: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/17.jpg)
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>
![Page 18: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/18.jpg)
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>
![Page 19: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/19.jpg)
Satisfy Your Technical Curiosity
![Page 20: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/20.jpg)
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
![Page 21: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/21.jpg)
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" />
![Page 22: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/22.jpg)
Satisfy Your Technical Curiosity
![Page 23: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/23.jpg)
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
![Page 24: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/24.jpg)
Satisfy Your Technical Curiosity
Transform Types
TranslateTransformTranslateTransform RotateTransformRotateTransform
SkewTransformSkewTransform ScaleTransformScaleTransform
![Page 25: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/25.jpg)
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>
![Page 26: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/26.jpg)
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
![Page 27: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/27.jpg)
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" />
![Page 28: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/28.jpg)
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>
![Page 29: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/29.jpg)
Satisfy Your Technical Curiosity
![Page 30: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/30.jpg)
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
![Page 31: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/31.jpg)
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>
![Page 32: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/32.jpg)
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")
![Page 33: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/33.jpg)
Satisfy Your Technical Curiosity
![Page 34: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/34.jpg)
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
![Page 35: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/35.jpg)
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
![Page 36: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/36.jpg)
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
![Page 37: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/37.jpg)
Satisfy Your Technical Curiosity
![Page 38: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/38.jpg)
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
![Page 39: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/39.jpg)
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}
![Page 40: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/40.jpg)
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
![Page 41: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/41.jpg)
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
![Page 42: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/42.jpg)
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
![Page 43: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/43.jpg)
Satisfy Your Technical Curiosity
![Page 44: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/44.jpg)
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
![Page 45: Satisfy Your Technical Curiosity Building Rich, Highly Interactive Web Apps with WPF/E Jeff Prosise Cofounder, Wintellect](https://reader038.vdocument.in/reader038/viewer/2022103006/56649f2c5503460f94c476fc/html5/thumbnails/45.jpg)
Satisfy Your Technical Curiosity