part 1: create a WPF/E project

show toc

How do you add WPF/E to your web page? A typical WPF/E project has four files: an HTML file that hosts or displays content, an aghost.js file, a XAML file, and a JavaScript file. This document describes how to create a WPF/E project and add WPF/E content to an HTML file in three steps.  This guide contains the following sections.

before you get started...

Before you can create WPF/E content, you'll need the following items.

step 1: setup an aghost.js file

The aghost.js file is a JavaScript helper file that enables your WPF/E content to be viewed on multiple platforms.

  1. Copy this aghost.js file to the same directory as your HTML page:  right-click the  aghost.js hyperlink and then select "Save As..." to store the aghost.js file in the same directory as your HTML page.

  2. Open your HTML page and add following markup inside the <head> section. If you don't already have an HTML file you'd like to use, right click this SampleHTMLPage.html link and then select "Save Target As..." to save SampleHTMLPage.html in the same folder as the aghost.js file.

    <script type="text/javascript" src="aghost.js"></script>

Your HTML page should now contain the following basic elements:

<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>A Sample HTML page</title>
    <script type="text/javascript" src="aghost.js"></script>
  </head>
  <body>
  </body>
</html>

step 2: create an WPF/E ActiveX control in your HTML file

To display WPF/E content, you create an ActiveX control inside your HTML file.  

  1. Create the host HTML element by adding the following three lines to your HTML file, between the <body> tags, where you want your WPF/E content to appear.

    <!-- Where the WPF/E ActiveX control will go-->
    <div id="agControl1Host">
    </div>

    You can change the ID of the <div> tag, but if you do you will also need to change the first parameter for agHost in the next step to match.

  2. After the HTML you added in the previous step, add the following HTML + script to create the WPF/E ActiveX control.

    <script type="text/javascript">
    	// Create the WPF/E ActiveX control.
            // The technique here enables your WPF/E content to receive
            // input before its ActiveX control is clicked.
    	new agHost(
    		"agControl1Host", // hostElementID (The HTML element inside of which
    		// the WPF/E ActiveX control is inserted.
                      // This element is usually a <div>)
                      // If you change the name of the host HTML element,
                      //change it here too.
    		"agControl1", // The ID of the WPF/E ActiveX control to create.
    		"300px", // The width of the control.
    		"300px", // The height of the control.
    		"#D6D6D6", // The background color of the control.
    		null, // SourceElement (name of script tag containing XAML)
    		"myxaml.xaml", // The uri of the source file that
                                     // contains the WPF/E content.
    		"false", // IsWindowless
    		"30", // MaxFrameRate
    		null // OnError handler.
                           // You can set this to a method name (no quotes).
    	);
    
    	// Create a global variable for the WPF/E ActiveX control,
             // to use when you want to retrieve named XAML elements. 
    	var agControl = document.getElementById("agControl1");
    
    </script>
    

This script contains several parameters you might want to customize, such as the height and width of the ActiveX control (percentage sizes are allowed), the name of the XAML file that contains your WPF/E content, and a value that specifies whether the control is windowless.

step 3: create your WPF/E content files

Now that your HTML file is configured, it's time to create your content.

  1. Create a blank file called "myxaml.xaml" in the same directory as your HTML file. If you changed the source file parameter in the previous step, change this file name to match.

  2. (optional) If your WPF/E project will contain script, create a JavaScript file to contain the script and then add the following line to your HTML file, after the <script></script> tag you you added in step 1.

    <script type="text/javascript" src="my-script.js"></script>

adding additional WPF/E content

If you want to create more than one WPF/E ActiveX control on your page, repeat steps 2 and 3 for each control, and be sure to give each ActiveX control a unique name.

a sample project

If you've gotten stuck or would just like to see what a simple WPF/E project looks like, copy the following files to your machine and navigate to the SampleProject.html file.

what's next?

In the next part, create a XAML file, you'll learn how to add content to your XAML file.