WPF/E CTP Quick Start - 第一部分：创建一个WPF/E项目（翻译） - hfyb

WPF/E CTP Quick Start - 第一部分：创建一个WPF/E项目（翻译）

引自http://www.cnblogs.com/JeffreyZhao/archive/2006/12/07/WPFE_CTP_Quick_Start_Part_1.html

您该如何在您的页面中添加WPF/E呢？一个典型的WPF/E项目有4个文件：一个用于存放和显示内容的HTML文件，一个aghost.js文件，一个XAML文件和一个JavaScript文件。这篇文当描述了创建一个WPF/E工程，以及向HTML添加WPF/E内容的三个步骤。这份指导包括了一下部分：

在您开始之前……

　　在您创建WPF/E的内容之前，您必须具有以下条件：

安装了WPF/E插件：如果您还没有安装，请点击此处为您的浏览器安装WPF/E插件。
一个HTML文件：您需要一个用于显示WPF/E内容的HTML文件。您可以自己创建，也可以复制这个文件。
一个文本编辑器：您需要一个文本编辑器（例如记事本）来编辑您的HTML文件。需要更多关于使用Visual Studio编辑WPF/E工程的内容，请查看“创建一个Visual Studio WPF/E工程”

第一步：建立一个aghost.js文件

　　aghost.js文件是一个JavaScript辅助文件，用来使您的WPF/E内容生效，使之能在多哥平台下查看。

将aghost.js文件复制到您的HTML文件所在的目录下：右键点击aghost.js文件的超级链接并选择“目标另存为...”，将aghost.js文件存放在与您的HTML文件相同的目录下。
打开您的HTML文件，将下面的代码添加到页面的部分。如果您没有可以使用的HTML文件，请右键点击SampleHTMLPage.html文件的超级链接并选择“目标另存为...”，将SampleHTMLPage.html复制到与ashost.js文件相同的目录下。
```
<script type="text/javascript" src="aghost.js"></script>
```

　　现在您的HTML页面应该已经保存了如下这些基本元素：

<!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>

第二步：在您的HTML文件中创建一个ActiveX控件

　　为了显示WPF/E的内容，您需要在HTML文件内创建一个ActiveX控件。

在您的HTML文件的<body>标签之间添加如下三行代码，以创建一个用于放置WPF/E内容的元素。
```

    <div id="agControl1Host">
    </div>
```
您能够改变<div>标签的ID，不过您也必须在下一步中修改创建一个agHost时所用的第一个参数。

在上一步之后，添加如下的HTML和脚本代码以创建一个ActiveX控件。

<script language="javascript">
    // 创建一个WPF/E的ActiveX控件，这里的
    // 方法使您的WPF/E的内容在这个ActiveX控件
    // 被点击之前就创建完毕。
    new agHost(
    // 用于插入WPF/E ActiveX控件的元素，一般会使用
    // DIV元素，如果您在上一步改变了HTML元素的ID，
    // 您在这里也必须相应的改变。
    "agControl1Host",
    // WPF/E ActiveX控件的ID
    "agControl1",
    // 控件宽度
    "300px",
    // 控件高度
    "300px",
    // 控件的背景色
    "#D6D6D6",
    // 源元素（存放XAML内容的Script标签）
    null,
    // 存放WPF/E内容的XAML文件的URI
    "myxaml.xaml",
    // 是否是无窗的
    "false",
    // 最大帧率（Frame Rate）
    "30",
    // 处理错误的Handler，
    // 您能够将其设为一个方法的引用。
    null
    );
    // 创建一个全局的WPF/E ActiveX控件的引用，
    // 您能够使用它来接受已经命名的XAML元素。
    var agControl = document.getElementById("agControl1");
    </script>

上面的脚本包含了几个您可以自定义的参数，例如ActiveX控件的高度和宽度（您可以使用百分比作为参数），包含WPF/E内容的XAML文件的文件名，和一个表示控件是否无窗的参数。

第三步：创建一个表示WPF/E内容的文件

　　现在您的HTML文件已经配置完毕了，是时候该创建内容了。

在您HTML文件所在目录里创建一个空文件，命名为“myxaml.xaml”。如果您改变了上一步所使用的文件名参数，那么在这里也需要相应地进行改变。
（可选）如果您的WPF/E工程需要包含脚本，创建一个包含脚本的JavaScript文件，并将下面一行代码添加到您的HTML文件中，添加您在第一步创建的<script></script>标签之后。
```
<script type="text/javascript" src="my-script.js"></script>
```

添加额外的WPF/E内容

　　如果您需要在页面上创建其它的WPF/E ActiveX控件，请重复第二步和第三步，并保证每一个ActiveX控件都有唯一的名字。

一个示例工程

　　如果您遇到了困难，或者仅仅是想知道一个简单的WPF/E工程是怎么样的，请将以下这些文件复制到您的机器中，并且打开SampleProject.html文件。

看了这片文章后很有收获：
要想实现WPF/E，至少需要四个文件：
1.name.html
2.name.xaml
3.name.js
4.aghost.js

posted on 2007-01-27 04:37 hfyb 阅读(602) 评论(0) 编辑收藏举报

刷新页面返回顶部

hfyb

WPF/E CTP Quick Start - 第一部分：创建一个WPF/E项目（翻译）

导航

公告