Satisfy Your Technical Curiosity 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 APIus/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 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 ); 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