使用 DeepZoom 入门 Silverlight 2

引言

知道如何在应用程序中修饰和放置图像并不能使一个人成为一名优秀的程序员。至少，这是我保护自己免受那些懂得如何将照片放在正确位置的人的批评的唯一方法。在我早期使用 Linux 环境下的 C++ 编程，以及 JDK 1.2 的 Java 时代，我们从未经历过当今程序员所经历的。Java GUI 不好看，VB6 程序员需要更多的美化工具才能让他们的应用程序更加精致，而且直到今天，我从未见过一个用早期 C++ 创建的应用程序拥有好看的 GUI。最后，这让我无法在“修饰”方面做得很好。

背景

2008 年，我（茨瓦内市）以前的公司雇主带我去了南非（德班）的 Tech-ed 2008 大会。对我来说，这就像一次假期，因为我当时已经知道要介绍什么内容了。会议的最后一天，有一些与微软无关的最后演示，其中一位演讲者谈论了维珍公司提供的太空产品。他没有使用 PowerPoint，而是不断地放大一个图像，然后放大另一个图像，再放大又一个图像。演讲结束时，他夸耀地说：“女士们，先生们，我希望你们看到我没有使用 PowerPoint，我向你们介绍‘DeepZoom’，它可以与 Silverlight 2 一起使用。”这太神奇了，它给了像我这样不擅长修饰的开发者一个机会，让他们一劳永逸地美化自己的网站。

Using the Code

要遵循我在这篇文章中的步骤，您需要一些 Visual Studio 没有提供的东西。好处是，您可以免费下载这些工具。我们首先需要的是“DeepZoom Composer”，可以从这里下载。您还需要 Visual Studio 2008，或者可以从这里下载 Express 版本。最后是 SilverlightTools，可以从这里下载。

Start

现在，我们将创建一个小型项目来演示 DeepZoom 的功能以及如何在您的网站中使用它们。我用来托管网站的 Web 主机不属于我，所以我不能在那里使用 Silverlight，但是您可以在这里找到一个功能齐全的网站，演示 DeepZoom 的功能。

DeepZoom Composer

安装 DeepZoom Composer 后，打开它，将会显示以下对话框。

作为第一次使用的用户，您将看不到任何项目，但正如您所见，我已经创建了一些项目。接下来是单击**新建项目**，您将看到以下内容。

给它一个有意义的名称，并将其放在自己的目录中，因为 Silverlight 文件有点复杂，稍后您将看到它们在我们的项目中哪些是重要的。完成后，单击“确定”。

现在您看到的是我们的工作区，但首先我们必须导入图像，正如上面所见。我们有 3 个步骤：

步骤 1：导入图像

步骤 2：将图像放置在画布上，将图像隐藏在其他图像后面或置于其他图像之上。

步骤 3：导出 DeepZoom 项目并将其转换为可以在 Visual Studio 2008 中打开的 Silverlight 2 项目。

让我们导入四张图片，添加图片后，看起来会是这样。

现在让我们进入第 2 步，在上面的菜单中单击**合成**，屏幕将看起来像这样。

现在您需要做的是将图像拖到宽阔的空白区域，并按照您想要的方式开始排列它们。现在，在下一步中，我需要您仔细观察。我将放置第一张图片，它将填满画布，就像这样。

现在请记住，如果您放置了一张照片，除非您复制它并给它一个新的名称，否则您不能再次放置它。所以，在您将它拖到画布上之后，它将被禁用，意味着您不能再次放置它。现在，正如您所见，我有一个漂亮的空海滩，在海滩上我想放置我的另一张图片。现在，让我们再放置一张图片。

正如您所见，我已经将我的图片放置在了海滩图片的上方，但为了演示 DeepZoom 的功能，我们必须隐藏这张图片。要隐藏这张图片，请按住图像的一个手柄并将其拖到自身上。

图片正在缩小，一直缩小直到您看到类似这样的内容。

现在让我们把它拖动，让它看起来像一个小点。现在我们的 Composer 将看起来像这样。

那个黄色图钉就是我们的图片，但是当我们测试项目时，我们不会看到一个黄色图钉，但是如果我们点击该区域，我们会看到一个小点，如果我们继续跟着这个点，它就会是我们的图片，并且它会超越容器图片。现在，让我们再次添加一张图片，像处理上一张图片一样缩小它。

完成后，我的 Composer 将看起来像这样。现在，除了最后一步，所有步骤都已完成。在上面的菜单中，移动到**导出**。

移动到导出，有一些设置需要选择。让我们详细看看设置对话框。

在此步骤中，DeepZoom 将创建一个 Silverlight 项目，正如您所见，您可以更改图像的格式，但现在，让我们将其保留为默认的 PNG，而在输出类型中，您可以在这里告诉 DeepZoom 创建一个 Silverlight 项目，或者您只需要图像。默认情况下，它将选择“导出图像和 Silverlight 项目”，请勿更改，保持原样。完成所有操作后，单击“导出”按钮并等待其完成。

完成后，您可以通过单击下面选项中的 Internet 图标（第一个）来查看您的项目外观。

让我们看看它看起来如何。

输出

我的网页看起来会是这样。

现在请记住，我们隐藏了图片，而我们看到的是我们漂亮、简单、干净的海滩，如果我想告诉您关于南非德班的故事，我只需单击并缩放到隐藏的图片，让我们转到图片 1，单击热点，直到您看到类似这样的内容。

移动到我们的图片。

正如您所见，主图片正在淡出，目标图片正在接管页面，就像这样。

使用 DeepZoom，您可以做很多事情，您可以从一张照片内部缩放到另一张照片内部，就像容器到容器一样。我想我说得够多了。最后，DeepZoom 创建一个可以在 Visual Studio 中打开的项目。如果您没有安装 Silverlight 工具，您的解决方案资源管理器将看起来像这样。

要解决此问题，请安装 Silverlight 工具，右键单击损坏的项目并打开它，查找项目文件中的这一行。

<Import Project="$(MSBuildExtensionsPath)\Microsoft\Silverlight\
	v2.0\Microsoft.Silverlight.CSharp.targets" /> 

完成后，就这样保留它，然后转到您的

C:\Program Files\MSBuild\Microsoft\VisualStudio\v9.0\Silverlight\ 

检查是否有一个 Silverlight 文件夹，并检查文件 Microsoft.Silverlight.CSharp.targets 是否可用，如果它在那里，请将项目文件中的上述行更改为。

<Import Project="$(MSBuildExtensionsPath)\Microsoft\
	VisualStudio\v9.0\Silverlight\Microsoft.Silverlight.CSharp.targets" /> 

再次右键单击解决方案资源管理器中的损坏项目，然后选择“重新加载项目”，损坏的项目将被恢复。解释 Silverlight 生成项目的文件结构将是未来的任务。

哇，这是我写的第一篇不用写一行代码的文章。如您所见，项目中有一个 HTML 文件，但如果要将功能移动到 aspx 页面，则需要编写代码。:)

结论

我也在学习 Silverlight 这个主题，我承诺在我力所能及的时候分享关于这个主题的其他资源。因为这是我们美化网站并仅用一次点击在一个网页上讲述我们过去的故事的机会。

谢谢！

历史

• 2009 年 2 月 3 日：初始帖子