Microsoft has just released the first pre-release version of WPF/E, which is a Web technology that uses a subset of WPF XAML (eXtensible Application Markup Language). For more information on WPF/E, see MSDN WPF/E Dev Center.
The MSDN Library provides the WPF/E SDK overviews and reference content for the exposed API set and XAML. The WPF/E SDK can also be downloaded from the MSDN WPF/E Dev Center, and includes a WPF/E QuickStart Tutorial that guides you through key features and concepts in building WPF/E applications.
When you install the WPF/E runtime components, you install a browser plug-in that exposes a WPF/E control. WPF/E content is displayed by using one or more WPF/E controls that are defined on an HTML page. The OBJECT and EMBED tags are the HTML tags that allow you to reference the WPF/E control. The OBJECT and EMBED tags direct the browser to load the WPF/E control, using the set of supplied parameter values. These tags also allow you to define an identifier which can be used to access the control at runtime.
The WPF/E control is packaged differently on the supported platforms. Internet Explorer on Windows uses an ActiveX model to host WPF/E controls, while all other browser and platform combinations use the Netscape plug-in technology to host WPF/E controls.
The following diagram shows the relationship of the Web page, the host WPF/E control, and its WPF/E content:
Relationship of Web page to WPF/E content
var wpfeControl = document.getElementById(“WpfeControl1”);
WPF/E Object Hierarchy
When you add XAML objects to the WPF/E control, you are defining a hierarchical tree structure with a root object. For example, the following XAML example creates a object hierarchy containing a parent Canvas object and a child TextBlock and Canvas object. In this case, the first Canvas object defined is the root object for the tree structure.
<Canvas xmlns=“http://schemas.microsoft.com/client/2007“ >
<!– Canvas objects can be a child of a Canvas object. –>
<Canvas Canvas.Left=“20“ Canvas.Top=“20“>
<Rectangle Width=“200“ Height=“35“ Fill=“PowderBlue“ />
<TextBlock Canvas.Left=“25“ Canvas.Top=“5“
<TextBlock Canvas.Left=“36“ Canvas.Top=“80“
XAML content is converted into a a hierarchical tree structure with a root object. For example, the content in the previous XAML example is converted into the following tree structure:
XAML content as a tree structure
The tree structure determines the rendering ordering of WPF/E objects. The order of traversal starts with the root object, which is the top-most node in the tree structure. The root object’s children are then traversed, left to right. If an object has children, its children are traversed before the object’s siblings. This means the content of a child object is rendered in front of the object’s own content. Here is the rendered output from the previous XAML example, showing the rendering order sequence:
Rendering order of XAML content
For those of you who are familiar with WPF, the pre-release version of WPF/E will look familiar as far as XAML is concerned, even though it is a reduced subset. Try it out and see what you think!
WPF/E Developer Content Team