为Silverlight创建自定义控件

为Silverlight 2 创建自定义控件

目录

步骤1：创建新的Silverlight 项目 (2)

步骤2：从控件（或ContentControl）派生 (3)

步骤3：创建控件模板 (6)

步骤4：创建默认控件模板 (8)

步骤5：添加模板绑定 (10)

步骤6：使用ContentPresenter 替换TextBlock (13)

步骤7：添加Click 事件 (17)

步骤8：添加可视状态 (19)

本文基于Silverlight 2 的Beta 2 版本。文中的所有信息均有可能发生变更。

Silverlight™ 2 有别于Silverlight 1.0 的众多功能之一是支持控件。Silverlight 2 以丰富且强大可靠的控件模型闻名，该模型是平台中包括的控件和第三方控件包的基础。您也可以使用此控件模型构建自己的控件，但对于不熟悉Windows® Presentation Foundation (WPF) 控件模型的开发人员来讲，第一次构建Silverlight 自定义控件会令人生畏。撰写此专栏时，即在发布Silverlight 2 Beta 2 之前，几乎没有文档可供参考，而在Web 中快速搜索出的少数几篇教程为我指明了方向。虽然我正在讨论此主题，但应该提醒大家的是，我正在使用的Beta 2 在其最终发布之前，可能会做进一步的更改。

在了解如何为新平台编写自定义控件时，我经常先复制一些内置控件：按钮和列表框等等。这些控件可能表面看起来简单，但他们总是揭示了控件模型的关键功能并可以测试人们对这些功能的掌握程度。另外，如果您无法首先创建一个简单的按压按钮，则无法创建super-duper-multicolor-multithreaded-all-in-one-do-it-all 小组件控件。

了解Silverlight 2 自定义控件的最佳方法是一步一步一点一点地创建一个Silverlight 2 自定义控件。这样，您不仅能了解控件的各个组成部分，还能了解它们是如何组合到一起的。以下教程描述了如何构建SimpleButton 控件，该控件复制内置Button 控件的外观和行为的重要方面，并且可以从该控件直接看到控件开发的情况，即Silverlight 样式。

步骤1：创建新的Silverlight 项目

创建自定义控件的第一步是启动Visual Studio® 2008（确保您已为Visual Studio 安装了Silverlight 加载项，这样才可以创建Silverlight 项目）并创建一个项目。通常您需要创建Silverlight 类库项目，这样该控件才可以编译到自己的程序集并作为引用添加到将使用该控件的项目。我将采用一个稍微不同的途径来创建一个Silverlight 应用程序项目，以便在同一项目中构建并使用该控件。所以，我们首先创建一个名为SimpleButtonDemo 的新Silverlight 应用程序项目，如图1所示。当Visual Studio 试图为Silverlight 项目创建随附的Web 项目时，选择“是”。

图 1 创建SimpleButtonDemo 项目（单击图像可查看大图）

步骤2：从控件（或ContentControl）派生

下一步是添加代表此控件的C# 类。至少，为了继承基本的控件功能，该控件类应从Silverlight System.Windows.Controls.Control 类派生。但是，它也可以从ContentControl 和ItemsControl 等Control 派生类派生。许多内置控件可以直接或间接从添加了Content 属性的ContentControl 派生，而该属性允许对控件的内容（如按压按钮表面上的内容）进行自定义。ListBox 控件则从ItemsControl 派生，ItemsControl 可以实现用来向用户提供项目集合的控件的基本行为。因为我们要实现按钮，所以将从ContentControl 派生。

使用Visual Studio 中的“添加新项”命令为SimpleButtonDemo 项目添加新C# 类。将文件命名为SimpleButton.cs。然后打开SimpleButton.cs 并修改SimpleButton 类，这样它就可以从ContentControl 派生：

复制代码

namespace SimpleButtonDemo

{

public class SimpleButton : ContentControl

{

}

}

此时，您已实现了单纯的自定义控件，该控件可在XAML 文档中通过声明进行实例化。为了说明此问题，将下列语句添加到Page.xaml：

复制代码

为了使Silverlight 可以识别此声明，您还需要将以下属性添加到Page.xaml 的根UserControl 元素：

复制代码

xmlns:custom="clr-namespace:SimpleButtonDemo; assembly=SimpleButtonDemo"

您可以看到，clr-namespace 能够识别在其中定义SimpleButton 类的命名空间，而程序集可以识别包含此控件的程序集。在此示例中，控件程序集和应用程序程序集是同一个程序集。如果SimpleButton 在名为MyControls.dll 的单独程序集中实现，您需要将程序集设为与“MyControls”相同。图2中的代码显示了完成上述修改后的Page.xaml 的内容。顺便说一下，您不必将custom 作为自定义控件的前缀；只需直接使用foo 或贵公司的名称作为前缀即可。

图2 Page.xaml

复制代码

xmlns="/client/2007"

xmlns:x="/winfx/2006/xaml"

xmlns:custom="clr-namespace:SimpleButtonDemo;assembly=SimpleButtonDemo"

Width="400" Height="300">

现在，通过启动SimpleButtonDemo_Web 项目（Visual Studio 已将该项目添加到解决方案）中的SimpleButtonDemoTestPage.aspx 或SimpleButtonDemoTestPage.html 测试页面，您可以看到您的努力成果了。图3显示了SimpleButtonDemoTestPage.html 在浏览器中的外观。当然，目前主页中还没有什么内容，但在下一步骤中情况将有所变化。